PetPal
An iOS app that simplifies pet healthcare.
The Problem
Pet owners have been increasingly slacking on preventive healthcare. Cats and dogs are attending fewer annual physical exams and are less likely to receive preventive medications for disease-carrying fleas, ticks, and heartworms. And, not surprisingly, the number of emergency vet visits is increasing.
I decided to design a product with the goal of increasing pet owner compliance with veterinarian-recommended preventive healthcare measures.
At a Glance
My role
This was a solo project. I received mentorship from a senior UX designer.
Tools
Figma, Miro, Pop! by Marvel, Google Suite
Timeframe
PetPal was completed over four months, from January 15 - May 25, 2023.
Deliverables
Competitor Analysis, User Interviews, Secondary Research, Empathy Map, Affinity Map, Research Synthesis Report, User Stories, Site Map, How Might We Questions, User Flows, Sketches, Paper Prototype, Wireframes, Wireflows, Low-Fidelity Prototype, Style Guide, High-Fidelity Mockups, High-Fidelity Prototype, Usability Testing (three rounds)
Primary Research
User Interviews
I distributed a screener survey to identify potential interview candidates who were mobile-app savvy, the primary caretakers of a cat or dog, and self-reportedly struggled to manage their pet(s) preventive healthcare. After receiving over 300 survey responses, I interviewed five ideal candidates with the goal of understanding the root causes of their difficulties.
Affinity Mapping
After taking detailed notes during each interview, I transferred major points onto sticky notes and categorized them using the affinity mapping process, pictured here.
Research Findings
1) High Cost of Veterinary Services
Veterinary care is perceived as too expensive and is unaffordable for many. Due to this high cost, there is widespread disillusionment with the veterinary industry and distrust of veterinarians.
“I’m scared to go to the vet because I never know how much the bill will be.”
“I think vets are money grabby.”
2) Lack of Knowledge
People are uneducated about the topic and therefore do not realize its importance.
“I’ve been told different things by different vets, so I don’t know what to believe.
“I didn’t how heartworm disease was spread! I can’t believe my vet never told me.”
3) Feeling Overwhelmed
People find managing pets’ healthcare to be complicated and stressful.
“I need to know the top 3 most important things I should be doing for my pet.”
“I want a firm action plan to follow.”
4) Disorganization
People are forgetful and lack a strong organizational system.
“The mail reminders the vet sends are completely ineffective. I would prefer electronic reminders.”
“I need one place I can record details about my pet so I don’t lose track of important information.”
5) Inconvenience
People find managing their pet’s healthcare to be tedious and time-consuming.
“It is always a hassle to go to the vet since they are always either already booked up or only have openings during the work day.”
“Having to remember to give my dogs medicine on the same day every month is so inconvenient.”
The Goals
I used my research findings to create an empathy map of the target user’s attitudes and behaviors. Then, I was able to identify the following goals for PetPal:
Ideation
How Might We…
make pet healthcare more straightforward and easier to manage?
provide an organizational system for pet owners?
make pet healthcare more convenient?
make pet healthcare more affordable?
educate pet owners about pet healthcare?
Someone wrote on a screener survey that they had recently purchased an annual healthcare package from their vet designed to provide their new puppy with all the care it needed. She said it was a lifesaver.
I realized that predefined healthcare plans could: 1) decrease cost, 2) increase convenience, and 3) simplify by providing a clear path to follow. To address all the identified pain points, I decided to combine healthcare plans with organizational features and educational videos.
The Spark
The Solution
PetPal is an all-encompassing healthcare management platform that increases the convenience, simplicity, and affordability of providing veterinary care. Users can:
Learn about pet healthcare from videos.
Choose from 3 health plans.
Write notes.
Track health plan completion.
Track their pet’s weight.
Create reminders.
Find local veterinarians.
Schedule vet appointments.
Watch the “Find a Provider” Flow:
Watch the “Buy a Care Plan” Flow:
Site Map and Navigation
I created this site map before beginning the design process.
Then, I determined that PetPal would use a bottom tab bar with five icons that provide clear entry points for each red route.
Organizing Ideas Within Time Constraints
User Stories
To keep focused on the core experience, I wrote user stories and ranked them in order of importance from 1-3. After coming up with 23 user stories, I ranked 16 of them as first priority, meaning I would include them in the MVP.
First Priority (16)
Second and Third Priority (7)
User Flows
I developed six red routes that would allow users to complete the most critical tasks.
Creating an account and a pet profile (first-time user experience)
Create and edit a pet profile
Find a provider — see graphic
Buy a care plan — see graphic
Create a reminder
Request an appointment
Sketching
When it came time to start designing, I began by sketching out the red routes. After redoing the sketches three times, I finally believed my design was strong enough to create a paper prototype.
Usability Testing: Round 1
I used the program POP! by Marvel to turn my sketches into a prototype and conducted the first round of usability testing. This round was designed to find early usability issues within the information architecture.
I found five app-savvy pet owners and gave them tasks to test the app’s navigation and red routes. I received feedback that certain icons were misleading but there were no issues with the navigational structure.
Testing the Initial Sketch Prototype
Wireframes
After incorporating the feedback from the first round of testing into my designs, I used Figma to convert my sketches into grayscale digital wireframes.
This graphic depicts the screen-by-screen transformation of the Care Plan red route sketches into digital wireframes.
Designing the User Interface
I began the user interface design process by defining the brand’s personality attributes, which I then channeled into a mood board of the app’s overall “vibe.” This mood board was used to inspire the style guide and high-fidelity mockups.
The Brand’s Personality Attribues
Empowering, confidence-boosting, intelligent, informative, helpful, reliable, trustworthy
Style Guide
Mood Board
High-Fidelity Mockups
I used my mood board and style guide to transform my wireframes into high-fidelity mockups. The graphic below depicts the transformation of the Care Plan flow from grayscale wireframes to high-fidelity.
Orange is used for the primary CTA buttons, and blue is used for secondary buttons and other interactive elements such as icons. I chose orange since it is a cheerful, motivating, and eye-catching color, and decided on blue as my accent color because it contrasts well with orange and is also bright and attention-grabbing. I wanted the user’s gaze to first go to the orange elements and then travel to the blue elements.
Usability Testing: Rounds 2 and 3
I completed two additional rounds of moderated usability testing after the initial round of testing using my sketches. I used my low-fidelity wireframe prototype for Round 2 and my high-fidelity prototype for Round 3. For each round, I recruited five cat/dog owners and asked them to complete the same tasks. Some of the tests were conducted in person and some over Zoom.
Below, I have outlined some of the issues brought to my attention during testing and the solutions I implemented to resolve these issues.
First-time User Experience: The Home Screen
Problem:
Users struggled with the first-time user experience. They found the blank state home screen ineffective and felt lost when they opened the app. There was untapped potential to educate users on pet healthcare and guide them to the red routes.
My Solution:
I utilized cards containing directions and CTA buttons on the blank state home screen. The cards will remain on the partial state home screen until the CTAs have been completed.
I used a clear visual hierarchy that helps users decide which actions to take next.
I added an educational video on pet healthcare that will stay on the home dashboard until the user removes it.
Exploring Plans
Problem:
Users wanted to explore the care plans before creating a pet profile or selecting a provider.
My Solution:
Since plan pricing varies based on the provider and species, accurate plan pricing cannot be shown until after the user creates a pet profile and selects a provider. However, to allow first-time users to explore the health plans, I developed a blank state Plan Screen that requires the user to select which species’ plans they want to view (see arrow 1).
Although the blank state Plan Screen cannot include actual prices, I added a price range (see arrows 2 and 3), as well as directions guiding users to create a pet profile and select a provider (see arrow 4) in order to see accurate pricing and purchase a plan.
Editing a Pet Profile
Problem:
Users could not figure out how to edit pet profiles.
I received feedback that the meaning of the edit icon was unclear. Some users tried to delete a profile by clicking the pet’s photo.
My Solution:
First Solution: I removed the edit icon and instead made the edit screen accessible by clicking on the pet’s main photo. However, this solution proved to be unsuccessful.
Final Solution: I brought back the edit icon, but changed the edit icon to a pencil.
Searching for a Provider
Problem:
Users thought having to select “cat” or “dog” to see pricing was cumbersome and did not understand why it was necessary. However, species selection is necessary to see accurate pricing.
My Solution:
I added a pet selection bar to the blank state Provider Screen and an “Add Provider” link on the partial state Profile Screen. This allows the app to know which pet the user is searching for without the user needing to take any extra steps.
Pet Selection Memory
Problem:
Users found it annoying to have to repeatedly select the pet when using the tab bar to switch between primary screens. For example, when the user was on Lucy’s Provider Screen and then navigated to the Plan Screen using the tab bar, the user was expecting Lucy to be preselected.
My Solution:
I add the ability for the app to remember the previous pet selection instead of automatically selecting the first pet.
The Top Two Design Challenges
Veterinary pricing cannot be standardized — it varies depending on the provider, geographic location, and species.
To see accurate plan pricing and purchase a plan, the user needs to create a pet profile, choose a provider, and then choose a care plan — in that order. For this reason, the flows need to seamlessly guide users from one red route to the next. I added links/buttons at the end of flows suggesting the user’s next action (see arrow 3 below.)
Users with multiple pets need a simple way to specify which pet they are focusing on.
I used a pet selection bar on every main screen (see arrows 2 and 4 below) and also created additional entry points to the “Find a Provider” and “Choose a Care Plan” flows by adding links to “Add Provider” and “Add Plan” on the partial state Profile Screen (See arrow 1 below.)
Lessons Learned
Users are all different, so the best you can do is design for the majority.
You can strive for perfection and come close to it, but complete perfection is unattainable because all users are different. You can’t please everyone, so go with what makes the most sense for the majority.
There is no substitute for usability testing. It is important to conduct as many rounds as possible.
Each round of testing led to important insights, and each iteration was more effective and efficient than the one before. I imagine the app would continue to improve if I were to continue testing and iterating.
Next Steps
Knowing that the main function of the app is usable, this is what I would do next:
Allow users to live chat/speak on the phone with veterinary professionals who can offer advice on choosing a healthcare plan
Allow users to cancel/reschedule vet appointments
Allow users to set up auto-ship for medications
Defer account creation until the creation of a pet profile
Add a pet selection bar to the blank state home screen
Create a Notes Screen and separate, searchable note entries
Improve the UI and add some more personality
If I were to redesign this app, there are a few things I would change:
Potential Changes
Flow Recordings
Here are recordings of the app’s primary flows, in case you would like to check them out!
Create Account, Make a Pet Profile, Explore Plans
Create and Delete a Pet Profile
Find a Provider
Buy a Care Plan
Create a Reminder
Complete and Delete a Reminder
Write a Note
Update Pet’s Weight
Request a Vet Appointment