UX / UI designer

Adopt an Angel

where fur babies find their human . . .



Approximately 6.3 million companion animals enter U.S. animal shelters nationwide every year. Of those, approximately 4.1 million are adopted. That leaves 2.2 million yearly that are left languishing in cages or euthanized.

Despite the numbers of animals needing homes, many people that are willing to adopt, report feelings of frustration and fail to adopt when interacting with shelters and rescues. Shelters are so busy caring for the animals and/or operating on low (or mismanaged) funds that public facing procedures are sorely neglected. Money, time and strategy is needed to advertise, interface with and screen the public.

*These estimates are based in part on Shelter Animals Count. 

Let's create an app to make adopting a pet from a shelter easier. The goal is to improve the lives of both humans and animals.


We are creating a new app to help people adopt a pet from a shelter. We need to find out if the main user experience, finding and applying for a pet is easy for users to complete.


My pet adoption app will let users browse pets and apply to adopt them online. It will be welcoming, efficient, easy to use, accessible and a pleasurable aesthetic experience. This will reduce frustration and improve placement numbers. More people will welcome rescues (and the love that they bring) into their homes.


Personas, User Journey Map, User Flow, Competitive Audit, Sketches, Wireframes, Usability Testing, UI Design, Low and High Fidelity Mockups and Prototypes

I utilized the methods learned from Google UX Design Certification@Coursera.

We will measure effectiveness by:

  • search functions performed

  • pet applications submitted


  • Figma

  • Adobe Creative Suite

My Role

  • Solo project

  • UX / UI Design


  • Overall: 8+ weeks

  • Discovery & Research: 3+ weeks

  • Design & testing: 6+ weeks

My Design Process

Understanding the User

To understand the user as well as the services that competitors provide
I utilized the following methods to begin:

  • Personas

  • User Journey Map

  • Pain Points

  • Competitive Audit including Visits to location both onsite and off


I wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, I created 2 personas for each of our user segments. I based these characters loosely on people that I met in the real world when visiting shelters or adopting out kittens from rescue organizations. I have spent a significant amount of time both working and volunteering at shelters/rescues such as ASPCA Kitten Nursery (NYC), ACC (Brooklyn), Brooklyn Animal Action and others.

I used these personas whenever I wanted to step out of myself and reconsider my initial ideas.

  • I visualized these personas while I built the app every step of the way and considered their reactions and potential paint points during user journey flows.

User Journey Map

I created a customer journey map to build a better understanding what steps are involved in adopting a pet. The reason I used this method is to discover the pain points that the user experiences each step along the way. The map below highlights user problems and opportunities. The trickiest points for the user are during the search and application stages.

I determined that I need to make sure that there are robust design solutions in place for those stages of the customer journey.


Discovering the Pain Points by mapping the user journey


Top 4 Pain Points

Creating a "User Story" and an "If/Then Statement," helped me to empathize with user pain points. I could then more easily work towards solving those paint points with design solutions.

User Story: Agustin

As an immigrant student with a family

I want to learn about which pets are available / I need a Spanish version of an app or website

so that I can adopt a pet without language being a barrier to me

If / Then Statement: Agustin

If Agustin downloads the shelter app

then he can read clear directions in Spanish and adopt a pet


Indirect and Direct Competitors

User Research: Competitive Audit Report

I performed a Competitive Audit Report, where I compared the pet adoption experience and flow of each competitor's desktop or mobile experience.

