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