Project background
A concept for a responsive website for a local veterinary clinic. The UX design for this project was informed by interviews conducted with pet owners and common pain points with coordinating care for their pets. Two rounds of usability studies and revisions to the website were made to address solve these concerns.

The product
A responsive website for a veterinary clinic.

The problem
Pet owners find it difficult to schedule appointments and manage their pet’s prescriptions.

The goal
Create a website that makes it easy for pet owners to book appointments and order medications.

Timeline

July – September 2023

Role

UX Designer
UX Researcher
Visual Designer

Completed project

To understand the user, I conducted interviews and created empathy maps to discover their needs and pain points. The primary user group was determined to be pet owners between the age of 25-70, with pets of various ages.

This user group also identified similar pain points when scheduling care for their pets, managing their medications, and finding resources to take care of their pets.

Process

Empathy map
User personas
Competitive audit

Haruki Tanaka
Mapping Haruki’s journey highlighted pain points with using websites in a different language, and how overwhelming this can be when trying to book an appointment and order medication for his cat.

Ahmed Yusuf
Mapping Ahmed’s journey highlighted pain points with accessing his pets medical records, and booking an appointment.

Sophia Rodriguez
Mapping Sophia’s journey highlighted pain points with finding reputable sources for pet care.

Scheduling
Users find it difficult to schedule medical appointments for their pets, often having to call to make an appointment.

Medication
Users find it difficult to find, manage, and order medication for their pet. They often use sites like Chewy but find the process long and difficult.

Resources
Pet owners and university students were in search of trusted resources to help take care of, or learn more about their pets.

ABC Animal Hospital / Direct
Local vet clinic that offers a basic and straightforward web experience

Pros

1. Strong local presence

2. Personalized attention

3. Experienced veterinarians, emphasis on compassionate care

Cons

1. No ability to book appointments or order medications

2. Limited resources

3. No access to account/records

VCA Animal Hospital / Direct
Network of vet clinics across the US that offers a wide range of services

Pros

1. Easy appointment booking

2. Comprehensive pet resources

3. Ability to order supplies/ medications online

Cons

1. Finding resources could be easier

2. Little to no accessibility features

3. Can appear to be more “corporate” and less personable

Chewy / Indirect
Popular online store for pet supplies, resources, and tele-doc visits.

Pros

1. Extensive inventory of products

2. Fast and convenient shipping

3. Access to Teledoc visits (video call or chat)

Cons

1. Requires an account to place an order

2. Emphasis on ‘retail store’

3. No multi language support

Initial wireframes focused on the appointment booking flow to address the biggest user pain point in booking an appointment. Competitors either forced users to call the office, or fill out a form online. A guided process with multiple steps was explored to make filling out multiple sections more manageable, and decrease user input error.

Process

Paper wireframes
Digital wireframes
Low fidelity prototype
Usability study

Low-fidelity prototype

Homepage
Variations on the homepage explored sections for team bios, 'about us’, services, and featured resource articles.

Appointment scheduler
The appointment booking flow is completed through guided steps to avoid overwhelming the user with a large form to fill out.

Simple questions are asked like, “Have we seen you before?”, What kind of care does your pet need?”, “When would you like to see us?”

Prescription ordering
The account portal would include a way to easily order medications to the users home without needing to visit another site. It is set up as a ‘shopping cart’ checkout for ease of use.

Other pages were sketched for a user onboarding experience (later combined with the new patient appointment booking).

Homepage of the website features a hero section with large CTA’s to find care or create an account. Services and features help articles are also shown for new users to easily learn more about the clinic.

Appointment booking flow utilizes a stepper on the left side to indicate progress. Users are asked simple questions to guide them through the flow, with text fields and buttons changing to fit the information requested.

Patient portal quickly shows important information such as their primary veterinarian, health records, and upcoming appointments. Users can enter the prescription ordering flow from here as well.

In this first draft, the lo-fi prototype features user flows for appointment booking, ordering prescriptions, and language localization. A usability study was then conducted to improve these features.

Round 1 findings

Round 2 findings

After two rounds of usability studies, high-fidelity prototypes were created. Round 1 findings indicated that nearly users were able to easily complete the user flows for appointment booking and medication ordering. However, more than half of users were confused by the CTA ‘Find Care’ action and finding the medication ordering flow from the homepage. Half of the users interviewed also expected to see more key information about the clinic on the homepage.

After adjusting the design to solve those concerns, a second round of testing was conducted. Users were able to again, easily navigate the website and complete the 2 main user flows. They again, noted that the medication ordering flow was a little difficult to access, while also pointing out some inconsistencies with the appointment scheduler stepper and confirmation. Final adjustments to the design were then made to address these findings.

Method

High-fidelity mockup
High-fidelity prototype

High-fidelity prototype

Featured
Users found that ‘Find Care’ verbiage was misleading and did not expect to be asked to book an appointment. 

Clinic information
Users also wanted to see information about the location, hours, and testimonials on one page to get a better understanding of the clinic as a new user.

Appointment booker
Some users confused the stepper with an input field. They also noted that they would like more view options in the time picker.

Confusing CTA
Users Indicated that ‘Find Care’ verbiage was misleading and did not expect to be asked to book an appointment. 

We achieved the initial goal of the project to address common pet owner pain points with coordinating care for their pets. An easy to use appointment scheduler, convenient online medication ordering, and resource articles for owners to continue to care for their pets outside the clinic.

Additional features were added in along the way to consider new user conversion. A homepage rich with content for users to get a quick overview of the clinic, their services, and testimonials was built out. Additional supporting pages for Services and Contact information were also created.

Homepage
New users are easily able to scan for key information, such as location, contact, operation hours, team members, and services are surfaces on the homepage.

Supporting pages
Additional pages go in depth about services offered by the clinic, and additional information about contacting the clinic.

Simple questions
Booking an appointment is as easy as answering a few questions. This ensures forms are accurately filled in, and prevents users from being overwhelmed with a long list.

Dynamic sidebar
The sidebar acts as a stepper, updating with information as the user progresses through the flow. ‘Back’ and ‘Cancel’ buttons afford users the chance to correct any mistakes.

Mobile booking
The mobile website allows users to easily book an appointment on the go.

Mobile progress bar
The sidebar is replaced with a navigation bar placed at the bottom for easy finger access. Completion of the form is indicated with a progress bar.

Medication tab
Medication ordering is easily accessed from anywhere on the website from the navigation bar. Users will be prompted to sign in to place an order.

Account
The patient portal features a medication section for easy access to medication ordering.

Checkout
Available prescriptions to refill can be added to the cart. Shipping and billing options are then confirmed before placing an order. In progress orders are shown on the medication page.

Mobile checkout
Easily place a refill order from the mobile site.

Pet care
A collection of articles and resources to assist pet owners. Users can browse by category and pet species.

Articles
Written by professionals to assist pet owners with continued care outside of the office.

Impact
Users were able to easily move through the appointment booking and medication ordering flows. Nearly all participants in the study noted that they would love if coordinating medical care for themselves was this easy.

Lessons learned
Coordinating medical care is often a difficult and confusing process for many pet owners. They value simplicity, convenience, and above all trustworthiness when making these decisions.

Account dashboard
Build out flows for managing the account portal.