top of page
Animal Shelter Strip Image

Adopt-a-Paw

Project Background

This was my first project while working towards my Google certificate. I designed, prototyped, and tested this app idea I had for people looking to adopt pets, from dogs and cats to horses and pigs. From April to September 2021, I created the logo, the design system, iterated on the different screens the user would encounter, and refined the designed until I felt like I had a product that could solve the problem that I and many others have faced when looking for adoptable pets. My target audience were those who were looking to adopt for the first time.

Role

UX Designer

Date

April - September 2021

Methods & Tools

Survey, Secondary Research, Competitive Analysis, Figma & FigJam

Practices

User Research, UX & UI Design, Prototyping

Adopt-a-Paw Mockups
Concept

I wanted to create an app to help animals in shelters get adopted. One where the user can look at all the available, adoptable animals around them, even at different shelters. Be able to build an profile for the potential adopters and future adopters can share their information to make applying easier (think LinkedIn’s Easy Apply button). While giving animal shelters transparency into who is a applying for adoptions. Thus creating a better experience for adopters and animal shelters alike.

Adopt-a-Paw UX Design Story Board of the Big Picture
Adopt-a-Paw UX Design Story Board of the Up Close
The Problem

Currently, there are a few animal adoption apps available for download. Their fault is that available, adoptable animals are not actually available. Meaning that their listings are not kept up to date. Then, Users are taken off the app to each shelter's personal and unique adoption application. Making users repeatedly fill out similar applications with few differences between them.

IMG_0350.jpg
IMG_0345.jpg
The Goal

The goal for this project is to be able to give more accurate insights of what animals are available, easy application process, and adopter profiles that give shelters more transparency of who is applying.

User Research: Summary & Pain Points

I conducted user research and interviews to create empathy maps to better understand the potential users and their needs for this app. The primary user group identified through research was working young adults who are looking for first time pets, or first pet since childhood.

This group confirmed some assumptions, for example these users want one place to search for future pets. Research also revealed the want and need for an easy apply or have a profile with predefined fields that would automatically fill in when applying for adoption.

1

Time

Working young adults don’t have the time to search through various shelters and adoption websites.

2

Date

Majority of new pet owners, or even experience owners, want to gather as much information possible for a potential adoption.

3

Ease

Having a centralized location for all adoptable pets nearby, with a simplified application process that allows for pre-filling of basic information that the user can save.

Persona 1: Jordan
Persona 2: Blake

Problem Statement: Jordan is a busy professional with little free time who need an animal adoption app that can show them all the available animals in their area because they want to be efficiently find adoptable animals.

Problem Statement: Blake is an experience dog owner with one dog already who needs an app to find a dog with specific traits because he wants to insure both dogs get along.

Animal Shelter App - User Personas - Jordan
Animal Shelter App - User Personas_Page_2 1.png
User Journey Map

Mapping out Jordan’s journey revealed how having an app that shows all animals available for adoption nearby. Also, showed areas of improvement in the adopting and applying process.

Animal Shelter App - User Journey 1.png
Paper Wireframes

Taking the time to sketch out on paper some screens for the app allowed for quick iterations. Which in turned saved time while doing digital wireframes. I really wanted to focus on the home screen to make sure it is clear to the user what they can do with this app.

Adopt-a-Paw paper wireframe
Adopt-a-Paw Digital Wireframes with explanations.png
Digital Wireframes

Basing these wireframes on my paper prototype, I made sure to take into any initial feedback that users have given me from the paper wireframes.

Low-Fidelity Prototype

The low-fidelity prototype connects primary users to a few different flows:

  • Searching for a pet > viewing a pet > applying for adoption

  • Searching for a pet > adding multiple filters > viewing a pet > applying for adoption

  • Viewing My Profile > viewing favorite searches > viewing listing of adoptable pets > viewing a pet > Applying for adoption

Screen Shot 2022-05-02 at 6.13.20 PM.png
Adopt-a-Paw Low-Fidelity Prototype.png
Usability Study: Findings

I conducted two rounds of usability studies. Findings from the first study using digital wireframes helped me create better mockups and high-fidelity prototypes. While the second study helped me improve upon those mockups and high-fidelity prototypes.

Round 1 Findings

1

Users want a general application to apply
easily for multiple adoptable pets

2

Users want more filtering options to find
their prefect pet

3

Finding the apply button on the pet’s profile is hard to find

Round 2 Findings

1

Better bottom navigation

2

Some filtering actions aren’t easy to
navigate

Mockups
Mockup 1.png

In my early designs, I had both a top navigation bar and a bottom navigation. However, after usability studies and transitioning to mockups. I soon realized that I didn’t need to have both. So I removed the menu hamburger in the top navigation, and expanded the bottom navigation to have a favorites section since that was all that was missing.

Mockup 2.png

During one of the usability studies, it was pointed out to me while it's nice to have slider bars, in this instance it probably doesn’t make the most sense. After some exploration, I decided to improve the design by only using check boxes, and have a side bar of different filter categories.

Mockup 3.png

Also, during the usability studies, it was pointed out to me that the “Apply Now” button was not visible without scrolling. Their thinking was if they already looked at this adoptable pet before, and have now decided to apply for adoption, they shouldn’t have to dig for the button.

Key Mockups
Mockups 5.png
High-fidelity Prototype

The final high-fidelity prototype has now cleaner user flows for searching for adoptable animals, filter searches of adoptable animals, and different listing views.

It has also met the users need to quickly find adoptable animals and apply for them in one site.

Group 42.png
Accessibility Considerations

1

Provided alt text to images for screen readers to read to those who are vision impaired

2

Using icons where it makes sense for navigational purposes.

3

Considered color contrasted ratios when designing the app.

Takeaways

Impact: The app I created makes it easier for the user to find all available adoptable animals near them and apply adoption in one site.

What I learned: While designing Adopt-A-Paw I learned a number of things: Sketching and Paper Prototyping is essential, Usability studies are needed to see things from another view, Simpler is better

Next Steps

1

Create more mockups of additional features that currently present:
Favorites page
Setting up easy apply
Showing how the easy apply works

2

Conduct another around of usability studies to see if there are any pain points with these other features.

3

Continue user research to see if there are any other new areas needed.

bottom of page