Puppo

Personality Dog Adoption Search For Mobile Experience

Overview

Puppo is a concept mobile app experience designed for prospective dog owners to search and match with local adoptable dogs based on temperament and personality traits. The goal of this project was to solve the critical pain points encountered during the dog adoption journey.
A sad dog in a dog shelter.
Many dogs available in the dog shelter.

The Problem

In the United States, approximately 3.2 million dogs enter animal shelters each year. It can be overwhelming to search and discover local adoptable dogs online because there are too many dogs to choose from. It is difficult to determine through an online search if a dog’s temperament or personality is the right fit. Fortunately, 1.6 million dogs are adopted each year. However, about 10% of adopted dogs are returned to the shelter.

Solution

To showcase the MVP, I created a high-fidelity digital prototype and designed a complete UI kit with a style guide with Figma, so that I may efficiently scale the project with additional features or share with future collaborators.
PUPPO PROTotYPE
puppo Style Guide

My Role

I initiated and contributed to the Puppo project as a one-person design team from the summer through the winter of 2020. The primary design tool I used was Figma, In which I used to create a high-fidelity prototype and visual design assets.

Duration: June - November 2020 (4 months)

Role

  • User Research
  • Usability Test
  • Visual & UI Design
  • Illustration
  • Logo Design

Technology

  • Adobe Illustrator (UI Icon and Illustration)
  • Figma (Prototype and High Fidelity Mock-ups)

Research Methodology

Interviews

I began my user research by collecting qualitative data to understand the problem. I screened, recruited, and interviewed 5 participants between the ages of 21-65 years old that had recently adopted a dog through a shelter or a rescue to gather qualitative data.
Maria
"The challenge was that all the small breeds got adopted quick"
Sasha
"I want another dog but wasn't informed about behavior issues"
Melody
"A lot of the vet papers were vague and there was lots of miscommunication"
Tammy
"Most dog rescues want a submitted application before a meet and greet"
Jay
"I fell in love with my dog instantly but she was the second one I met"

Top Research Insights

I created an affinity map to visually identify and group patterns that I learned from the participants. I distilled these patterns to define my top research insights that were essential to discover before the ideation phase of the project.
  • Prospective dog owners need an accurate and detailed dog description about the history, medical information, size, breed, and temperament of the dog.
  • Meet and greets are important to determine if the dog is the right fit.
  • Consistent caretaker communication is important for the dog adoption process.

Personas

Based on my qualitative data research, I’ve determined that there are two types of users: The primary user is Amy, she is the user that is looking to adopt a dog. And the secondary user is Chantal, she is very similar to Amy, but she is the dog caretaker or shelter representative facilitating the dog adoption process. A couple of things they both have in common are their knowledge about taking care of dogs and being conscious about adopting shelter dogs.

Amy Jones

The Confident Pet Owner

“ It was hard to find the right dog in the shelters. So a friend of mines recommended me to search online in facebook groups. ”

Demographics

Gender: Female
Age: 30
Location: Florida
Work: Executive Assistant
Household: Single

Summary

Meet Amy Jones, she is the primary user and she is looking to adopt a dog. Amy Jones is a confident pet owner with previous experience owning a dog. She's a young professional in her 30’s, with an active lifestyle, and is conscious about choosing to adopt, rather than to shop for a dog. It's important to her to find a dog with the right temperament because she already owns a cat and her young niece and nephew often come visit her home regularly. She is interested in knowing the breed, dog history, and meeting the dog before she decides to adopt.

Adoption Goals

Calm temperament
Small dog for apartment
Kid-friendly
Cat-friendly
Allergy-Free

Frustrations

No meet & greets available
Lengthy adoption process
Lack of communication
Lack of personality bio
Incorrect medical history

Chantal Lopez

The Responsible Caretaker

“ It can be difficult to schedule a meet & greet without calendar tools. I use various appointment creation tools to help me.”

Demographics

Gender: Female
Age: 50
Location: Florida
Work: Humane Society Volunteer
Household: Married, family of 5

