Rectangle.png
Rectangle.png

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

Home Screen.png
Clinic information.png

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

Book appointment.png

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:

dog icon.png

7.7 million

2016 - 2020

From 6.4 million to ...

Dogs

cat icon.png

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.

quotation icon.png
quotation icon.png

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:

quotation icon.png

HMW ... improve the veterinary appointment booking process in order to provide a streamlined and effortless experience for pet parents?

quotation icon.png

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. 

Frame 1.png
Frame 2.png

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.

quotation icon.png
quotation icon.png

Task flow

Before moving on to wireframing, I created a task flow diagram to help me comprehend the components required to complete the task.

Frame 4.png

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. 

Screen Shot 2022-03-28 at 9.18.20 PM.png
Screen Shot 2022-03-28 at 9.18.13 PM.png

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

Frame 7.png

Booking appointment

Frame 8.png

Veterinary service 

Frame 9.png

Solution sketches

Frame 10.png

Grayscale wireframe

I then created a first round of grayscale wireframes ranging from finding a veterinarian clinic to completing an appointment booking. 

Home page.png

Home page

Clinic Info.png

Clinic info

Choose clinic.png

Choose clinic

Booking - Calendar.png

Choose a date

Vet services.png

Choose service

Booking - Time.png

Choose a time

Nearby Clinics.png

Clinic results

Booking - Confirmation copy.png

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

Frame 12.png

From round 1 user testing, I've identified the following issues for iteration: 

  1. Re-evaluate the first 2 screens to present the same info

  2. Login should be located at the beginning 

  3. Service descriptions should be simple and easy to read 

  4. Allow pet parents to add voice message and photos before seeing the doctor

  5. 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

iteration 1 before 1.png
NEMRG.png

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 

iteration 1 before 2.png

After

itration 1 after 2.png

Before 

iteration 1 before 3 (1).png

After

iteration 1 after 3.png

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: 

Frame 11 (2).png

From round 2 user testing, I've identified the following issues for iteration: 

  1. Clarifying rating is for doctor

  2. Changing the "Apply" button to a floating button 

  3. Users are able to save or send appointment confirmation  

  4. Giving user the option to skip questions 

  5. Add more clinic info such as phone number and address

itreation 2 after 1.png

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 

iteration 2 before 2.png

After

iteration after 2.png

Before 

itraetion 2 before 3.png

After

iteration 2 after 3.png

Save or share appointment 

  • Adding social share buttons 

  • Allowing users to easily share appointment information  

NEMRG.png

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. 

Frame 9 (1).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. 

Frame 9 (1).png
Frame 10.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.  

Frame 11 (2).png

Design System

Slide 16_9 - 1.png

The Final Product

login.png
iPhone X Mockup (1).png
Clinic information.png
Book appointment.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. 

iMac Pro Front View Mockup.png
Group 5523.png

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. 

blue_iMac.png
MacBook Pro 13.png

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.