Designing a pet adoption website.
Project Type | Mock
Role | UX/UI Designer
Tools | Sketch | Marvel App | LucidChart | Illustrator

Case Study


By partnering with shelters all over the country – and eventually worldwide – they want to create a platform that allows people to see all the available animals in any shelter close (or remote) to them. Awareness and discoverability are the primary focal points that DYR wants to address.

  • Design a responsive website that covers core functionality: search for pets, information about specific pets, and information about DYR and shelters.
  • DYR doesn’t have a defined brand, so they are also looking for a new branding.


Research revealed that one of the biggest determining factors in the pet adoption process is determining the depth of connection and chemistry between the pet and the prospective owner. Users want to be able to see how the pet interacts with other pets and people of various age groups. Since an online platform cannot give users direct access to the pet in a physical way, I have designed a platform that allows them to view images and videos of each pet. This will give users deeper insights into the pet’s behavior by providing them with a visual platform on which they can see pets interact with various elements such as a toy, people or other pets. Providing people with advanced and valuable information will also encourage users to take the next step in getting to know the pet personally.


I began my research phase by familiarizing myself with the project brief and gaining a deeper understanding of our target market and industry trends. I have also conducted several interviews with people who are looking to adopt a pet or adopted on in the past. This helped me uncover their goals, needs, frustrations as well as experiences with the pet adoption process and platforms similar to DYR.

Provisional Persona – Lyn

Provisional Persona – Joe

User Interviews

Upon completing my first round of research, I conducted several user interviews to validate my assumptions and gather firsthand information on potential and prior pet adopters, and uncovered their motivations, goals, needs, and frustrations. I then synthesized my findings into an empathy map and a user persona which was used as a reference point throughout the project to keep me focused on the users I am designing for.

Key Insights:

  • Adoption methods used by participants: animal shelters, rescue groups, websites dedicated to pet adoptions (non-breeders websites) or through friends and family.
  • Motivations: finding a new companion, a friend, and new family addition. Being able to give back to society by rescuing a pet in need.
  • Getting to know the pet and seeing how it interacts with other animals and humans is an important part of the adoption process.
  • Enough information about the pet and the housing shelter or rescue group has to be provided to increase the online adoption rate.
  • Participants look for specific characteristics when searching for a pet such as the age, gender, personality traits, medical conditions, and history.

Common Needs:

  • Detailed information about the pet and housing shelter/rescue group.
  • Participants need to be able to search for specific characteristics to narrow down their search and find a pet that’s right for them.
  • Getting to know the pet either by going to the shelter or through other means that allows them to see how the pet interacts with others is a focal point.

Common Pain-Points:

  • Not bonding with the pet.
  • Not being presented with enough information about the pet which makes it harder to know if it is the right personality fit.
  • Adopting a pet that was not as expected.


Armed with valuable insights, I developed “Point of View Statements” and “How Might We…” questions, which helped me turn the insights into opportunities for design.


Upon brainstorming some design ideas, aligning the business and user goals, and developing a product roadmap, I composed a sitemap and a user flow to identify the structure of the website.

Creating this hierarchical diagram was an important step in ensuring content is placed where users would expect to find it. The map was also used as a reference point throughout the design process.

User Flow
From the sitemap, I developed a user flow which illustrates how Lisa, our user persona, will navigate through the site to perform a specific task. It was important to me that the user flow reflects on one of the main goals of the user persona – which was determined through research. The green path shows the steps she would take to perform the task of finding a small dog that gets along with young children and other dogs.


User Flow


Before diving into digital designs, I had sketched out some wireframes to play with various design ideas in a quick and efficient way. I focused my main attention on designing the screens needed for my user story such as screens for searching, filtering, browsing, viewing pet and shelter profiles, etc.. Once I was comfortable with my sketches, I redesigned them using Sketch.

Low-Fidelity Sketches

Mid-Fidelity Wireframes


Using my high-fidelity prototype (Marvel), I conducted in-person and remote usability testing with four participants between the ages of 21-37. Each participant was briefed on the project, and was provided with a detailed scenario to help them understand and relate to our user persona, Lisa. * Prototype represents the newest version with final iterations.


  1. Search for a small dog, located in NY, that gets along with kids and other dogs.
  2. Select a dog and make sure it meets all the requirements.
  3. Explain to me where you would click if you were interested in adopting the pet or asking a question. View Prototype

High-Fidelity Wireframes

After gathering important observations and feedback from all participants, I synthesized my discoveries into an affinity map to identify patterns and opportunities for improvements.

Overall, participants knew how to navigate the website, and were able to complete the tasks without assistance. Some of the issues participants experienced are listed below.

  • 2 out of 4 had trouble finding the filters dropdown menu – size was too small and it did not have a border around it.
  • All participants were unsure about how to adopt the pet. Assumed they would just go to the shelter. (It was designed with only one button with the text “Ask about me”).
  • 2 out of 4 would have liked to receive some information about the adoption process on the page or a direct link to “Adoption Info”.

Based on my testing results, I iterated my high-fidelity wireframes and re-created the prototype. These modifications included:

  • Making the “Filter” drop-down bigger and convert it to a button. 
  • I have also added a second button to the pet profile page. One is for inquiring about the pet and one is to adopt the pet.
  • I have also added a direct link to the “Adopt Info” to give users quick access to all the adoption process info.
  • Other improvements were visual re-touches (i.e. changing the look of certain UI elements, element re-positioning, etc.). It was important to make the application look as polished as possible while maintaining a clear hierarchy and usability.


A color style tile and a UI Kit were created to communicate the essence of DYR’s visual language and brand. The color style tile holds the colors, font, buttons, and imagery used on the site. 

Color Style Tile


Being able to work on this project was really rewarding and inspiring for me. It is always nice to create something that can potentially rescue someone in need. It was really important to me to fully understand our users because only then was I able to completely fulfill the requirements of this project.

The research process was somewhat challenging since many people prefer to visit brick-and-mortar shelters to adopt pets instead of looking online. But by digging deeper I was able to uncover valuable insights, which challenged new design ideas.

The site was not meant to substitute actual shelter visits and physical meet-and-greets with the pet. The site’s main intent is to facilitate the beginning stages of the pet search process for users by providing them with valuable information about each pet. It was also designed for the shelter to reach new audiences, and hopefully find a potential adopter for one of these loving animals.

As for the future steps, I would like to re-design the DYR logo since this is, in my opinion, one of the main points for improvement. Also, to ensure the newly-made iterations smoothly integrate with the rest of the site, and that user experience has dramatically improved since the prior designs, further usability testing would be necessary.


Liked what you’ve seen? Contact me if you’re interested in networking or have any questions.

13 + 13 =