Summary

Meet Chantal Lopez, she is the secondary user and she is very similar to Amy but she is the dog caretaker or shelter representative facilitating the dog adoption process. Chantal Lopez is a responsible caretaker with experience fostering disabled dogs. She’s retired in her 50’s but she spends her time with her family and volunteering at the Humane Society. She has experience in assessing a dog's temperament and is knowledgeable about basic dog training. She understands the importance of communicating with prospective dog owners and makes herself available for meet and greets.

Caretaker Goals

Basic house training
Rehab disabled dogs
Assessing a dog history
Being available
Communication

Frustrations

Lengthy adoption process
Disorganized Scheduling
Lack of appointment creation
Lost submitted paperwork

Narrowing Down The Problem

I brainstormed ideas to come up with possible solutions to the problem by creating “How Might We? Statements”. A couple of “How Might We? Statements” that stood out were:
How might we help prospective dog owners find the best temperament dog he or she is looking for?
  • Adding a temperament personality test to filter and recommend adoptable dogs based on specific temperament characteristics.
How might we inform prospective dog owners about specific information about adoptable dogs such as medical history, breed, and dog temperament?
  • Require an in-depth dog profile with pictures or videos, medical history, breed, and characteristics for each adoptable dog.

User Stories

I created user stories to help me discover the critical and frequent paths that users take to complete the task of adopting a dog. These are the top three red route paths that I’ve determined to be the focus for the Puppo minimal viable product.
  • Post a Dog Listing
  • Search for Local Adoptable Dogs
  • Adopt a Dog

Iterative Design Process

After I determined the red routes, I began sketching all my ideas on paper and then I digitized my sketches on Figma to create a low-fidelity wireframe prototype. I drafted a usability test plan to help me define the test objective, methodology and organize a test schedule. I outlined a usability test script, to make sure all the red route tasks were covered and to allow the participants to explore the prototype without influence.
I planned for 3 usability test phases and recruited 15 participants to user test 5 participants for each phase. For each phase, I created a detailed test report to help me stay organized and prioritize the usability issues and insights. In an iterative approach, I updated the design of the prototype to improve the usability issues after each phase. In the end, I created a high-fidelity prototype that evolved through several design iterations.

Usability Issue #1

The “Search” button within the “Filter” screen is difficult to find.

Summary

It was not clear to all participants to scroll to the bottom of the “Filter” screen to find the “Search” button. A participant believed that the wording for “Search” instead of “Submit” was misleading because the button suggested it would redirect users to the “Search” screen.

Recommendations

  • Make the “Search” and “Clear All” persistently fixed to the bottom of the “Filter” screen, not scrollable.
  • Change the word “Search” to another such as “Find Dogs”.

Usability Issue #2

“Filter” and “Match” buttons were difficult to find.

Summary

Although these two buttons are persistently fixed to the bottom of the search feed screen, three out of five participants struggled to find the “Filter” and “Match” buttons because these two buttons do not have enough hierarchy in front of the dog profile cards.

Recommendations

  • Replace buttons to be color filled buttons instead of outlines or white buttons.
  • Fix buttons to the bottom navigation within a white background to increase hierarchy.

Usability Issue #3

The “Submit Application” button was difficult to find.

Summary

Two participants decided to directly “Contact the Caretaker” to adopt a dog and three participants submitted the dog application. It was not easy to find in the dog profile because both “Contact Caretaker” and “Submit Application” are in the same hierarchy. Also the wording “Submit Application” is maybe too vague.

Recommendations

  • Increase the hierarchy to the “Submit Application” Button.
  • Change the wording of Submit Application to “Adopt <Dog Name>”.

Post a Dog Listing

Post a dog userflow.

Persona

Chantal Lopez

Scenario

“Chantal is fostering a dog named Chewy and she wants to find a good home for her. She wants to post a dog listing.”

