Meow-tor

A UX/UI DESIGN CASE STUDY

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

Service

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

Meowtor-graphic.png
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:

  1. have at least one cat

  2. have experience looking for a missing cat, or

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

Affinity Mapping

FULL Affinity Map (1) copy.jpg

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

 

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.

persona-pic.png

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

meowtor-journey-map_orig.png

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

 
12-4-capstone1-userflow-rev_orig-1.jpg

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.

sketch_orig.png

Iteration

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

  1. Eliminate the “Continue as guest” option

    --> limited access caused the users to give up on the application
     

  2. 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-missing-cat_orig.png

To Report A Found Cat

report-a-found-cat_orig.png

Iteration

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

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

Sketches

 

UI Design / Styleguide

Moodboard

practice-19-3-moodboard_orig.jpg

Logo

logo-1.png

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.

 

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.

Hi-Fidelity UI Design & 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. I’m hoping to reach out to social networking platform such as “Nextdoor” to include Meow-tor as a feature to help pet owners.