I completed this project as part of the Google UX Design Certificate. The prompt for this project was to "design a pet adoption flow for an animal shelter"
Role: UX Designer
At a Glance
UX Designer (me)
Design a website for the shelter that allows users to:
View available animals
Book an appointment to visit the shelter
Find resources about pet adoption
I conducted five interviews to ask users about their adoption experiences to answer the following questions:
What can a website add to the adoption experience?
What frustrations have users had when trying to adopt pets in the past?
These interviews revealed three main pain points:
User Pain Points
Confusion about Process
Users are not clear on the shelter's exact adoption process
Users often want more information about the animals, and would appreciate if the website provided more details
The website should provide resources to answer questions and help first-time pet owners
Occupation: Grad Student
Kat is a 25-year-old grad student who lives alone. Lately, Kat has been feeling lonely and has decided to adopt a cat for the first time. They’re nervous about the process but want to adopt from a local shelter. They’re also concerned about how much a cat will cost, so they want to make sure they can afford a pet.
Anika is a 42-year-old teacher who lives with their spouse and two children. The family has decided to adopt a puppy from a local shelter. Anika wants to make sure the puppy is good with their kids, but they get overwhelmed easily when the shelter is busy and wish they could learn more about each puppy before visiting the shelter.
User Journey Map
Mapping out Kat's user journey helped demonstrate how the website can help users find animals they're interested in and make an appointment to visit the shelter, as well as the importance of including information and resources to make the process less stressful.
Starting the Design
I drafted multiple iterations for each page of the website to brainstorm the best way to address the users' needs. For the homepage, I ultimately chose a design that highlighted the main pieces of information a user may be looking for on the website: information about adoption, the shelter's story, and resources for adopting and owning a pet. Pictured below are iterations of the homepage:
This idea prioritized information about adoption for the main focus of the homepage.
In this iteration, I aimed to provide links to all of the information a user could find on the website.
In this iteration, I included a footer, and I split the homepage between showing some featured animals and providing more information about the shelter.
I liked the last iteration but felt that it was a little too cluttered, so for the final wireframe, I chose to highlight just the three main potential user flows - adopting, looking for more information about the shelter, or using the resources.
As I began to create digital wireframes, I continued to keep the users' desires and pain points at the forefront of my design process. Below are two of my digital wireframes, for the homepage and animal information page, respectively.
The navigation menu includes links to the main pages of the website, making it easy for the user to find what they're looking for.
5/5 users wanted to easily find adoptable animals, so I included some animals on the homepage, with a link to view the rest
5/5 users wanted a lot of pictures of each animal, so I made the image a focal part of this page.
4/5 users wanted an easy way to make a donation to the shelter
3/5 users wanted to find resources either about pet care, budgeting, or owning a pet for the first time
I included a prompt to either book an appointment or view the resources to help guide the user through the user flow
4/5 users wanted detailed information about the animal's health and history
The low-fidelity prototype connected the primary user flow of viewing adoptable animals, selecting an animal, and making an appointment, so the prototype could be used in a usability study. A video of this main user flow is included below, and the full lo-fi prototype can be viewed here.
I conducted a usability study with the lo-fi prototype described above. The usability study was unmoderated and took place remotely. There were four participants who were between the ages of 21 and 65.
4/4 users want it to be easier to find the page with available animals
2/4 users want the navigation menu to be in the same place on all pages
2/4 users want the book appointment page to show the animal the user clicked on to make the appointment, to allow for more continuity throughout the user flow
1/4 users want the contact information for the shelter to be easier to find
Refining the Design
Users wanted the available animals to be easier to find from the homepage
Since users found it difficult to find the available animals, I changed the layout of the homepage to focus on adopting animals. Below the featured animals, I included links to view the resources and make an appointment to make it easier for users to find information relevant specifically to the adoption process. I also added contact information in the footer of all of the pages to make it easier for users to find.
Before Usability Study
After Usability Study
Users wanted more consistency throughout the website
Users wanted the see the animal they were interested in while making an appointment to come see that animal. They also wanted the navigation menu to be in the same place on all the pages. The appointment page is shown below, which now shows the animal and has the navigation menu in the top left corner.
Before Usability Study
After Usability Study
A video of the main user flow is included below, and the full high-fidelity prototype can be viewed here.