My Response to Responsive Website Design

Part 1- Badass Animal Shelter, their users and the opportunity.

Who is Badass?

Badass Brooklyn Animal Rescue is a Brooklyn New York based animal rescue shelter specializing in the relocation rescue dogs from high kill rate animal shelters in the southeastern portion of the US. Their mission is “Saving badass dogs from Idiot humans” and work as a network of fosters and volunteers under the 501(c)3 non-profit status.

And who might their users be?

We conducted a screener survey to determine who would be our primary user. In total 47 people responded to our screener survey, 11 participants were willing to be interviewed and 7 of them matched our criteria for primary uses of Badass animal shelter. We interviewed the users to understand what their experience was like in researching, finding, acquiring a rescue dog.

While interviewing people we learned:

• Users have different priorities in acquiring a dog.
• Users want transparency in regards to the shelter as well as the dog.
• Users prefer to understand as much about the dog as possible prior to seeing it in person.
• Users desire a mutually beneficial relationship between the
  dog, the owner and the shelter.
• Users want to feel confident in their
  dog acquisition.

Whats the problem here?

Our interviews revealed some great insights into the motivations, feelings, emotions, and hick-ups experienced in the dog adoption process. We used affinity mapping to group the observations gathered from the interviews and found two main insights:

People want to feel confident in their decision when
adding a dog to their lives by having access to
transparent information from trusted sources that
can help them make ethical decisions for both
themselves and the dog.

Although people have varying priorities as to why
they would add a dog to their life, they all are seeking
a mutually beneficial relationship between
themselves and their dog.

We used these insights to inform our Primary Persona, Taylor:

With Taylor in mind we diagramed a User Flow through the adoption process to better understand their thoughts feelings and emotions.

In this user flow you can see how turbulent the emotional journey is for Taylor by following the black line relative to the dotted line

Once we took into consideration Taylors roller coaster of emotion, we postulated our Problem Statement:

The process of dog rescue and adoption an emotional rollercoaster with no clear path to understanding the process, the shelter or the dog.

Taylor needs a way to find the right dog for her life, through a trusted shelter and determine if the dog will get along with her current dogs.

How might we create an adoption process that balances the priorities and motivations of the dog, the owner, and the shelter — in a way that is approachable, informative, transparent and convenient?

Part 2- Initial Usability testing, Design Studio, Feature Prioritization, Mid-Fi/Usability testing & Report

Well does it actually work?

We conducted an initial round of Usability Testing on Badass BK’s website to understand what typical users liked and disliked about the process of finding and visiting a dog.

This round of testing was conducted on five typical users by analyzing how they would find a dog and how they would proceed to schedule a visit with the dog.

Though our users were success in completely the tasks they were given, we discovered emotional pain points and frustrations regarding how or why things were visually displayed or how much information was not readily available, in order to help the user make more comfortable and confident decisions about what dog to consider for their dog growing family.

What we learned was that users expected:

• Information specific to the dog
• More transparency about being navigated away from the Badass BK website to learn about the dog
• More transparency in how they would go about scheduling a visit to see the dog in person
• A way of understanding the dog’s personality before committing to an in-shelter visit

This Usability Test report shows the unusual situation and reaction to not having a phone number to call.

What could we possibly do about this?

To wrap our heads around what to do about Taylors situation and how to address the problems we found on the ‘Homepage’ and ‘Find A Dog’ page, then used two separate rounds of Design Studio to sketch out a few Lo-Fi solutions.

In this first round we focused on the Homepage design.

For round two we focused on the Find A Dog page.

What we must, should, could, & wont be doing about this.

As a team we collectively decided that we will be adding:

• a ‘progression bar’ feature to give users more transparency about where they are in the process
• A search bar to directly search for dogs or information.
• ‘next steps’ feature to give users direct contact to schedule a time to see the dog
• ‘Pokemon’ styled dog bio cards to give more detailed info to potential adopters
• Icons to represent features about the dog for more relevant dog specific information
• Live Dog Cam feature to give users a chance to se the dog on camera before visiting in person.

