petChek is an app that makes finding and booking veterinary services effortless.
My role
UX/UI Design
Research
Prototyping
Branding
Timeline
10 weeks
Methods
Design thinking
Problem framing
Ideation
User journey
Interaction design
User testing
Tools used
Pen & paper
Figma
Miro
InVision
PROBLEM SPACE
Pet parents struggles to find veterinary services.
First-time pet parents are adopting more pets since the COVID19 pandemic began, as they spend more time at home. However, as I spoke to other pet parents, I realized that we all struggled with choosing veterinary clinics.
HYPOTHESIS
My hypothesis is pet parents should have access to both emergency and non-emergency veterinary services promptly. I'll know I'm right when pet parents are taking less time to find and book veterinary services.
THE SOLUTION
Book veterinary appointments anywhere, anytime
Find services anytime, anywhere
-
Search nearby veterinary clinics
-
Filter results based on rating, animal, service, or wait time
-
View clinic locations on a map
Browse clinic information
-
Browse service information before booking an appointment
-
Learn about your veterinarian
-
Find out service cost and duration
Book and Go
-
Pre-fill pet profiles for quick access
-
Add your message and photos before each appointment
-
Schedule online at your convenience
Research
Under numerous COVID19 lockdowns in 2020, people are spending more time at home. They are adopting or purchasing pet animals. However, there have been concerns about veterinary clinics closing due to the ongoing pandemic. Pet parents are the most affected by this uncertainty.
My assumption was simple: more people are becoming pet owners, but not all of them can access veterinary care right away.
Secondary Research
Through extensive research, I learned that dogs and cats population has rise significantly over the past 6 years in Canada:
7.7 million
2016 - 2020
From 6.4 million to ...
Dogs
From 7.0 million to ...
8.3 million
2016 - 2020
Cats
According to the Canadian Humane Society's 2020 adoption report:
There has been a historically high levels of adoption for cats and the median length of stay was at historic low for both cats and dogs compared to 2019.
Primary Research
In order to validate my assumption, I conducted user interviews and online surveys with pet parents (ages 18 +) who have visited the veterinary clinics at least once in the past year.
My findings were as follows:
-
Lack of detailed clinic information
-
Insufficient pet healthcare education
-
Difficulty scheduling appointments
-
Lack of community support
Define
Using the research insights, I developed the "How Might We" statement:
HMW ... improve the veterinary appointment booking process in order to provide a streamlined and effortless experience for pet parents?
Persona & User journey map
In order to better understand the needs of pet parents, I created a persona, Amina Chin, based on research to identify frustrations, behaviours, and motivations. I then created a user journey map to understand where I could improve her experience as a pet parent.
Task Selection
After conducting interviews and online surveys, I narrowed down the task that I will prototype by creating 20 user stories and grouping them into epics that are thematically-related. I chose the task of booking veterinary appointments because this topic was raised many times by interviewees and survey respondents.
Core Epic - Book veterinary appointments
As a pet parent, I want to easily find available veterinary clinic appointments so that I can browse and book appointments that match my schedule.
Task flow
Before moving on to wireframing, I created a task flow diagram to help me comprehend the components required to complete the task.
UI Inspiration
Solution sketching
Design
UI Inspiration
As part of the brand development process, I created a UI inspiration mood board. Blue symbolizes trust, loyalty, and competence, where are the core values that I want to convey to pet parents like Amina.
Sketching
Having collected inspiration online, I sketched potential solutions. This step helped me understand what should be included on my screens. It allowed me to see different interface layouts and make design decisions.
Clinic information
Booking appointment
Veterinary service
Solution sketches
Grayscale wireframe
I then created a first round of grayscale wireframes ranging from finding a veterinarian clinic to completing an appointment booking.
Home page
Clinic info
Choose clinic
Choose a date
Choose service
Choose a time
Clinic results
Appointment confirmation
Testing
To ensure my product meets the needs of pet parents, I conducted two rounds of user testing and three rounds of iterations based on the task of booking a veterinarian appointment. I recruited 10 pet parents total, and split them into groups of five each for the user testing. I conducted the testing remotely, over Zoom calls, giving remote control so that users could perform tasks while I noted observations, questions, and behavior.
Task 1: Imagine that you just downloaded the app and want to find veterinary services, how would you click next?
Task 2: Imagine you want to find nearby veterinary clinics, what would you click?
Task 3: If you would like to join a community what would you do?
Task 4: If you would like to book an appointment, how would you proceed?
Task 5: If you want to learn more about the veterinarian, what would you do?
Testing Results
From round 1 user testing, I've identified the following issues for iteration:
-
Re-evaluate the first 2 screens to present the same info
-
Login should be located at the beginning
-
Service descriptions should be simple and easy to read
-
Allow pet parents to add voice message and photos before seeing the doctor
-
Add more clinic info such as phone number and address
Round 1 Iteration:
Faceted filters helps user to narrow down the vet clinics that meets the user's need
The search bar allows user to easily find specific clinic.
The map gives the user navigation and direction about the nearby clinics.
-
A clear indication of the service cost, duration, and doctor rating will provide users with more transparency.
-
This helps to build a trusting relationship with the veterinary clinic.
-
Participating vet clinics will also demonstrate that they honor their clients knowing they are time-constrained.
Before
After
Breakdown button options
-
Having emergency and non-emergency clinics in the same button causes confusion
-
Original design requires more clicking
Before
Add top filter bar
-
Users didn't have control over searching on the map
-
Filter bar provide users options to choose the type of services they are looking for
After
Before
.png)
After
Simplify the service filter
-
Users find the original service filter was difficult to read
-
Redesigned the service filter to user-friendly phrases
Round 2 Iteration:
.png)
From round 2 user testing, I've identified the following issues for iteration:
-
Clarifying rating is for doctor
-
Changing the "Apply" button to a floating button
-
Users are able to save or send appointment confirmation
-
Giving user the option to skip questions
-
Add more clinic info such as phone number and address
Giving user the option to skip
-
Give user the option to skip questions
-
Adding images to the question page to make it more engaging
Before
Floating filter buttons
-
Changing the button position to make it more accessible
-
Adding "Clear all" button to provide users freedom to quickly restart the filter with one click
After
Before
After
Save or share appointment
-
Adding social share buttons
-
Allowing users to easily share appointment information
Before
After
Brand Development
To create my brand, I started collecting photos and illustrations to get a grasp of the mood I'm trying to convey. I then brainstormed names based on adjectives that I think embody the values of my product.
Warm
Calm
Empower
Comfort
Facile
Sincere
Simple
Modern
Distinct
Colours
The colors in my mood board were extracted from photos and illustrations. For my final primary color, I selected blue as a symbol of trust and professionalism. After playing with various colors, I chose the final color below as my primary color to ensure that my design meets the WCAG accessibility requirement.
.png)
Wordmark
I came up with my name by using adjectives and foreign languages related to veterinary and pets. I eventually decided on "petChek" because I like how easy it is to pronounce and how it is associated with.
.png)
With a thorough research of font psychology, I chose round fonts since they convey comfort and softness to users. Ultimately, I chose the typeface "Opicifio" for my workmark.
.png)
Design System
The Final Product
.png)
Marketing Website
Marketing website is essential for a product's development. It contains details about the features that pet parents can enjoy. After gathering inspiration, I developed a responsive content flow diagram to help me through the process of transitioning from the desktop to the mobile version and then creating the high fidelity website.
Alternative Platform Design
Desktop
The petChek desktop website was designed so pet parents can access it easier from a larger screen.
Furthermore, the larger map makes it easier for pet parents to quickly glance at nearby clinics without scrolling.
Design Impact
With petChek, pet parents will be more relaxed about finding veterinary clinics when their pets are ill. They can instead be at ease and spend more time caring for their pets. When their pets aren't sick, pet parents have the opportunity to learn about preventative measures to ensure they are providing the correct nutrition and need to ensure their pets are healthy. Ultimately, petChek helps pets stay healthy and makes pet parents feel happy.
If I had more time ...
-
Conducting more user testing with pet parents
-
Perform more iterations to ensure the product flows better
-
Develop other features such as pet healthcare education and pet parent social community
Key Takeaways
Making Trade-Off Decisions
Throughout the development of this capstone project, I found myself constantly making tradeoffs. By prioritizing the task and ensuring that I understand the rationale behind each design decision, I made the process faster and more organized.
Task prioritization
I found that time management and task prioritization were very useful when completing this case study. The key to being successful in completing the capstone stone project was to stay organized and aware of deadlines, and to plan out the next step ahead of time.
Iteration is key
The iteration process helps bring the product closer to the user's needs. By prioritizing changes based on severity, and making the changes in accordance with user feedback, I ensure that I understand every design decision I'm making.