Included were: ACC, Animal Care and Control for NYC (key direct competitor); ASPCA (indirect competitor); Bidewee (direct competitor); and Northshore Animal League (direct competitor.


Some gaps identified include:

  • No breed-specific education

  • Limited accessibility features

  • Lengthy and confusing adoption process directions

Some opportunities identified:

  • Offer info on breed characteristics

  • Streamline adoption procedure

  • Offer translation to include non English Speakers

  • Offer accessibility features

  • Offer online chat to support users


  • The Northshore Animal League provided thorough and clear user experiences within their desktop / mobile digital products.

  • Downside: directions communicated in long, hard to digest paragraphs -especially challenging for ESL users.

User Flow

How can we make the journey inclusive and easy? My goal is to simplify and streamline the process of identifying a pet and submitting application. My goal is to address the user pain points and offer solutions.

Pain points addressed in this flow:

  • Adoption Process clearly outlined on individual pet page

  • Available pets easy to search with simple and advanced pet browse function

  • Language selection on second screen- prior to having to navigate app

  • Scheduling will be incorporated within submission forms.

Just including multiple language speakers will open access to thousands of people that would be otherwise be unable to go through the search and application process which is necessary to adopt. That converts to thousands of additional pets in loving homes rather than in the shelter or euthanized.

While I want to offer additional functionalities, I don't want them to come at the expense of a very easy user experience that is simple to navigate. Additional functions can be placed in locations that are findable but not distracting or confusing.

The goal is to reduce drop off rate and increase conversions.


Streamlining the Flow

Starting the Design


I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user needs as well as addressing their painpoints. I kept in mind the goals of streamlined simple UI, and design principles of hierarchy and proximity.


The 5 initial versions of the Home Screen. On Home page, user can start the search immediately by clicking

on the picture of the species of animal they choose. I experimented with multiple layout options.

  • I strove to focus on images, icons and minimal, strategically chosen copy

  • The main purpose of my sketches was brainstorming solutions.

  • Sketching and storyboarding were the springboard from which to build the wireframes.



Using Figma, I translated my first sketches into low-fidelity wireframes. Then, I improved them by adding a few relevant icons and copy that I wrote. At this stage, the wireframes were defined enough for some user testing. Based on tests of 5 participants, I made multiple alternations and moved on to creating high-fidelity prototypes.

Low Fidelity Prototype

Individual page with Pet detail

• Can change language from any screen added after usability testing

• Info: history, breed, care, fees, age, gender, weight, ID number

• Chat feature [added after usability testing]

• Clear buttons for scheduling meeting or applying

• Arrows to easily browse more cats

• Multiple pictures in gallery

• Bottom Nav, hamburger menu for easy navigation

Refining the Design

Usability Testing

Using the low fidelity prototype, I conducted Usability Testing (5 participants) in the first round. I iterated on issues that were identified and then moved into designing high fidelity mockups. I created a fully-functional, high-fidelity prototype of the new flows using Figma.

Then I performed two more rounds of Usability Tests with 3 /3 participants. Below are screenshots before and after Usability Testing with improvements explained.


Design solutions evolution for adoption process pain points


Design solutions evolution for searching available pets pain point


Improvements before and after Usability Testing: searching available pets


Addressing User Pain Points through Design

Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand. Adopt an Angel - matching rescue animals with their human.

Keeping these goals in mind, I started choosing/creating colors, icons, design patterns, interactivity and imagery.

  • Cheerful yet professional. Endearing, heartwarming, simple, welcoming and clean

  • Contrast aligned with W3C standards

  • Designed for mobile

  • Interactivity

I chose pictures of people interacting with pets to inspire the user to forge through the process and focus on the end goal which is a loving connection with a rescue. The person may have had trouble adopting before but by using this app, they will be able to identify and adopt a pet.

Style Guide: TO COME

Working Prototype


Search available pets easily

[pain point: search available pets]

1 design solution for Search pain point

Scroll horizontally to view available kittens. Can reset the filter options via pop up screen or chips.


Search available pets easily

[pain point: search available pets and breed filter]

1 design solution for Search pain point

After feedback from usability study, I added an additional filter screen which slides up on top of the search results page.

User can change filter choices using filter screen instead of using dropdown arrows from chips (as previously).

On the chips, I changed the drop down arrow to an "X." User can remove filter selection by pressing the X on the chip.


Choose time of meeting

[pain point: scheduling]

1 design solution for Scheduling pain point

User can choose their preferred time. This can work if it is a shelter that has staff onsite 24/7.

Otherwise, user will only be able to choose available times on the scroll. If they choose an unavailable time, an alert will guide them to choose different time.

Schedule of available times will be listed below or above the component.

High Fidelity Prototype

Next Steps


  • Continue refining UI.

  • Add micro animations to engage the user and make more clear functionality.

  • Enable AI powered searches for breed information. Match function so that users can search which breed would be a good fit for their household.


  • Start to build out working app in WebFlow

  • Allow shelter/rescue to customize their questions in screening process.

  • On back end shelter can customize to their own specifications


Conduct more user testing to identify additional pain points for users


While including many options and features is tempting, that can lead to cognitive overload for the user. Too many options becomes confusing and increases drop off rates. Therefore I focused on clarity and ease of use over incorporating all of the functions that I wanted (for now).

Time and budget constraints were a consideration for me when determining which ideas to incorporate. I chose to create the basic app first and then will add more functionality at a later date. I need to manage my available resources properly in order to actualize the vision at all.

Thank you for reading my case study!

Want to collaborate? Feel free to contact me!


...or just say hello on my social media.