Project Background

Adopting a pet is no small decision. People want to know that their new friend is not only healthy, but compatible with their home environment. When less people are “walking in” to shelters and more people are hoping to find their match online, the writing is on the wall to shake things up.

The Client

APL is a well known acronym when it comes to pet adoption. The Cleveland branch specifically has a reputation for compassion, advocacy, and leadership within the pet community. They adopt dog, cats, birds and everything in between and do their best to ensure that their pets are adopted into loving, caring homes.

The Problem

The core of the challenge was to “enhance the adoption process” which involves understanding the types of information users need to make a well informed decision and then surfacing it to them in ways that feel effortless and intuitive. We also wanted to expand search capabilities and give users inline actions like applying to adopt, and scheduling a visit.

The Approach

Once I understood the challenge and what the client’s goals were, I mapped out a process of how I thought I could best achieve the outcome the APL was looking for.

Initial Discovery

Before diving into design, I did some initial discovery by interviewing a handful of potential users. I wanted to better understand a user’s typical journey in a pet adoption process, any pain points and challenges they may encounter, and the different types of technology our target audience will be using. I was also hoping to discover what makes them feel engaged during the adoption process and what factors make them want to continually use a product.

Research Goals:

1. Understand the step-by-step process potential pet adopters go through when adopting from a shelter.
2. Identify the challenges and pain points potential adopters face during the adoption process.
3. Get a picture of what feature aspects people consider essential for making informed adoption decisions.
4. Understand what factors may encourage repeat visits to the platform.
5. Gain insights on how to ensure the pet adoption platform is accessible and inclusive to a diverse audience.

Key Learnings

After synthesizing my research results, 5 key findings surfaced as focus areas to explore for a potential solution.

Persona Development

When looking across my research findings, three key personas took shape. The animal enthusiast, the on-the-go family man, and the tech savvy professional.

Reframing the Problem

The Current Process for Adopting a Pet

Mapping the current user journey for pet adoption on the APL’s website helped me to identify some key pain points in the process and also improvement opportunities for a future solution.

Potential Key Features

Site Map

Creating a site map allowed me to get a 5,000 ft view of the overall navigation and all of the proposed content to incorporate into the site.

User Flow

As a user, I want to find a pet that I am compatible with and then take action to apply for adoption or schedule a visit to meet the pet at the shelter.

User Flow 1: Finding a Pet

User Flow 2: Taking Action

Sketches

I sketched at least 5 versions of each screen before I chose final layouts, ensuring I explored a range of possibilities before deciding on that I would bring to digital. The majority of the screens address at least 1 pain point from user research.

Initial Design Decisions

As I brought the designs into Figma, I worked to further flesh out screens based on all feedback and findings from the user research.

Home Page

Users should have quick direct access to search and the primary navigation but also be able to scroll and explore.

Pet List

After the user selects the pet type, new pets are brought their attention first, from there they can filter down the list. All pet cards include a large image for connection.

Pet Detail

Once selected, a user can quickly scroll through photos and browse the pet’s information to figure out if it’s a good fit. Action buttons are always close by for when a user decides this could be the pet for them.

Apply to Adopt

Taking action happens in a form inside a modal right over top of the pet detail page.

Micro-Journey 1: Three Ways to Find the Right Pet

My goal for this part of the journey was to help the user find a compatible pet as quickly as possible and cater to the different ways users typically locate information on a website. By utilizing top-bar navigation, search functionality and direct links to pets from the homepage, a user has 3 different ways they can find the pet of their dreams within the flow.

Micro-Journey 2: Take Action

Once a person finds the pet they are interested in adopting, they are able to either schedule a visit with the pet or go straight to applying to adopt.

Entire Flow: Finding a Pet + Taking Action

Combining both micro-journeys illustrates the entire flow of how a person will select a pet and then apply to adopt or schedule a visit.

Mobile Translation

At this point in the process I also wanted to do some static mobile mock-ups to ensure my design ideas were scalable and would work across platforms.

Usability Study

Now it was time to get some user feedback on my design ideas.. I conducted live 1-on-1 usability studies with 5 participants where they were asked to complete a series of tasks and I observed their behavior. I wanted to evaluate the ease of use in the entire flow, understand user’s usage patterns, and see if they are getting stuck anywhere.

Research Goals:

1. Understand how quickly and easily users are able to find a pet and apply to adopt or schedule a visit to the shelter.
2. See if they’ll use the main navigation, scroll the home screen, or search using the search bar. 
3. Find out if users more likely to apply to adopt or schedule a visit.

KPI’s:

• User Error Rates
• Time on Task
• System Usability Scale

Key Findings

After synthesizing and analyzing all of the user feedback, a few key findings surfaced.

Defining a Visual Style

Before fully bringing the screens into high-fidelity I needed to update the APL’s visual language to feel more fun, friendly, and modern.

Brand Translation + Incorporating User Feedback

Because of how well the flow tested I was able to incorporate all feedback and update the branding at the same time.

Homepage

Relying heavily on video and images of pets and people to pull at heart strings brings emotional connection and allows the user to imagine themself as a potential pet owner. Also images and icons help to communicate which type of pet a user is navigating to.

Pet List

Search is always accessible throughout the site and filters carry through from the home page. Image size creates a visual hierarchy guiding users through the list of pets. Cards include important basic information to help a user make a decision quickly.

Pet Detail

Pet photo and carousel are larger so a user can easily view more photos as they read about the pet. “Apply to Adopt” button switched to left position as it is the primary action. Additional moments of branding create user delight.

Apply to Adopt

Title and action buttons are sticky so user never loses context of where they are and is always aware of what action they can take. Actions are followed up by a confirmation dialogue to give users feedback that the action is completed and any additional steps.

Mobile Adaptations

In translating the interactions to mobile, I had to make a couple adaptations outside of resizing and re-stacking. The mobile and search functions needed to work in a way that felt more native to mobile.

Navigation

To work for mobile, navigation had to become a full screen experience that is broken into two steps. In first step a user selects the broader category, and in the second they select the pet type. They always have the ability to navigate back and forth between steps.

Search

For the home page, search also had to go full screen to allow for a long list of search options. For interior pages, I split the desktop top bar into two bars where search becomes a secondary bar under the navigation.

Reflection

The APL project underscored how emotional the adoption process is—and how easily that emotion can be lost online. While adopters need practical information about health and compatibility, what often drives a decision is a sense of connection. Our challenge was to recreate the warmth of in-shelter interactions within a digital platform, making discovery both personal and actionable. Through user research and usability testing, we identified what details mattered most to adopters, then designed flows that balanced empathy with efficiency. Each iteration sharpened the experience, helping us preserve the joy of adoption while improving clarity and confidence in the process.

Key Takeaway

APL taught me that great design means honoring both the head and the heart. By weaving together emotional connection and practical detail, I learned that digital adoption tools must do more than provide information—they must capture the human bond that makes adoption meaningful.