Meow-tor

A UX/UI DESIGN CASE STUDY

of a networking mobile application that offers support to all cat owners.

Role

UI/UX Design

Project

Meow-tor

Year

DEC 2020 - MARCH 2021

Context

Background

Inspired by my personal experience...

I lost my cat, Ash, a few years ago and I couldn’t find the most effective way to find him. He was microchipped and registered, however, these DID NOT really help in the situation. I searched through the internet to learn what to do. Yet, there were way too many websites to go through, and my friends and I were following random instructions we saw and hoping to find Ash soon.

With a situation like this, it was hard to think rationally with unstable emotions. Especially, if it is the first time someone encounters this kind of problem.

In this project, I’m hoping to be able to provide a helpful solution for all pet owners. (And, I decided to focus on cat owners first and expand to other categories later.)

My role

Research
Interview
Ideation
User flows
Wireframing
High-Fidelity UI design
Prototyping
Usability testing

Tool

Sketch
InVision

Goal

To identify potential users and find solutions to reduce hazards and increase chances to find missing pets.
How might we provide helpful resources to help cat owners reunite with their missing cats quicker?

Process

Through research, user interviews, prototyping and usability testing, I intended to:

Understand the usage context and users' needs;
Discover what works well and bad with other existing websites and applications.

Research

User Interviews

Through user survey, and interviews, my goal was to identify potential users and understand their behaviors when cat owners are on the mission to search for their missing cats, and to define the kind of help that they actually need.

Recruiting Participants:

Screener survey was sent out via social media platforms such as Facebook, Instagram and Twitter, and participants who met the following characteristics were invited for an in-depth interview:

have at least one cat
have experience looking for a missing cat, or
have experience helping others to find a missing cat

Interviewing Users:

Five participants were selected after the first round of screener survey. Since the participants were recruited through online platforms, they are located in different countries (USA, Canada, and UK). Some of them have moved after the cats went missing.

After these 30-minute sessions of learning about different experiences to find the missing cats, I was able to gather some information and identify the pain points from the cat owners' experiences, and organzie them by affinity mapping.

Research

Persona

After conducting the five user interviews via Google Meet and understanding their needs and pain points using affinity map and empathy map, I created a persona moving forward to designing the product.

Affinity Mapping

The major issues of all 5 participants are:

taking immediate actions (blindly looking around the neighborhood), without knowing how and where
having large amount of information to process while using search engine and social media for advice and tips
speaking with neighbors and staying in touch (posting posters)
reaching out to local organizations

Looking for a missing cat requires a lot of immediate actions and tricks, especially for anyone who experiences this kind of situation for the first time. Most cat owners would be emotionally drained after a period of time looking for their beloved cats. Therefore Meow-tor has to be a smart and calming app that offers support and guidance for these cat owners.

7 Categories

Immediate actions
Social media
Neighbors
Local organizations
Stay in touch with others
Emotions
Prevention products

SARAH, 22

Vancouver, Canada

Sarah is a fresh college graduate. She finds out her cat, Ginger, is missing after hosting a house party. Ginger is her first cat, and it is the first time that Sarah has been in this kind of situation. Sarah just moved into the apartment complex and doesn't know a lot of people around the area. Some of her friends are offering to help, but they do not know what is best to do, so they end up Googling: “how to find a missing cat”

Goal

Locate and reunite with the missing cat as soon as possible

Needs

Someone/information to guide her what to do
Resources that are available for her to reach out at a late hour

Frustrations

Cat missing very late at night
Too much information to sort through on internet

Ideation

User Journey

1. Report a missing/found cat
In most of the situations, “time” is the most critical element to finding the missing cat. It is important that the users are able to spread the message easily and ASAP to the right group of audience, while being out there physically searching for the cat.

2. Recommended action list
There could be a lot of information to go through on the internet about cat behaviors or what the cat owner should do to increase the chance to find the missing cat. An action list that is rated by real users, or recommended the most by experts can be a quick solution for the user to decide what to do without spending too much time to read all the information.

