Animal Shelter

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

Screen Shot 2023-01-07 at 9.32.11 AM.png

At a Glance

Team

UX Designer (me)

Tools

Adobe XD

Timeline

Feb-Aug 2022

Responsibilities

User Interviews

Wireframing

Prototyping

The Goal

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

Discovery Research

I conducted five interviews to ask users about their adoption experiences to answer the following questions:

Research Questions

What can a website add to the adoption experience?
What frustrations have users had when trying to adopt pets in the past?

Findings

These interviews revealed three main pain points:

User Pain Points

Confusion about Process

Users are not clear on the shelter's exact adoption process

Animal Information

Users often want more information about the animals, and would appreciate if the website provided more details

Resources

The website should provide resources to answer questions and help first-time pet owners

Personas

Screen Shot 2022-05-22 at 11.58.38 AM.png

Name: Kat

Age: 25

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.

Screen Shot 2022-05-22 at 11.58.45 AM.png

Name: Anika

Age: 42

Occupation: Teacher

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.

Screen Shot 2023-01-07 at 11.41.55 AM.png

Starting the Design

Paper Wireframes

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:

Idea 1

This idea prioritized information about adoption for the main focus of the homepage.

Idea 3

In this iteration, I aimed to provide links to all of the information a user could find on the website.

Idea 2

In this iteration, I included a footer, and I split the homepage between showing some featured animals and providing more information about the shelter.

Final Homepage

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.

Digital Wireframes

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

Screen Shot 2022-05-22 at 3.52.17 PM.png

5/5 users wanted a lot of pictures of each animal, so I made the image a focal part of this page.

Screen Shot 2022-05-22 at 4.26.32 PM.png

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

Low-fidelity prototype

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.

Usability Study

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.

Findings

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

Screen Shot 2022-05-22 at 4.51.52 PM.png

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.