iPhone 13 - Pink.jpg

Pet Portal

Role: UX Designer | Duration: July 2021, 4 weeks | Tools: Figma

Overview

Pet Adoption is an important step to take that requires a lot of responsibility. While looking through some pet adoption apps when I first adopted my cat, I noticed that a lot of them weren’t very user friendly. These were filled with frustrating features that felt clunky at times. I couldn’t help but wonder how many pets out there are not being adopted because these apps are frustrating to use.

PetPortal_graphics_chart.png
Research

During my search to learn more about pets in shelters, I decided to check some statistics. I learned that only 44% of dogs and 47% of cats currently in American homes come from shelters, and 920,000 animals are euthanized in shelters each year. These statistics are sad but not surprising, so it got me wondering... 

How can I create a mobile experience for potential pet parents to find their perfect new pal, and make it easy to adopt instead of shop?

So I sought to answer the following questions: 

• What is working with current pet adoption applications available and what needs improvement?
• Who are these potential pet parents?
• What are they looking for in pet adoption apps?
• Why do they want to adopt?
• How can their needs be met successfully?

I started my search within the app store and came across the two most downloaded pet adoption apps. In order to understand any current frustrations users are facing within these apps, I decided to do some digging and read reviews in the app store. It didn't take me long to see a pattern of similar pain points from different users.

0E4E4037-A639-41D7-8999-0E6F0809834E_1_201_a.jpeg
EFD79186-17A6-4949-A8E3-21D33A2572F7_1_201_a.jpeg
8B4C403A-D2E5-48C7-B729-BFDB3D743714_1_201_a.jpeg
5305F12E-E512-4892-BAFB-E0B3E5B83435_1_201_a.jpeg
  • Users want to be able to search by breed or be able to exclude certain breeds by typing a name versus having to scroll through a long list of all breeds

  • The distance filters are frustrating for users, they want to be able to search within a whole state for their potential pet.

  • Users want an option to hide pets that show up on their feed that aren’t a match for them.

Competitive Analysis

The top two most downloaded apps within the ios app store are Petfinder and WeRescue. I downloaded both of these apps and searched for pets while keeping notes of individual features.

PetPortal_graphics-01.png
Potential Pet Parents

According to research conducted by APPA National Pet Owners Survey, pet owners in the U.S. consist of 14% Gen Zers (Age 9-24), 32% Millennials (Age 25-40), 24% Gen Xers (Age 41-56), 27% Baby Boomers (Age 57-75) and 3% Builders (Age 76+). With this information, along with the information gathered during my analysis, I created 3 personas to reflect potential pet parents and their needs.

Persona1
Persona 2
Persona 3
Screen Flow

Based on user goals and needs, I created a few iterations of a screen flow that I thought the user would respond well to. These iterations included a more in depth article section, as well as different ways to break up the main feed. However, after making several revisions, I landed on the following screen flow that felt simple, to the point, and met user goals. This was my plan to determine how potential pet parents will navigate through the Pet Portal mobile application.

PetPortal_flow
Wireframes

I began the wireframe process with plenty of sketches. There were many different ideas and approaches I took to designing the app, but overall I felt that the design should be simple and accessible to align with the user goals–just like the flow map. The most challenging part for me was figuring out how to incorporate various filters into my design. Since a majority of user needs are based on filters within the Pet Portal app, I knew I needed to make sure that the filter options were clear to users. After tons of erasing and resketching, I transferred my wireframes to Figma for further refinement.

Onboarding & Signup

During the onboarding and signup process, users will be able to enter pet characteristics to be saved to their profile. Users can also set the location they wish to search in based on a mile radius, throughout an entire state, or anywhere! These options can be changed at any time in the profile section of the application.

spalsh screen.png
sign up.png
sign up preferences-2.png
behavior slider.png
sign up location-1.png
Pet Alerts

Custom alerts are displayed within the app based on the information entered during the signup process. These alerts will inform users about new matches based on their pet preferences.

13 Pro - 1.png
Browse Pets

When users are browsing for pets, a set of filters will pop up at the top of the screen. These filters can help further narrow down a search based on various preferences. Once users view a pet, they have the option to contact the shelter about adoption information, favorite the pet, or hide the pet from their feed.

Home.png
Browse.png
Pet Page.png
Frame 5.png
Additional Screens

These are additional screens where Pet Portal users can look at their favorite pets and shelters, explore different breeds, learn more about pet care, and manage their profiles.

Favorites_edited.png
Breeds_edited.png
Learn_edited.png
Profile.png
Visual Design

I wanted to make sure that PetPortal has a design that feels friendly and approachable. The combination of pastels with white helps the product feel light and less intimidating. I opted to use photos of real animals versus an illustration for pet icons, this is because the product is heavily photo-based. Icons are only used for filter options within the app, and illustrations are used for the onboarding screens.

UI.png
Interactive Prototype

The final prototype can be viewed here in Figma.

Lessons Learned & Next Steps

The first stage of designing Pet Portal has offered me valuable opportunities to really explore and expand my skill set within the discovery and design stages. This project started out as a student project, but I have since then reapproached ways to make the application better fit the needs of potential pet parents. Due to timing constraints, I opted to empathize with users based on app reviews. However, in the future, I would like to conduct user interviews with potential pet parents to further explore their needs and implement and explore any features I may have left out.
 

  • Additional Features - There were features on the competitive apps that stood out to me that I think PetPortal would benefit from. For example, Search by Photo, Similar Pets, and Map Search. These features weren't a priority for this round based on the personas and user goals, but I think they would be great features to incorporate in the future.

  • Alerts - Further refine alerts in the application and explore how users can save searches, and set up even more customizable alerts to fit their needs.