PetsHome
Role
UX/UI Designer
Project Duration
September - October 2022
Tools
Adobe XD
Responsibilities
Research, Wireframing, Prototyping, and iterating on designs
Project Overview
Every year millions of animals end up in shelters while many people decide to buy from pet shops or breeders. Although people may want to adopt, many find the process confusing, tedious, and are unsure how to find the perfect match. My goal was to design a responsive website to improve usability and accessibility for the pet adoption process and to improve the rates of adoptions by removing barriers to help rehome pets.
User Research
Personas
I found out that during people’s initial search, many prefer finding a pet through an online source rather than to take time visiting a shelter. A common frustration was that pet adoption websites look cluttered and finding adoption information is too complicated. I created personas to better understand the goals and characteristics of target users that represent the needs of larger groups of users.
Emily Shae
28 | Bachelor’s degree | Married | Engineer
“Now that I am newlywed and have a steady income, I am ready to adopt my first pet.”
Emily and her husband Gary recently bought their first house out in the suburbs with a small fenced in yard, perfect for a dog. Emily grew up always having a dog but once she moved out and went to college, she no longer had time to take care of any pets. With Emily and Gary’s new house they are ready for their first dog together but don’t know where to start looking since they recently moved to a new city.
Problem Statement
Emily is a new house owner who needs a way to find pet adoption information because she wants to adopt a dog.
Liam Kaiser
65 | Master’s degree | Married | Retired teacher
“I’m a huge animal lover and now that I’m retired, I want to volunteer at local animal shelters.”
Liam has always been a pet lover and has had many dogs and cats throughout his life but after the death of his previous dog, he decided to take a break from pet adoption. Now that Liam is recently retired, he wants to be around animals again but does not want to own one. He learned about fostering an animal from one of his friends and started looking into local shelters.
Problem Statement
Liam is a recently retired teacher who needs a way to learn how to become a foster parent because he loves animals and wants to become a volunteer.
Starting The Design
Sitemap
Difficulty with website navigation was one of the primary user pain points so I used that information to create a sitemap. My goal was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy to find with as few clicks as possible.
Paper Wireframes
Next I sketched out paper wireframes for each screen, keeping the user pain points about unclear navigation in mind. Since many users will be visiting the site from different devices, I also worked on designs for additional screen sizes to make sure the site would be fully responsive.
Digital Wireframes
Next, I took different elements of my paper wireframes and put them together to create digital wireframes. Once all the wireframes were laid out, I connected the screens to create a low-fidelity prototype.
Low-fidelity prototype
To create the low-fidelity prototype, I connected all of the screens involved in the primary user flow of adopting a dog from start to finish. I prioritized keeping the design flow minimalistic to help with the user pain point of the dog adoption process being too confusing. Check out my low-fidelity prototype.
Mockups and Prototype
Style Guide
I chose an earthy color pallet to match the colors of dogs and cats. I went with bright orange as an accent color to give vibrance to the site. Orange is also associated with optimism and energy and I used it to convey a positive message to show that pet adoption is exciting and rewarding.
High-fidelity Prototype
Once the mockups were finalized, I connected the pages to create a high-fidelity prototype. My hi-fi prototype follows the same user flow as my lo-fi prototype. Check out my high-fidelity prototype.
Responsive Design
Finding your perfect pet can happen anywhere at any time. Whether a user is viewing the site on a desktop computer or mobile phone, I wanted them to have the same positive user experience. Here are some examples of how the site will look like on a mobile device.
Conclusion
Personal reflection
I am a huge animal lover and have owned pets all throughout my life. My family has always adopted from local shelters and I have loved each and every single pet we’ve owned. Although I was young the last time we adopted from a shelter, I remember the process being tedious, long, and somewhat confusing. I wanted to create a positive user experience that would help make the adoption process more straightforward.
What I learned
Getting to talk with others about their pet experiences was my favorite part of the project because learning about people’s adoption experiences helped me empathize and ideate ways to make the process a lot smoother. About 70% of U.S. households have a pet so designing a responsive website for a large group of users was a fun challenge. I kept the design simple and minimalistic to convey the idea that adopting from PetsHome is a straightforward process.