Animal Humane Society Redesign
Redesigning the style guide and simplifying the search for the perfect pet.
Timeline 3 weeks
Team of 5 UX UI designers
My role user research, wireframing, prototyping, UI design, user testing
Tools Figma, Miro, Illustrator
Introduction
The Animal Humane Society (AHS) is a Minnesota-based shelter that provides direct care and services to animals across the state. They take pride in their advocacy for the humane treatment of animals, and are a great place to start looking for a new pet to bring into the family.
Background
The current design's landing page focuses the call to action on signing up for AHS's email updates. The top navigation menu is also content-heavy and can leave users searching for tabs longer than they might like.
The Focus
We decided to focus on redesigning the landing page, as well as the top navigation menu and style guide of the current website. The overall challenge we wanted to solve for users was the lack of disclosure of medical/behavioral difficulties pet owners seem to experience after bringing their pets home. It is important for people to have peace of mind that they are adopting a pet that is a good fit for themselves and their families.
Design Process
Research
Existing website
Competitor analysis
User interviews
Define
User personas
Empathy map
Journey map
Ideate
User flows
Feature prioritization
Information architecture
Design
Wireframes
Visual design
Prototypes
Test
Wireframes
Visual design
Prototypes
Initial Thinking
Target Users of AHS
-
Animal lovers looking to rescue
-
Families with children of all ages
-
Singles/couples looking for companionship
-
Volunteers looking to advocate for animals
Research Methods
-
Existing website
- Competitor analysis
- User interviews
-
Outreach to AHS workers & volunteers
Research Phase
Research Goals
-
Discover other existing platforms that offer animal adoption services.
-
Understand the tools and experiences people have when searching for animals to adopt.
-
Identify the strengths/weaknesses and possible opportunities to improve the search and adoption process with the AHS.
Competitor Analysis of Existing Systems
This method of research highlights the direct and indirect competitors of AHS. It allowed us to take a closer look at the strengths and weaknesses of other organizations and their products; this ultimately created a framework for our team's strategic planning moving forward with AHS's redesign.
Direct Competitor
Description & Competitive Advantage
-
An online database that can connect you to animal shelters across the country
-
Users have the ability to take a quiz that can bring up potential pet matches.
Potential Opportunities
-
No call to action for the quiz on the landing page--it takes a few steps in order to find it.
-
They are a third-party where users are redirected to agencies or other owners.
-
The pet database is very large and may be overwhelming for users.
-
Pet profiles may not have up to date information.
Indirect Competitor
Description & Competitive Advantage
-
Their main focus is on pet supply but they do offer adoption of smaller animals in-house.
-
They occasionally host adoption events where they team up with the local humane society.
-
Their country-wide reputation makes them a trustworthy brand.
Potential Opportunities
-
People aren't aware of adoption options.
-
Adoption page is located in a submenu.
-
Larger company, which tends to point to highly impersonal experiences.
User Interviews
We each sought out individuals that have rescued animals through AHS, for a total of 5 in-person interviews. Our main objective was to understand how people searched for available animals and their overall experiences.
Jamie
"When I brought my dog home for the first time, I noticed she had a limp that wasn't listed in her medical history. It took her a little while before she adjusted"
Kolby
"I like being able to filter my searches based on age, gender, breeds, etc. it makes everything much easier"
Ben
"It would be cool to see more photos and maybe even videos of the dogs before going in to visit them."
Key Findings
-
People are overwhelmed by the adoption process, and appreciate filters that allow them to narrow down their search.
-
Pet profiles need to be more transparent and detailed about medical and behavioral problems.
-
People tend to feel a little lost upon first bringing their pets home. They would like additional information on vet visits and general pet care, especially for first time owners.
Ideation Phase
Feature Prioritization Matrix
After defining the user persona based on the interviews, we brainstormed features that would improve the adoption process and pet profiles for the website. This matrix helped us determine the importance of those possible features.
Necessary Features
-
Pet matching quiz
-
Accurate health and behavioral information
-
More photos and possibly videos of the animals
-
More filter options for searches
User Flow
Helped us map out the path users would take when searching for a pet using the pet matching quiz and potentially adopting an animal.
Design Phase
Wireframes
We started out with multiple iterations of the quiz wireframes. We decided to have the call to action (CTA) of the landing page focused on the perfect match quiz, while keeping the other important CTAs (donations and information on how to volunteer) still visible on the landing page.
Low-Fidelity Wireframes
.png)
User Testing
The Objective
-
Have the user find and use the perfect match quiz.
-
Click on a pet to view their full profile.
-
Determine the level of difficulty for the user to navigate through the website.
-
Gather general user feedback.
The Results
-
100% success rate finding and taking the quiz, as well as finding the pet profile
User Feedback
-
"The quiz is a fun, easy way to filter out certain animals"
-
"I like the updated design. It's very clean and fun!"
-
"I like the progress bar but thought having question numbers would help"
Final Concept
This demo of the final concept includes only two of the 12 questions that are included in the full prototype. It was shortened for this quick demo, however, all of the questions included are based on market and user research.
Next Steps
-
Complete more usability testing
-
Finish responsive design for mobile and tablet interfaces
-
Focus on other aspects of the website: Donation, emergency services, etc.
Thank you!
Thank you!
