UX CASE STUDY
There's No Place Like Home...For Your Pets
Objective: Losing a pet is a terrifying experience. My goal was to create an experience that will allow pet owners to locate lost pets faster and easier than traditional methods; also, provide a way for people who locate lost animals to find the animals’ owners, get help for stray animals, provide pet owners with a sense of community and store important pet information.
Hypotheses: I believe people who lose their pet and are unable to locate their pet quickly would use this app to elicit help from their surrounding communities. I also believe people who find animals (lost pet or stray) would use this app to help locate the pets’ owners or to alert local shelters or authorities about a stray.
Roles in Project: Brand Designer, UX Researcher, UX Designer, Information Architect, Visual Designer
Tools Used: Sketch, InVision, Adobe Illustrator, Adobe Photoshop, Google Docs, Paper, Pen, Optimal Workshop, SurveyHero
Quantitative Research: I set out on a mission to f ind out whether or not pet owners would be interested in using a mobile app to help them keep their pets safe and secure at home – where they belong. I put together a 38 question survey to help prove or disprove my hypotheses regarding missing pets and found animals. I solicited help from my Facebook friends and was very pleased with the survey results.
Key survey takeaways:
Survey Results: below is some key data from the quant survey. Click the button below to view the full survey results.
Qualitative Research: After reviewing the quantitative survey data, I narrowed my focus to six participants (f ive women, one man). All six agreed to let me interview them; I was able to drill down into some of the information they provided on the quant survey. My goal was to find a good mix of pet owners who had experience with lost pets, have found animals, live in either urban or suburban areas and have medium to high levels of mobile app use experience.
Key interview statistics and takeaways:
Competitive Research: In an ef fort to learn from the strengths and weaknesses of competitors in the pet space, I completed a heuristic analysis of three similar mobile apps: FindShadow, PawBoost and Zeppee.
PERSONAS & EMPATHY MAPS
Personas: In order to help understand the type of users I was designing this pet app for, I created two user personas based on my qualitative interviews with the six survey participants. I based the personas on observations I made while speaking with the participants.
Empathy Maps: In an ef fort to take my interview participants' thoughts and feelings into consideration during this process, I created the empathy maps below.
MVP & USER STORIES
MVP: I based my minimal viable product on the following four features I felt would prove or disprove my assumptions about my pet app:
User Stories: I broke out features for each section using the "As a user, I want to… so that I can…” agile user story methodology.
CARD SORT & SITE MAP
These tasks were very helpful in terms of diving deeper into my app content strategy and defining the information architecture of the app.
Card Sort: I chose four participants for this card sort activity who embodied characteristics of the user personas I created for the Dorothy pet app.
The participants did an excellent job of sorting the information I provided into categories that closely aligned with my initial app structure. Category suggestions from the participants included:
I had initially planned a site map based on the following categories:
After reviewing the participants’ suggestions and feedback, I decided to revise and condense my site map to the following categories:
Thanks to the card sorting activity, I was able to get critical feedback that allowed me to understand how real app users would process the Dorothy pet app features.
Site Map: I designed the basic architecture of the Dorothy App using Adobe Illustrator, based on what I believed to be the most critical features and content.
In an ef fort to truly understand the objectives Dorothy users would want to achieve, I created three user flows based on possible user scenarios, The user flows demonstrate step-by-step actions taken by each user to accomplish their end goal while using the app.
User 1: Kylie, a new user who lost her pet dog and needs help finding him.
User 2: Remi, an existing user who just adopted second dog and wants to create a profile for her. She is also looking for local community recommendations for pet grooming.
User 3: Chris, a new user who just adopted a dog and wants to create a profile for him. He is also looking for great vet recommendations and to connect with other local community dog enthusiasts.
SKETCHES & WIREFRAMES
Sketches: I really enjoyed working through the Dorothy App flow using good old fashioned pen and paper. The sketching process made me think about aspects of using the app that I hadn’t previously considered. I am presenting ten sketches, but actually went through around thirty index cards because I kept having to start over every time I thought of something new.
One example of an adjustment I made to my flow based on the sketching process:
Wireframes: I decided to kill two birds with one stone for the wireframing process by using Sketch app to create both the wireframes and the clickable prototype. I was able to create both simultaneously, which ended up being a huge help in figuring out the flow and elements needed on each screen. I was able to test my flow on the fly and make necessary additions or adjustments.
One example of an adjustment I made to my wireframes based on the prototyping process:
PROTOTYPE & USER TESTING
Dorothy Prototype: I decided to use Sketch app to create both the Dorothy App wireframes and clickable prototype. I was able to create both simultaneously, which was not only quite ef f icient but also helped me figure out the flow and elements needed on each screen. I was able to test my flow on the fly and make necessary additions or adjustments. I based all of my wireframes on my initial sketches and ending up finding issues with my initial thought process while building the prototype. I decided not to edit the sketches, as they serve as a great point of reference and reflect their true value in the process.
I chose Sketch because it is so powerful and easy to use. All of the assets used in the wireframes are vector based objects which were created within Sketch or imported from Adobe Illustrator. It was extremely easy for me to organize my artwork using pages/artboards, layers and groups. Each time you create a new artboard in Sketch, it creates a new page that contains folders, layers and groups within; this makes it incredibly easy to reuse elements for each screen. I’m very pleased with the prototype from both a quality and process standpoint.
While viewing and interacting with the prototype, please note the following flows:
User Testing: I performed usability testing on my Dorothy prototype in hopes of determining ease of use for the main app features:
Overall, I feel the usability sessions were very successful and helped me discover some serious flaws in my wireframes that I might not have caught otherwise.
Visual Identity: Inspired by The Wizard of Oz – specifically the ruby red slippers and the phrase ”There’s no place like home.”
Colors: A monochromatic color scheme creates a harmonious, simplistic experience.
Typography: SF Pro Display is sans serif, has high readability, is evenly kerned and of fers a wide variety of font weights and styles.