Project Overview

WellPet

Pet owners often face difficulties in financially planning for their pets' care, and this can lead to stress and anxiety. Traditional budgeting tools cannot fully cater to the needs of pet owners due to a lack of transparency in vet care costs.


To help pet owners provide quality care for their pets while managing their finances, WellPet offers a mobile-first responsive website. It provides budgeting, cost estimation, and care planning tools, making it easier for busy pet owners to ensure their pets receive the care they need without breaking the bank.

Pet owners often face difficulties in financially planning for their pets' care, and this can lead to stress and anxiety. Traditional budgeting tools cannot fully cater to the needs of pet owners due to a lack of transparency in vet care costs.


To help pet owners provide quality care for their pets while managing their finances, WellPet offers a mobile app. It provides budgeting, cost estimation, and care planning tools, making it easier for busy pet owners to ensure their pets receive the care they need without breaking the bank.

View Prototype

The Product

Mobile-first responsive website

Mobile app

My Role

UX research

Branding

UX/UI design

Testing

Duration

6 weeks

The Process

Discovery

Ideation

Design

Testing

Prototype

Next Steps

Discovery

Research Plan

As a pet owner and an avid lover of animals, I decided to design a website that would cater to the needs of pet owners. Although there were many products on the market that were designed to help with some aspects of pet care (e.g. pet sitting, toy boxes, vet telehealth), I felt there was a gap in comprehensive care planning.

As a pet owner and an avid lover of animals, I decided to design an app that would cater to the needs of pet owners. Although there were many products on the market that were designed to help with some aspects of pet care (e.g. pet sitting, toy boxes, vet telehealth), I felt there was a gap in comprehensive care planning.

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.

2024 Inna Lempert Flynt

2024 Inna Lempert Flynt

2024 Inna Lempert Flynt