Paw Prints

Reuniting owners with missing pets.

Paw Prints is an iOS mobile app concept project that makes it easier and faster for owners to find their missing pets, access helpful resources, and connect with their community. 

MY ROLES |

UX Researcher, UX Designer, UI Designer

PLATFORM |

iOS Mobile App

TYPE | 

Concept Project

TOOLS |

Figma, Adobe XD, Miro, Whimsical, Zoom, Jira,

Pen + Paper

TEAM |

 2 UX/UI Designers

THE CHALLENGE

Design an experience for people who care about the welfare of animals. ​

HIGH-LEVEL GOALS

How might we help pet owners...

1. ...know where to find help when their pets go missing?
2. ...narrow their search results for their missing pets?

3. ...spread the news when their pets go missing? 

Step One: Learn

THE PROBLEM SPACE

I am lucky to have never had a missing pet. To fully understand what pet owners feel and experience when this happens, my teammate and I set out to learn more about the context of this space, current market trends and existing resources, and the unmet needs of individuals whose pets have gone missing.

 

Our research aimed to understand: 

1. Technologies and services pet owners use to find their missing pets
2. Actions pet owners take to reunite with their lost pets

 

THE MARKET

To understand and identify any gaps within the existing competitive market, we conducted a market analysis, which revealed: 

portfolio - paw icon.png
On average, there’s only a 20% return-to-owner rate for stray animals
portfolio - share icon.png
Sharing information about missing pets is the most important feature for users 
portfolio - audience icon.png
Pet owners use large, established social platforms to reach a wide audience 

There was clearly an opportunity to provide a way for users to share information about missing pets to a wide audience and to help pet owners find trusted information and resources to guide them when their pets went missing. 

OUR USERS

My teammate and I interviewed 10 participants - 7 pet owners and 3 experts. To supplement this qualitative research, we also sent out a survey in the hopes of reaching a wider and more diverse range of pet owners. We received 32 responses

This research gave us a clearer picture of the steps that pet owners take when their pets go missing.

portfolio - flashlight icon.png
Pet owners first patrol the area where their pets were last seen
portfolio - people icon.png
They ask their neighbors + community members for help
portfolio - phone icon.png
Pet owners call animal shelters for guidance + to check if their pets have been found
portfolio - tablet icon.png
Pet owners post about their missing pets on social media

The good news? Pets are often recovered the same day they go missing. But did this insight mean that there actually wasn’t a problem to solve?

We dug back into our user research and took another pass at our affinity diagram. It helped to further break down our diagram into primary and secondary personas, which gave us clearer insight into the users we would be designing for, and the problem we needed to solve. 

Affinity diagram for primary persona

There was definite overlap regarding the goals and motivations of our primary and secondary personas, but there were also enough differences that we could confidently begin to focus on our main user. 

MEET EMILY

Our primary persona, Emily, is an animal lover who has a responsibility for her pets’ well-being and knows what it’s like when a pet goes missing, since her dog ran away last year. She's active in missing pet groups on social media, in case she’s able to help her friends and neighbors find their missing pets. 

Primary persona, Empathetic Emily
Paw Prints Primary Persona

With a better understanding of Emily’s experience, we were able to formulate a

problem statement:

As pet owners with a missing pet, users want to find their pet quickly to make sure that it isn’t in danger because they care about their pet’s wellbeing.

"

"

DESIGN PRINCIPLES

As we began to think about potential solutions for this problem, we wanted to create design principles that would guide our decision-making process. Throughout our ideation journey, these design principles ended up being our north star, and we often turned to them to make sure our designs were consistent and efficient and empathized with user needs. 

portfolio - heart icon.png
Empathy first
portfolio - productivity icon.png
Empower productivity
portfolio - people icon.png
Universal inclusivity
portfolio - star icon.png
Delightful interactivity

Step Two: Make

IDEATION

Now that we had defined our main problem, it was time to brainstorm ways to solve it. My ideas focused on helping users report missing and found pets, as this was our primary user’s main goals. 

Missing pet report form that can be turned into a printable flyer
Pet sighting report with location pop-up
Stolen pet report form that can be submitted to the local police department

After sketching individually, my teammate and I discussed our overlapping design concepts, keeping in mind our user's main goals, which are to have a way to report missing and found pets and to know what to do if her pet goes missing. In addition to providing a way for users to post about their missing pets, we narrowed our ideas down to the main features that we thought would help our users find missing pets. 

portfolio - search icon.png
Pet image scanner to help quickly fill out a lost pet report
portfolio - filter icon.png
Robust filter options to help narrow a pet owner's search for a missing pet
portfolio - resources icon.png
A list of resources to help pet owners know what to do when their pet goes missing

WHICH DEVICE?

Although market research suggested that desktop websites would be the optimal platform for our product, we realized that an app would have greater capability for the key features we wanted to design for our users. Unsure which device to design for, we asked users in a preference test to let us know which they would prefer.