The Lo-Fi’s were then converted into a Mid-Fi mockup on Figma to include our chosen features.

Here we see the Mid-Fi wireframes of the homepage with annotations

Next the Find A Dog page was Mid-Fi-ized with the noted features.

Well now how does it work?

The Usability Tests were a success, technically speaking. Users were asked to find a dog with no outstanding health issues, identify a dog that is good with other dogs and to find out how to view the live dog cam.

All three tasks were completed and all three tests showed minor issues with the designs around the understandability and use of icons, the repeating nature of the ‘Id like to’ feature as compared to the primary navigation as well as continuity of Live Dog Cam on all pages.

Based off our tests our recommendations included:

• Remove the “I’d like to” window
• Include Legend for iconography or add helper text; make icons more generic and minimal
• Hyperlink to single dog profile from dog name; delete ‘learn more’
• Include contact info icons in bottom corner — chat, email, phone
• Change “featured dogs” to “Additions to the family”
• Change “Info” to “About” — move 501c3 and value proposition there
• Place “Find a dog” as first option under the primary navigation “Adopt” tab
  Clarify language within filter/icons
• Hyperlink to single dog profile from dog name; delete ‘learn more’
  Add sort feature (sort by name, breed)
• Only include icons when it applies to that dog. (Ex: Health Needs icon is only there for dogs with health needs)
• Make the “I’d like to…” a Chat feature in bottom right corner
• Build out the “How to Adopt” process to be interactive/useful
• Promote the Live Dog Cam with better visibility
• Make the feature accessible on all pages
• Change the language or have a clear icon to communicate its meaning and the actions it will lead to

Part 3- Hi-Fi, Breakpoint Design & Prototyping

We are now entering…the Hi Fi Zone.

With the Mid-Fi’s tested and analyzed, we incorporated the recommendations into a Hi-Fi prototype.

Yes, your phone will work in the Hi Fi Zone.

Here we can see the our second breakpoint design for mobile, with annotation of the features included

Hang on Captain, here comes the Prototypes.

Using Figma we created a working prototype

In this image of the prototype connections, you can see the blue lines representing the active paths that a user could take through our system of Hi-Fi mock up webpages.

What did we learn here.

In regards to Navigation + Usability positives:

• Navigation through the ‘find a dog’ process occurred with efficiency and ease
• For 4/5 users the amount of information on each dog card and dog profile was highly usable for tasks
• The faceted navigation in tandem with icons allows for efficient customized search with scannable results
• CTA’s contained clear language that increased predictable nature of navigation
• Dog Cam feature enhanced user delight
• For 4/5 users, the footer provided findable navigation to contact the organization
• The process bar was explicitly helpful for some users, but expected the process bar to be actively guiding users

In the Visual Design sector wins:

• Users enjoyed the size of the dog images and the clear hierarchy of information on each dog card
• Users found delight and usability in the rotating banner images, wanting to click on the relevant information/pictures to learn more

The recommendations for Navigation + Usability included:

• From non-profit perspective, promote mission statement and prioritize donation actions from Home Page (via primary navigation and banner)
• Promote social media feed right away
• Adjust language in “Homework Disposal Engineer of the Week” to more instantly clear headline
• Make faceted navigation more apparent; add/test “sort by” feature; test filter at different levels of complexity (simplify with option of advanced search)
• Build out other pages within primary navigation and increase number of tasks tested
• Slow down the carousel banner or provide user control of the changing hero image
• Remove “Click Here” language in banner images and make the banners clickable

For our visual design our recommendations are:

• Adjust color palette to more modern and minimal palette (5/5 Users expressed that the visual design felt out-dated)
• Improve the amount of white space
• Make consistent the typography between primary navigation and other pages
• Remove black outline on navigation items
• Change icons to straightforward designs that maintain readability when scaled down
• Polish the dog cards to ensure alignment is appropriate for readability and consistency across each card

The next steps for this redesigned website include not only incorporating the recommendations but also using user testing to verify the primary navigation elements, the color pallet, the ‘Next Steps’ feature information architecture and possibly the ‘See the dog on video chat’ scheduling feature.