"PAWSitive Veterinarians" Case Study

My goal for this project was to design a fully responsive veterinary web page to help pet owners prioritize their pet's health by facilitating easy scheduling of veterinary appointments. It provides resources and tools for pet care, including scheduling appointments with veterinary professionals and accessing information on pet health and wellness. By leveraging my personal experience as a pet owner, I aimed to create a website that would simplify scheduling appointments, prioritize pet health, and improve the overall visitor experience.

The problem

Users need a simple and intuitive way to schedule veterinary appointments for their pets.

The goal
To assess whether the prototype allows for users to complete the basic user flow of scheduling an appointment on the website.

My role
UI Designer
UX Researcher

Responsibilities
Creating user personas
Conducting user research
Wireframing
Prototyping (Low-fi and Hi-fi)
Mockups

Sitemap

Paper Wireframes [Web]

To generate ideas for the homepage, I used the “Crazy Eights” method. I knew I wanted a Hero image at the top with cards of information below. The last image depicts the refined version of my wireframes. It includes a carousel hero image with a schedule appointment overlay. Below is information on dogs and cats with corresponding images.

Paper Wireframe of homepage

Paper Wireframe of homepage 2

Refined Paper Wireframe of homepage

Paper Wireframe of homepage

1/6

Paper Wireframes [Mobile]

After refining the web wireframes, I scaled it down to fit a mobile screen

Mobile version of homepage and services

Mobile version of resources and about page

Mobile version of homepage and services

1/2

Digital Wireframes

Carousel hero image with a schedule appointment overlay captures users attention and allows for easy access for scheduling.

Cards with information on caring for dogs and cats allows users to decide which pet is right for them.

A text box will allow for users to elaborate on details they would like to discuss.

Digital wireframe of "reason for visit" page

An information details button will show what services are included in the type of appointment.

Digital Wireframe Screen Size Variations

Lo-fi Prototype

The lo-fi prototype can be viewed here. The homepage, services, resources and about pages are shown. Then comes the user flow of scheduling an appointment for their pet.

Usability Study Parameters

Study Type

Moderated Usability Study

Location

United States, Remote

Participants

5 Participants

Length

5-15 minutes

Usability Study Findings

1

Accurate date & time selections

Users want to see the specific appointment time and date they select, not a generic sample.

2

Input their own text

Users would like to input the pet name as well as personal information.

3

Explanation of Services

Users need to be sure they are scheduling the correct appointment for their pet.

Mockups

The final mockup of the homepage. The hero image changes every five seconds and cycles through a series of five images. In addition to the hero image I added an overlay to encourage users to schedule an appointment. Below are two articles on how to care for dogs and cats.

Before Usability Study

After Usability Study

Users expressed a need to know what is included in the care visits. The final mockup displays a list of services provide with that type of appointment.

Before Usability Study

After Usability Study

Mockup digital wireframe of "reason for visit" page

Mockups: Original screen size [Web]

Mockup homepage

Mockup services

Mockup pet profiles and appointments

Mockup homepage

1/9

Mockups: Screen Size Variations [Mobile]

mobile home

Mobile services

mobile pet profiles and appointments – 1

mobile home

1/9

Hi-fi Prototype

The hi-fi prototype can be viewed here. This is a sample veterinary website, complete with scheduling appointments and articles to help users with their journey is pet ownership.

Accessibility Considerations

1

I used a sans serif font for optimal readability and different sized text for visual hierarchy.

2

Buttons have a hover state so users can clearly see the button they are pressing.

3

Icons and visual cues help users understand where they are within the site.

Takeaways

Impact

"I like the information icon that shows what services are offered under that appointment type."

-Participant 1

What I've Learned

Getting to learn Adobe XD to create this project has been a pleasure. I’ve learned that it’s crucial to keep everything labeled and organized, throughout every stage of the design process. I also learned that user testing is truly essential to the interaction design process.

Next Steps

1

Conduct another round of usability studies on the newest mockup and survey users on what other features they would like to see on the website.

2

Revise the mockup after the usability study.

Let's Connect!

Thank you so much for taking the time to view this case study! This was an incredibly rewarding experience. I am so excited to continue my UX/UI journey and come up with great ideas and designs to create for users.

If you are interested in connecting, get in touch with me via the contact form below, by email, or on LinkedIn.

User Research Summary
Five participants were interviewed via Zoom. They were asked to complete a series of prompts and later fill out a survey. The first usability study conducted concluded that users need more accurate date and time selections, they would like to be able to input their own values, and lastly users would like to know what is included in each service. The second round of usability studies showed that users got stuck in the flow by assuming the buttons automatically led to the next page, instead of using the arrows. Additionally users would still like to input their own text.

User Research Pain Points

1

Scheduling Online

Users want a simple way to schedule an appointment.

2

Emergency Details

Users would like to know what to do in case of an emergency.

Persona: Barbara

Barbara is a first time cat owner who needs to be able to schedule appointment online because she is hard of hearing.

User Journey Map

The first thing users do is look for a vet, if they do not already have one. Users then have to call to schedule an appointment. Then on the day of the appointment, go to the physical location.

"PAWSitive Veterinarians" Case Study

1

2

3

1

2

3

1

2

1

2

Previous Project

Next Project

Get in touch