Product
The Bisbee Animal Shelter website creates an intuitive, welcoming and personalized digital environment for anyone looking to adopt a pet - from first-time pet adopters to former pet owners. People can find cats, dogs, rabbits, ferrets, and guinea pigs at the shelter.
Duration: October - November 2021 (7 weeks)
Overview
Problem
Pet adopters want to learn the personalities of the pets they’re interested in adopting.
Goal
Design a website that allows users to discover pet personalities through pet stories and a variety of media in each pet profile.
Role
UX designer designing a website for an animal shelter through every aspect of the design process.
Understanding the Users
Dayna
Age: 28
Occupation: Elementary School Teacher
Dayna teaches 4th grade at an elementary school. She is single and lives by herself in her house. Her cat, Felix, passed away a couple of years ago. Lately, Dayna has been thinking about adopting a cat to keep her company during the COVID pandemic. Every so often, she checks the website of the local adoption shelter to see cats available for adoption. She wants a detailed description of each cat to narrow down her top choices. She doesn’t want to go off of just one picture and basic information like age, gender, and breed.
Lena
Age: 55
Occupation: Librarian
Rayaan is a librarian at the local library. She and her husband have decided to become first-time dog owners now that their youngest child has moved out, and to have a furry-friend for when her 4-year old grandson visits. Rayaan is hoping to have all of her questions answered throughout the adoption process so that there are no surprises, and be able to interact with prospective dogs in-person before making a decision.
Pain Points
Media
Online pet profiles that only have one photo of each pet
Behavior
Online pet profiles lacking information that showcases a pet’s personality and behavior
Process
Key information (ex. fees) about the adoption process that cannot be found online
Support
Difficult to get answers to questions online or over the phone
Wireframes
The intent of the pet profile webpage is to clearly showcase a pet’s personality while still listing key, standard pet information.
And based off my user research findings, I was able to decide what information should be placed above the fold on the ‘Adopt’ webpage.
Usability Studies
Below are the findings from usability study I conducted in which participants tested the pet adoption user flow in the low-fidelity prototype. A second usability study was conducted to test the high-fidelity prototype, and the following insights were revealed.
Round 1
1. Users want more information about the adoption process
2. Users want to know what to bring to an appointment
3. Users need labels that clearly correspond to related content
Round 2
1. Users need to be able to easily find more information about the adoption process
2. Users want interactive feedback upon deselecting a pet from Favorites
3. Users need intuitive interactions for selecting pets in booking appointment
Refining the Designs
The ‘Adopt’ webpage provides a general overview of the adoption process. After the usability study, I created an additional webpage that provides more detailed information on the adoption process.
Based on participants’ confusion on how to select pets to meet, I removed the Favorites icons from the pet cards so that users are more likely to click on a pet card to indicate their selection.
Key Mockups
Accessibility Considerations
Appointment Type
When booking an appointment, users can choose to meet pets in-person or virtually.
Color Theme
I used the Material Design Color Tool to ensure the colors meet accessibility levels when using white and black text.
Icons
Icons, such as profile and favorites, are paired with text (displayed when hovering).
Takeaways
While designing the Bisbee Animal Shelter website, I learned how to strategize designing a responsive website that maintains the “company” brand as I adjusted layouts, shapes, font sizes, and more.
Impact
Users feel like the website already knows what they’re looking for by providing additional helpful, specific links on every page.
One quote from a study participant:
“I like the extra information at the bottom. It feels like I won’t get lost. They are important things that will guide me.”