Project Overview
WellPet
View Prototype
The Product
My Role
UX research
Branding
UX/UI design
Testing
Duration
6 weeks
The Process
Discovery
Ideation
Design
Testing
Prototype
Next Steps
Discovery
Research Plan
Research Hypothesis
Pet owners need a centralized comprehensive solution to help them organize and plan pet care.
Research Goal
Determine the aspects of pet care planning that pet owners find difficult so we can understand what service offerings will be most helpful to them.
Research Methods
Competitor Analysis
User Interviews
Research Implementation
01 Competitor Analysis
I performed a SWOT analysis of three potential competitors. All competitors offered aspects of care planning that pet owners would find useful; however, there were no comprehensive care planning tools that would encompass all aspects of care.
Target Market
Pet owners looking to purchase products
Pet owners looking for pet care info
Veterinarians, vet clinics, pet owners
Strengths
Established brand
Helpful blog
Online vet help
Product reviews
Free first pet consult
Clean friendly UI
Credible vet-reviewed content
Free non-emergency 24/7 vet help
Vet chat
In-app appointment booking, payment
Healthcare plan feature
Weaknesses
Poor navigation
Poor navigation
No care pricing transparency
Vet care planning only, no other care
02 User Interviews
I used affinity mapping to organize the information interview participants shared with me. It revealed pain points in the budgeting space. Users also asked for reminder features so they could better manage vet appointments and preventative care.
Research Takeaways
Pet owners:
want access to low cost emergency vet help when their pets are unwell
struggle to budget for vet care as there is little cost transparency
don’t have a tool for budgeting for recurring pet-related expenses
often have no complete preventative routine in place
have difficulty remembering to give preventatives on time
struggle to find a vet that fits their budget expectations
User Personas
I created two personas to represent my users’ unique challenges in the pet care space. These personas helped me stay connected to the end user throughout the design process.
Ideation
Problem Definition
Due to time constraints it was important to identify the most essential features of the web experience. I used tools like POVs and HMWs, prioritization matrix and task flows to zero in on the users’ needs.
POV & HMW’s
Point of view (POV) statements and How Might We? (HMW) questions helped me identify my users’ most important needs so I could begin to address them directly.
POV Statement
I would like to explore ways to help budget-conscious pet owners build a financial plan for their pets’ care because there is no transparency in vet care costs.
How Might We...
Best serve pet owners who feel stressed and overwhelmed by the lack of cost transparency in vet care?
Help pet owners eliminate feelings of guilt over lack of financial planning by providing them with budgeting tools?
Help pet owners feel confident that they are providing the best care for their pets?
Defining the MVP
Due to time constraints, I found I would not be able to complete every feature that the web experience would offer. I proceeded to prioritize features to focus on key experiences for the high fidelity wireframes, prototypes, and testing. I used a value matrix to prioritize features, and then proceeded to map out key task flows. I then built a sitemap for the whole website to organize the navigation and envision what the experience would look like as a whole.
Feature Prioritization
I listed out potential features and prioritized them using the value matrix. I used the results to inform my decision to move forward with account creation and budgeting experiences. Based on my research, I felt reminders and vaccine info features were lower priority as there were other tools on the market that could help pet owners in those areas.
Task Flows
I put together three task flows for features the users were likely to encounter when budgeting. These features included pet profile creation, procedure cost estimation, and pet care budget creation.
Information architecture
To study mental models used to categorize items, I set up a card sort with seven participants through Optimal Workshop. Five clear categories emerged from the exercise . I then created the below sitemap using participants’ groupings to organize features on the website into five navigation items.
Design
Design System
To keep a consistent look and feel throughout the project, I needed a design system. Using a clear design system not only made wireframing smoother but also ensured a uniform and user-friendly experience for the users.
Brand Guide
Brand Values
I started the branding process by brainstorming and defining the brand values to use as a guide for aesthetic decisions.
Honest
Joyful
Inclusive
Sustainable
Color Palette and Typography
I chose bright blue for the primary color to evoke friendliness and loyalty. I supplemented it with green and purple to keep the palette playful and fun. For the background I chose an off-white paper-like color to compliment the hand-drawn illustrations I had chosen.
For the fonts I chose Poppins and Inter. Both are highly accessible, clean fonts that would not overwhelm the user when combined with the colorful palette.
Primary
30BDF4
Secondary
A7D455
C731D0
Neutral
434343
9C9A98
FAF7F2
Logo and Flavicons
I created a pawprint icon for the logo and flavicons using Illustrator.
Iconography
For iconography, I used Google’s open source Material icons.
I also created custom navigation icons for pet care, budgeting, and home ensuring they matched the Material design aesthetic.
Custom Icons
Pet Care
Budgeting
Home
Material Icons
Component Library
I designed a library of components to streamline the process of creating HiFi wireframes.
Wireframes
I used wireframes to help me create a clear plan for design, making communication easier and providing a foundation for the end product.
Low Fidelity Wireframes
To begin to envision what the web experience would look like, I first sketched the key screens on paper and then digitized them in Figma.
HiFi Wireframes
With the design system in place, I brought the low-fi wireframes to high fidelity.
Testing
Usability Testing
Five participants completed moderated usability testing using maze.co while I moderated the sessions via Zoom. Though the overall user feedback was positive, the testing showed some improvements could be made to the UI.
Design Iterations
01 Error Recognition and Avoidance
The problem:
Users were frustrated when they could not click the “Next” button.
Existing error avoidance features:
The word “required” in the label for fields that are required.
The “Next” button is in disabled state until all required fields are filled.
Solution:
Add an error state to required fields to pop up when users click “Next” and the required fields are empty.
02 Fixed Nav Bar
The problem:
Users with smaller devices were confused when they didn’t see the nav bar or the button bar.
Solution:
Fix the bottom Nav and button bars to ensure they’re always visible.
Prototype
Next Steps
Short Term
In the short term, it would be most beneficial to develop reminders, vet telehealth, and personalization experiences. This would further decrease the mental load of the WellPet users.
Long Term
In the long term, I would be most interested in tackling the problem of pet owners’ hesitancy about vaccines.
This task would require additional research; however, I believe the gap in pet owners’ understanding of vaccine efficacy is an important one to fill.