Hero.png

Paw Prints

How might we reunite missing pets with their owners?

Role: UX/UI Design, Research, and Visual Design

Team: 2 Product Designers


Platform: iOS Mobile App


Tools: Figma, Whimsical, Procreate, Miro, After Effects

Problem: Pet owners need to find their missing pets to quickly to make sure it is safe.

Solution: A mobile app to search and post about missing and stray animals.


Outcome: 100% usability success rate for all features on the app with users reporting all tasks are very easy to use.

Discovery

User Research
To understand what we were working with, my teammate and I had 3 days to talk to people. We spoke to 10 people in total, and 3 of them were experts. Given our small pool of interview participants, we sent out a survey to supplement our research.

Findings
This research revealed the following:

 

Telling others that your pet is missing is important for users.
- Social media
- Posters/Flyers
- Talking to neighbors

If pets are gone for a long time, chances of finding them are lower.
- Usually reunited within the same day.
- But 20% return to owner rate from shelters in 2017-2020.

Define

Synthesis
I created an affinity diagram with my team to look for big picture patterns that split into smaller subgroups, which I made into “I” statements that the designers could empathize with.

Affinity Diagram.jpg

Affinity Diagram

From here, we followed the trail of patterns up the birth of our persona. The persona was made to help us figure out how we could help our users achieve their goals.
 


Meet Emily
Emily is an animal lover and a mom to two furbabies, a dog named Henry and cat named Coco. Emily feels a great sense of responsibility for her pets’ welfare.

Primary Persona: Emily.png

Persona: Empathetic Emily

I went on a mission to truly understand who Emily is, and where she would have a hard time. I drew this storyboard to understand her feelings in the situation that her pet dog, Henry, goes missing.

Storyboard.png

Storyboard of when Emily's dog went missing

Now that I felt secondhand panic and worry for Emily, I worked with my teammate to define our 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.

Ideate

Brainstorming
Keeping our problem statement and Emily in mind, we diverged to brainstorm individually. Coming back together, the team discussed our ideas, and below are some of what we came up with. The ones in marked are the ideas we thought were the most helpful to our persona, Emily.

Below is the user flow we came up with after converging so that we may start thinking of how our user might try to achieve their goal with our app.

User Flow v01 Ideation

User Flow

 
Wireframe → Test → Iterate → Repeat

Low Fidelity
We scraped together a low fidelity prototype on Figma based on our brainstorm session and user flow so that we could collaborate remotely, test our early ideas, and make changes quickly.

We conducted a quick formative test to understand our users’ behaviors and how they would interact with our initial design. This test revealed the following:

Users wanted to see found pets on the home screen.

They want to confirm their contact info on the lost pet form.

They have preferences for the order of filters.

Clearer labels were necessary to help users navigate the app.

Iterations into Mid Fidelity
While bringing our Low Fidelity wires up to Mid Fidelity for usability testing, we implemented some iterations, which affected our user flow:

User Flow v02 Mid Fidelity Wires.png

User Flow Iterations

1. Users wanted to see Found pets first in case anybody posted about their missing pet already.
2. To lessen screens the user has to go through to for their goal.
3. Users wanted to make sure their contact information is updated.

Below are how some of the key screens changed from low to mid fidelity with these iterations:

 
Low-Mid_1.png

Iterations on Home Screen

Found on Home.

Users want to see Found pets as the Home Screen in case anyone posted about their pet yet.


Key iterations:
• Removing the search bar to emphasize CTA to report a lost or found pet.
• Added how many results are in the local area to give the user context before digging for too long.

Low-Mid_2.png

Iterations on Resources Screen

More with Less.
Removing selection screen lessens barrier to entry for users to seek resources.


Key iterations include:
• Removing the header text and providing context with body copy.

Low-Mid_3.png

Iterations on Filters Screen

Mixing it up.
The Filters Screen is important because it allows users to narrow their search.


Key Iterations include:
• Adding Sort by drop down to allow users the option to sort.
• Changing filter order based on users’ priorities.
• Varied interaction to lessen visual overload. selection screen lessens barrier to entry for users to seek resources.

