Veterinary Clinic Website
Project type
UX Design Responsive Website- Mobile, Tablet, Desktop
Adobe XD
Date
June 2023
Location
Louisville, KY
Role
UX Designer
Project Overview
​
The Product
The Park Animal Hospital website provides a fast and easy way to register your pet(s) for appointments with a veterinarian. The users are pet owners of all ages and demographics. The goal for the website is to make the registration process seamless and straight-forward for the clinic’s clients.
The Problem
Veterinary clinic registrations require too many questions to answer, and no certain appointment time to schedule which takes time and patience away from clients.
​
The Goal
Create a simple and concise registration process with only necessary fields to fill in, and a specific appointment date and time to schedule.
​
My Role
UX Designer leading the Park Animal Hospital website design
​
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The User
User Research: Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. I discovered that many target users register their pets for veterinary appointments online through the clinic website. However, many users complain about the registration process taking too long, and the additional frustration of needing to wait for the clinic to get back to them for an available appointment time to schedule.
Problem Statement
Jen is a dog mom that wants the best for her fur babies. Having a veterinarian that takes special interest in each of her clients makes the entire experience better and more comforting. She’s had bad vet office visits in the past that have led her to be untrusting of just any veterinarian. And for her that whole process begins with their registration form.
Goals
-
Easier navigation for registration forms
-
Ability to add personal details
-
Clear options for appointment times
-
Ability to message vet
“My dogs are everything to me, and I want their vet to sincerely care about them.”
Frustrations
-
Registration forms are too tedious and crowded
-
Cannot add personal details and information about pet
-
Inability to immediately request appointment
Wireframes and Prototypes
Ideas On Paper
The main focus for this website is the pet registration process. With that in mind, the user must have an option to schedule an appointment that stands out on the homepage. It is the largest button and main interactive point on the page.
Information Architecture
Go Digital
​
The reactive websites continue to keep the button for scheduling an appointment above the fold and catching to the eye.
Prioritizing useful button locations and visual element placement on the homepage was a key part to my strategy.
The pet registration process while scheduling an appointment is straightforward, and keeps the user informed on how much they have left with the progress bar element.
Low-Fidelity Prototype
In the low-fidelity prototype I connected all of the screens involved in the primary user flow. I implemented user pain points on the usual registration’s overload of questions and the time used to fill them out. With this prototype, I made clear to users how easy and efficient it would be to flow through the registration on this website.
​
View Park Animal Hospital Pet Registration Low-Fidelity Prototype:
Usability Study Findings
Unmoderated Usability Study
United States, remote
5 participants
10 minutes
-
Users wanted a way to interact with the fill-in boxes on the prototypes in order to get a better idea of how effective the flow is.
​
-
Users thought it would be better to have a more accessible way to send a direct message to the clinic without having to go through the whole registration in order to do so.
-
Users wanted to see more aspects of the website including an About page and a Services page.
Redefine the Design
Mockups​
​
Usability Study 1
The first usability study showed that users wanted to preview how the selections would show on the registration pages. That ability was added to the prototype so that users could tactfully see how quickly it takes to complete.
Usability Study 1-- Before and After
Usability Study 2
The usability study found that users wanted the capability of messaging the clinic and veterinarian upfront on the homepage. This improvement provides efficient access to one of the key user pain points.
Usability Study 2--Before and After
Desktop screen mockups
High Fidelity Prototype
My hi-fi prototype followed the same user flow as my lo-fi prototype, and included design changes made after the usability study for interactive buttons to further show the ease and timeliness of the flow.
Accessibility Considerations
-
I used headings with different sized text for clear visual hierarchy
-
With the help of a team, I will use landmarks to help users navigate the site, including users who rely on assistive technologies.
-
With the help of a team, I will design the website with alt text available on each page for smooth screen reader access.
Takeaways
Impact
Our target users shared that the design was intuitive to navigate through, more engaging with the satisfying feeling that they are actually filling in the forms, and demonstrated a clear visual hierarchy
​
What I Learned
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next Steps
-
Stay up to date with services available at the clinic, and veterinarians practicing. Update website as needed.
-
Create a portal for clients to sign into and have access to vaccinations and other medical history paperwork on their pets.