portfolio - mobile icon.png

It turned out that if they had a missing pet, owners would want the flexibility of a mobile device so they could post about their pets while physically looking for them. We decided to design for an iOS mobile app. 

FORMATIVE TESTING

We used Figma to collaborate on our wireframes, creating low-fidelity versions of our app so we could test our ideas and iterate quickly. We conducted formative testing with 3 users and learned the following: 

portfolio - home icon.png
Users wanted to see found pets on the home screen
portfolio - resources icon.png
They have preferences for the order of filters
portfolio - phone icon.png
They want to review + confirm their contact info on the lost pet form
portfolio - tags icon.png
Clearer labels were necessary to help users navigate the app

MID-FIDELITY WIREFRAMES

We implemented these changes when we brought our low-fidelity wireframes into mid-fidelity. Here are the main iterations we made to some of our key screens: 

BEFORE

Paw Prints Home Screen Low-Fidelity

AFTER

Paw Prints Home Screen Mid-Fidelity
Paw Prints Home Screen Low-Fi to Mid-Fi Interactions

BEFORE

AFTER

Paw Prints Filters Screen Low-Fidelity
Paw Prints Filters Screen Mid-Fidelity

BEFORE

AFTER

Portfolio - Paw Prints Resources Low.png
Portfolio - Paw Prints Resources Low to

Step Three: Try

USABILITY TESTING

We decided to conduct usability testing to gauge the usability and desirability of our app. We tested with 5 participants,who were current or previous pet owners. Overall, our results were positive, but we still had some work to do: 

portfolio - tags icon.png
Label confusion caused delays in completing tasks
portfolio - search icon.png
Users attempted to use search feature
portfolio - phone icon.png
Users wanted to be able to add additional contact info to Lost Pet Form

We compiled our usability test results into a priority matrix to help determine which iterations we could make with our time constraints. We implemented our medium priority changes and also focused on iterating on the high priority changes that were high impact but lower effort.

 

If we had more timewe would also tackle the high and low priority changes that would require more effort. 

Iteration priority matrix

ITERATIONS TO HIGH-FIDELITY

My teammate and I wanted to bring our app to high-fidelity so that if we tested future iterations, our users would have a better context and understanding of our app. Based on our priority matrix, we incorporated the following iterations:

BEFORE

AFTER

BEFORE

AFTER

Paw Prints Contact Screen Mid-Fidelity

VISUAL DESIGN

For our mockups, my teammate and I each created mood boards and a style tile to gain a sense of our visual design aesthetic

We heard from users that having a missing pet is a scary and anxiety-inducing time. So, my style tile focused on giving pet owners a sense of comfort and trust by using blue as the primary color to express feelings of friendliness, calm, and hope

My style tile
My style tile

My teammate's stye tile used warmer colors to express optimism, warmth, and brightness. Torn between wanting to provide a sense of calm or a sense of optimism for our users, we conducted a visual preference test. ​

Users were split down the middle, so we decided to combine our visual styles and created a revised style tile that incorporated elements from each: blue to calm users; orange to provide optimism; yellow to bring additional warmth to our product. Many of our competitors used illustrations, so we also wanted to include this concept.

Final style tile
Paw Prints Final Style Tile

Below are the final mockups for our iOS app. To see how it all comes together, click on our interactive prototype! 

Home/Found Screen
Paw Prints Home/Found Screen
Filters Screen
Paw Prints Filters Screen
Found Pet Listing Screen
Paw Prints Found Pet Listing Screen
Create Report Screen
Paw Prints Create Report Screen
Report Lost Pet Screen 1
Paw Prints Report Lost Pet Screen 1
Pet Scanner Screen
Paw Prints Pet Scanner Screen
Report Lost Pet Screen 2
Paw Prints Report Lost Pet Screen 2
Report Lost Pet Screen 3
Paw Prints Report Lost Pet Screen 3
Confirmation Screen
Paw Prints Confirmation Screen
Resources Screen
Paw Prints Resources Screen

FINAL MOCKUPS

 
INTERACTIVE PROTOTYPE

LESSONS LEARNED

  1. Test early and test often. Our team used a range of qualitative and quantitative testing methods to understand our users’ wants and needs. This guided our design process and ensured that we always returned to our problem statement and target users. With each test, our confidence increased that we were building a product that would be intuitive, useful, and delightful for our users. 
     

  2. I really enjoy visual design! I was very involved in the visual design of this project, and I enjoyed thinking creatively with my teammate about our product name and logo. I also loved diving into the psychology of color and understanding how it can make users feel. I want to dedicate more of my time to exploring typography, colors, and UI elements and working on illustrations.

Huge shoutout to my teammate, Martha Magsombol, animator extraordinaire, who created the illustrations and animations for our project. 

Credits: 

Dripicons by Amit Jakhu

Feather Icons by Cole Bemis & Mauricio Quezada

Interested in learning more about my design process?

Check out another project.