Project Overview
The Product
Second Chances Animal Shelter is an organization that seeks to match pets needing homes with people searching for pets. The typical user is between 20-60 years old with a wide variety of backgrounds.
Project Duration
April 2022 - May 2022
The Problem
Finding a pet online is stressful for users looking to adopt a pet that meets their specific needs.
The Goal
Design Second Chances Animal Shelter’s website to be user-friendly and reduce stressful scenarios by providing guides to find the right pet, allowing users to schedule a time to meet a pet they are interested in, and allowing users to fill out adoption application forms before heading to the shelter.
My Role
Solo Product Designer
Responsiblities
-
Conducting interviews
-
Paper and digital wireframing
-
Low and high-fidelity prototyping
-
Conducting usability studies
-
Accounting for accessibility
-
Iterating on designs
-
Responsive design.
User Research
After conducting interviews and utilizing empathy maps I was able to gain an understanding of potential users and their needs. A primary user group identified through the research process where families who are looking to find a family pet that meets their specific needs.
This user group revealed that they wish they could schedule a time to meet a potential pet and fill out adoption forms online. Other user challenges identified were finding a pet online that they wanted and finding the pet was unavailable once they arrived, and frustrations on reading through every pet profile.
Pain Points
1
Scheduling
People looking to adopt a pet want to be able to schedule times to meet a potential pet in order to reduce stress when going through the adoption process. Designs will allow users to schedule meet and greet times.
2
Requirements
People searching for pets often have specific characteristic requirements. Designs will allow users to filter through characteristics to help find their perfect pet.
3
Forms
People looking to adopt a pet want to streamline the adoption process by filling out forms online. Designs will allow users to complete adoption forms online.
Starting the Design
Inforamtion Architechture
Difficulty with finding a pet that meets users' needs was a primary pain point for users, so I used this knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve user navigation when searching for a pet.
Paper Wireframes
Paper wireframes allowed me to quickly ideate layouts, keeping user pain points for scheduling, needs, and forms at the center of my decision-making.
​
The home screen wireframe variations shown here focus on optimizing navigation for users.
​
Considerations were also made for responsive web design, as many users will browse for pets on mobile or tablet devices.
Stars were used to indicate elements from each sketch that would be used in the initial digital wireframe.
Digital Wireframes
Supplemtary content is deemphasized.
Easy access to users' main objectives.
Low-Fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow for finding a pet, scheduling a time to meet that pet, and filling out adoption forms.
View the low-fidelity prototype.
Usability Studies
The low-fidelity prototype was used in an unmoderated usability study.
​
The goal of the usability study was to determine if users could accomplish their goals within the site and to determine the amount of effort needed for users to complete tasks.
Key Insights
-
Users want simpler navigation throughout the site. There were too many entry points.
-
Users were confused about which elements were nested within the homepage.
-
Users wanted to quickly know what day an event was happening.
Design Revisions
Before Usability Study
After Usability Study
Navigation
"Help me find my new best friend" button was reloacted to adoption landing page.
Nesting
Hover state was added to main objectives on the homepage.
Before Usability Study
After Usability Study
Events
A toggle was added so that users can view events in a list or calandar view to meet their individual needs.
High-Fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes that were made after the usability study.
View the high-fidelity prototype.
Accessibility Considerations
1
Headings with varying text size and weight for clear visual hierarchy.
2
Sight annotations to ensure smooth navigation through the site with screen reader technology.
Takeaways
Impact
This website makes users more confident that they will find a pet that meets their needs and reduces some of the stress factors when searching for a pet.
A participant in a usability study said:
“I really love that I can take a survey to help me find a pet that meets my needs. I feel much more confident in choosing a pet than I do when I have to read through pet profiles myself.”
What I Learned
I learned that simplicity in design often breeds intentionality. Providing users too many options can often lead to a frustrating experience, and as a designer I want the user’s experience to be as seamless and easy as possible.