Steps

  • Chantal login and lands on the “Home” screen.
  • Chantal opens the side navigation and finds the “Post a Dog Listing” button.
  • Chantal is directed to the “Post a Dog Listing” form, where she can upload pictures and fill out the information about Chewy.
  • Chantal completes the “Post a Dog Listing” form and reviews the information.
  • Chantal selects the “Post a Listing” button and receives a pop-up modal to let her know that Chewy’s dog listing is now live and public. She is then redirected to the “Home” screen.
Post a Listing Form
Add Photo Gallery
Post a Listing Form with Photo
Review Dog Listing

Search for Local Adoptable Dogs

Persona

Amy Jones

Scenario

“Amy wants to sign up and search for local dogs near her. She wishes to find a dog that is already potty trained and that is great with kids.”

Steps

  • Amy wants to “Sign Up” and search for local adoptable dogs. 
  • Amy lands on the “Home” screen, then selects the “Browse” button from the bottom main navigation.
  • Amy inputs her city location in the search input field.
  • Amy receives a dog feed of local adoptable dogs, but she wants to “Filter” her results to find a dog that is already potty trained.
  • Amy receives a dog feed of local adoptable dogs that are potty trained, but she also wants to “Match” with a kid-friendly dog.
Search
Local Dog Feed
Find Dog Filter
Dog Personality Match Filter

Adopt a Dog

Adopt a dog userflow.

Persona

Amy Jones

Scenario

“Amy found the dog she is looking for and wants to adopt Chewy. She contacts the caretaker and submits a dog application”

Steps

  • Amy selects Chewy’s dog profile from her search results feed, she learns about Chewy’s history and details.
  • Amy decides to reach out to Chewy’s caretaker to ask questions, she finds the “Contact Caretaker” button at the bottom of Chewy’s profile.
  • Amy submits a message to Chantal, Chewy’s caretaker, and engages in conversation.
  • Amy decides to adopt Chewy, she finds the “Adopt Chewy” button at the bottom of Chewy’s profile.
  • Amy fills out and submits Chewy’s dog application, she receives a pop-up modal letting her know her application was received.
Find Dog Filter
Dog Application Form
All Dog Applications

Bridging Brand and Visual Design

I believe a harmonized connection between brand and visual design is an important approach to elevate the product design with a consistent and thoughtful design language. I conceptualize the Puppo brand, logo, illustration, and visual design by creating an inspirational mood board that synthesizes the ideas of cheerful, whimsical, honest, and friendly.

Visual Design

The Puppo user interface is designed to be bright and playful with a light theme and vibrant color palette of pastels, yellow, teal, blurples accents. The UI components and iconography are minimal and modern with a style of exaggerated thick outlines, geometric shapes, and rounded corners.

Photography

Stock Images were curated from Shutterstock, to set a whimsical and playful tone for the user interface photography.

What I Learned

I initiated the Puppo project to sharpen my product design skills. I chose this specific problem to solve because I am an animal lover and I also believe in the value of design for social causes. I accomplished what I wanted to achieve from the project and here are a couple of highlights of what I learned:

Remote User Interviews

Due to the Covid-19 pandemic social distancing constraint, there was a constraint to only conduct my participant interviews online. I expected online interviews to be a little awkward and uncomfortable, but it turned out to be a great experience because I was able to clearly understand his or her story, effectively ask questions, and empathize with my participants. I used tools like Calendly and Google Meeting to overcome the challenges of conducting remote interviews and I have gained valuable experience that I plan to use for all my future case studies.

Usability Testings

The insights that I learned from the fifteen usability test participants were integral to my design iterations. I expected there to be usability issues, but I was surprised at the number of issues discovered. It's always a humbling experience to witness all the usability issues and identify all the design flaws during a usability test. I am happy to have sharpened the valuable skills of creating a usability test plan, writing a usability test script, and conducting usability tests. 

Conclusion

The next steps for the Puppo project are to iterate, user test, and update the chat and meet & greet features.  Although these two features were not red routes, it is beneficial for the user to further determine if a dog is the right fit. In the future, I plan to code a live Puppo prototype for the iPhone and expand the experience for a web application.