top of page

Case Study: Pet Adoption Website

As part of the Google UX Design Certificate Program, my second project was to design a pet adoption user flow for an animal shelter.  I designed a responsive website for this project.  Continue reading to see how I took this project through the design process.



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)



Pet adopters want to learn the personalities of the pets they’re interested in adopting.


Design a website that allows users to discover pet personalities through pet stories and a variety of media in each pet profile.


UX designer designing a website for an animal shelter through every aspect of the design process.

Understanding the Users

Fresh Folk - Avatar.png


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.

Allura - Avatar_edited_edited_edited.png


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


Online pet profiles that only have one photo of each pet


Online pet profiles lacking information that showcases a pet’s personality and behavior


Key information (ex. fees) about the adoption process that cannot be found online


Difficult to get answers to questions online or over the phone



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


High-Fidelity Prototype

The high-fidelity prototype has intuitive interactions and navigation features that enhance the user flow experience in finding information on the adoption process, modifying favorites, and booking appointments.

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, such as profile and favorites, are paired with text (displayed when hovering).


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.


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.”

If you would like to discuss my work further or simply get in touch, my contact information is provided below.


bottom of page