Feedback, Feedback, Feedback
With iterations placed, we decided to conduct usability testing to make sure that our app speaks to our user flows with minimal pain points. Below are some key takeaways:

Unclear labels caused users to delay

Users attempted to use search feature

Contact info meant connectivity.

I worked with the team to create an affinity diagram of the results and recommendations, we proceeded to create a priority matrix to understand our next steps.

Iterations Priority Matrix

Given our time constraints, we made iterations that were low effort but medium to high priority to get the most out of our main user flow in regards to helping our users achieve their goal.

Iterations into High Fidelity
While making iterations, we brought our wireframes up to high fidelity based on this style tile that was finalized from a series of preference testing. I drew illustrations to add to our delightful aesthetic.

Style Tile.png

Style Tile

We did this to give more context to our app when showing it to users in the future. Below are the key iterations picked from our priority matrix:

Strip

Title
Body Copy.

To understand what we were working with, my teammate and I had 3 days to talk to people. We spoke to 10 people in total, and 3 of them were experts. Given our small pool of interview participants, we sent out a survey to supplement our research.

Label Clarity.

When needing to file a lost pet report, users would try to go to the “Lost” screen, not knowing that you would have the choice after tapping on the button.

Mid-Hi_1.png

Iterations on Home Screen

Progress Bar.

This goes back to the clear labels. We wanted to bring a familiar way for users to know where they are in the form, so we brought in a progress bar.

Connectivity.

Since sharing is key, we wanted the users to know that social media connectivity is possible, so we added that to the contact info form.

Additionally, we gave users the ability to add another contact in case they couldn’t be reached by someone who found their pet.

Mid-Hi_2.png

Iterations on Contact Info in Lost Pet Request Form

Polish

Microinteraction: Splash Screen
In my mission to inject delight and polish into Paw Prints to align with the design team’s principles, I worked on the splash screen for the app.


The logo was designed by combining a paw print icon with the search icon and I used this as inspiration for how I approached the splash screen animation.

Logo Ideation

Below is my process from concept to final:

Concept

Rough

Final

High Fidelity

Here's an overview of the high fidelity screens. I wrote about the fruition of how I determined the art direction and visual design of this project with my team in my blog post, if you'd like to read more about it.

Paw Prints Mockups

 
What I learned from this project is...

We can’t get more time in a day, but we sure can manage it!
We needed to set our deadline earlier than expected to accommodate a related client design sprint. The end-to-end process was a lot, and making sure to finish while keeping our work/life balance in check was important to the design team. Managing our time was crucial. Knowing how and when to prioritize deliverables and tasks allowed us to wrap the project up with a flourish!

Martha figuring it out with her team!

Teammate Testimonial

"Passionate, driven, collaborative, and talented are just a few words that come to mind when I think of Martha. I had the pleasure of working with her on several projects, and was lucky enough to be able to learn from her along the way. Martha approaches any project with curiosity and excitement, giving her all to provide high-quality work, and she encourages her teammates to do the same. She is a natural self-starter and takes the initiative to dig deep to truly make sure she understands user needs and business goals, especially when faced with ambiguity. She consistently goes above and beyond to add beautiful polish to her projects, ensuring that products are both useful and delightful for users. Always curious, she devotes her time to learning new skills, which she is happy to share with her colleagues and fellow designers. Any team/company would be lucky to have Martha, and I wholeheartedly recommend her!" 

Kristen Sunny

UX/UI Designer for Microsoft Leap

Big kudos to my UX teammate, Kristen Sunny, etiquette queen.
All illustrations and animation done by me.
This was a concept project.

Featured Work

Thought that was interesting? Check out my other featured projects.

Arrow Birth

Desktop Web

UX/UI, Research

Franck

Mobile Web

UX/UI, Strategy, Research

PetHarbor

Website Embed

UX/UI, Research

Say Hello

Wanna know more about my projects or work together? Let's chat about it!

Call me, beep me,

if you wanna reach me...

  • LinkedIn
  • Instagram

© 2020 Martha Magsombol