3. Community
During the process of searching for a missing cat, the owner might go through a lot of emotions. Being able to reach out to a group of people who had experienced the same situation, and learning some successful stories and tips from them can also emotionally comfort the cat owners.

Workflows

A key of the Meow-tor workflow is how to navigate the users to quickly spread the message in the area and continue to take immediate actions to physically search for the missing cat. In another case, if someone finds a cat on the street, to navigate the user to let others know and help the cat gets home ASAP.

User flow I : To Report A Missing Cat

Scenario 1: first time user trying to get help searching for his/her missing cat
Scenario 2: return user trying to get help searching for the missing cat

Note: Users are given the option to login/ register using social media account. They will be redirected to the social media page for authentication.

User flow II : To Report A Found Cat
Someone spotted a cat on the street that needed help:

Scenario 1: first time user reporting a found cat
Scenario 2: first time user trying to find local resource to help the cat
Scenario 3: return user reporting a found cat

Note: Users are given the option to login/ register using social media account. They will be redirected to the social media page for authentication.

User flow III : To Read/Share Helpful Info

Scenario 1: user accessing a recommended action list and follow the action guideline
Scenario 2: user share tips and their experiences with others

Ideation

Sketches

Sketches of the main screens was created based on the user flows shown above. These sketches was used to conduct a guerrilla usability test with five participants remotely using inVision.

Iteration

Based on the findings of a guerrilla usability testing with the sketches, TWO major iterations was made:

Eliminate the “Continue as guest” option 
--> limited access caused the users to give up on the application
Login with Google/Facebook account 
--> for a quicker sign up/sign in process

Wireframes

Below are the wireframes created with Sketch for the second round of usability testing.

To Report A Missing Cat

To Report A Found Cat

Iteration

A second round of usability testing was conducted with the wireframes. ONE major iteration was made based on the findings:

Divide reporting pages into different steps - Info entry pages are too long, and it’s hard to scroll up and down to review the information

Wireframes

UI Design / Styleguide

Moodboard

Logo

Brand Colors

The brand colors are inspired by pictures of cat wandering on the street and a picture of an owner holding her cat in a warm tone. The warmer tone gives a sense of care and support.

Fonts

Meow-tor was designed to be a mobile/handheld application for iOS, therefore I decided to use San Francsicso Pro as the primary text font.

lcons

Rounded lines and organic shape shading would add a sense of love. The orange color represents supports that the platform offers.

UI Elements

UI element are designed in rounded corners to emphazie the brand’s personality, loving, caring, & connected.

Style

Hi-Fidelity UI Design & Prototype

Based on the results from the usability test, some major iterations have been made.

In this version, the reporting pages was divided into different steps to provide a smoother experience for the users to review any information that they entered before pressing the submit button.

Usability Testing

A third round of usability testing was done with five participants remotely with inVision. 2 of the participants took part in the initial user interviews and had a basic understanding of the application.

At this final round of usability testing, all participants were able to complete the tasks smoothly, while some minor improvements could be made, here’s a clickable prototype of the final version.

Clickable Prototype

This clickable prototype is created with Sketch and synced to inVision using the Craft plugin.

Prototype

MEOW-TOW

A mobile application that offers 24/7 supports to all cat lovers, and helps prepare for the worst situation.

It is a platform & community that is:

EDUCATIONAL - gives you guidelines to solve your problems
CARING - truly cares about all cat owners’ needs and takes an extra step to help
SUPPORTIVE - gathers everyone with the same interests to help & support each other

Conclusion

At an emergency situation of searching for a missing cat, there would be a lot of emotions and stress. The purpose of this design is to provide a smoother experience that would increase the chance of finding the missing cat. Understanding the pain points of the users, allowed the design to be effective and calming at the same time.

What's next?

With the current design, a few more sessions of usability testing will be run, and the design will be further iterated.