Case Studies Responsive

Designing a responsive pet telehealth website- a UX case study

View the original post

Enabling pet owners to easily connect with vets online- a UX case study

In this case study, I am going to share my process of designing a website that easily allows pet owners to connect with vets online.

As I continued my design journey, I was on the lookout to solve some real-life problems. Because I did my initial projects in popular domains such as e-commerce, I wanted to find a niche problem to work on for my next endeavor. Unable to find one that really caught my attention, I decided to take my mind off of it for a little while by grabbing coffee with a friend.

However, I noticed a look of frustration on my friend’s face as soon as I saw her. Cautiously, I asked her what was wrong. She then began to tell me about her recent visit to the vet for her dog’s regular checkup. Not only did the drive to and from the vet take several hours due to traffic, but the visit came out to be very costly. She also mentioned that she was extra alert these days whenever her dog showed any signs of discomfort since her dog is growing old. Then a thought crossed my mind-

What if pet owners could connect with their vets immediately from the comfort of their homes at a lower cost?

At that moment, I knew that I found my problem to solve. Although I am not a pet owner myself, I can tell by the way that my friends care for their pets that they are considered family members. In addition to that, I have always wanted a dog ever since I was a little girl. Now that I am about to graduate college and live by myself, I have been contemplating of adopting one.

Despite the companionship that pets provide, being a pet owner comes with great responsibilities. In order to make the lives of pet owners and their furry companions easier, I designed a responsive website called VetToPet.


Just within the United States, approximately 67% of all households, or about 85 million families, own a pet. In addition to that, the American Veterinary Medical Association (AVMA) has encouraged pet owners the use of telehealth, or the use of technology to access health care services remotely, since the outbreak of the pandemic. Taking all of these into account, I designed a website called VetToPet to enable pet owners to easily connect with their vets online.

Scope and Focus

Although there are a number of different user journeys that a pet owner could take on a pet telehealth website, I mainly focused on the steps to book an online consultation with a vet and access the pet’s medical records.

Secondary Research

Due to an increase in pet ownership and rise in pet healthcare, the global veterinary telehealth market size is expected to reach around $346.7 million by 2027. Furthermore, North America dominated the market and accounted for the largest revenue share of 37.2% in 2020. This can be attributed to several factors with one of them being high investment in animal healthcare expenditure. With that being said, this growing industry was one to focus on.

Competitive Research

Before I began to design the website, I researched some of the major competitors within the industry as well. By doing so, I was able to take note of the strengths and weaknesses of each of the pet telehealth websites.

Competitive Analysis

In order to compare the different competitors more easily, I created a feature analysis chart. Making such a visual helped me discern the areas that would give my website a competitive advantage over the existing ones.

Feature Analysis

User Interviews

I then proceeded to conduct user interviews to better understand the thoughts, feelings, and needs of pet owners. I interviewed a total of six participants between the ages of 21 and 38. All of the participants own pets and their professions varied from student, teacher, to product designer.

The interview guide that was prepared beforehand can be found here.

The detailed findings from the interviews can be found here.

Summary of findings from the user interviews:

  • Three out of six participants discussed the need for an application that enables them to keep track of their pet’s medical records
  • Three out of six participants were frustrated over the lack of price transparency
  • Three out of six participants expressed frustration over the wait time at the clinic despite making an appointment in advance
  • Three out of six participants were motivated to consult a vet online to ask for advice/guidance
  • Four out of six participants expressed their concern over taking their pets to the emergency center at untimely hours due to high costs
  • All of the participants were motivated to take their pets to the vet if they showed any signs of illness
  • All of the participants were motivated to consult a vet online since it is convenient and time-saving

Here are some pain points that participants mentioned during the interview:

“I’m worried about the price because I never know how much it is going to be. It just sneaks up on you later.”

“The first time I took my cat to the vet, they gave her an ultrasound. I didn’t agree to that beforehand and it turned out to be $75.”

“We have to wait at least 20 minutes each time we visit the vet. I don’t think we have ever been just in and out even though we make appointments in advance.”

User Persona

With the research findings and insights gained thus far, I was able to synthesize them and identify the problem that needed to be solved. More specifically, I was able to figure out what kind of product will be created for whom and how I planned on doing that.

First, I came up with a persona that depicts a pet owner with the needs and pain points that were mentioned frequently during the interviews.

User Persona

Empathy Map

I then put myself in the shoes of the persona to really think from the pet owner’s perspective. Doing so made it possible for me to write down all the potential thoughts, actions, and feelings that a pet owner might have.

Empathy Map

Problem Statement

With the user persona and empathy map handy, I was able to come up with a human-centered problem statement.

How might we help pet owners so that consulting a vet can be more affordable, convenient, and accessible?

User Flow

Next, I tried to take a creative approach to tackling the problem statement. I jot down several different scenarios in which the user persona, Michelle, might need to use the pet telehealth website.

One of the first scenarios that I came up with was that Michelle needs to seek advice for her dog’s behavioral problems. However, I thought that creating a more urgent situation might better reflect the concerns that were brought up by a number of participants during the research phase. Therefore, I came up with another scenario in which Michelle wants to see a vet at an untimely hour because her dog is suddenly showing signs of a health issue.

User Flow

Information Architecture

After I created the user flow, I proceeded to work on the information architecture to get an idea of how different pieces of information were going to be organized within the website.

Information Architecture

Paper Sketches

In order to visualize what the homepage might look like, I created several different sketches of it. In addition to that, I prepared some sketches of what the other pages might look like and those can be found here. Because I was looking to create a responsive website, I decided to create mobile screens that look similar to those of the desktop version.

Paper Sketches

Mid-Fidelity Wireframes

Once I had my sketches ready, I designed some wireframes on Figma to bring them to life. As shown below, I created wireframes for the different pages such as the Homepage, Find a Vet Page, Vet Details Page and Booking Consultation Pages.

Mid-Fidelity Wireframes

Mood Board

Now that I had an idea of what the website was going to look like, I gathered a number of different pictures from Pinterest for inspiration. Because I was working on a pet telehealth website, I decided to use the color blue as my primary color. Not only does blue represent trust and sincerity, but it also provokes a sense of calmness, which could be helpful for distressed pet owners who are looking to use the website in case of an emergency.

Mood Board

UI Kit

Because I wanted to create a website that is professional yet friendly, I created a logo that would convey those ideas. Afterwards, I developed a UI Kit that closely follows that particular brand identity as well.

UI Kit


After I developed the UI Kit, I created the high-fidelity screens for both the desktop and mobile versions. In order to test them out and see whether there are any problems, I prepared clickable prototypes for each of the versions on Figma as well.

The desktop prototype can be accessed here.

The mobile prototype can be accessed here.

Usability Test

With the high-fidelity prototypes that I developed from the previous stage, I was ready to test them out and evaluate whether my design solved the problems that were brought up during the research phase.

The remote usability testing was completed through recorded Zoom sessions so that I could gather both quantitative and qualitative feedback. Based on the findings, the prototype was a success. Overall, the participants were able to navigate the website easily and complete the tasks in a timely manner. However, it also helped me identify areas that could be improved to reduce confusion for the users.

The five participants were between the ages of 25 and 52. Each of the participants were asked to complete the following tasks:

  • Find a vet who is available on 7/25
  • Book a time with Dr. Andrea Smith at 12:30 PM on 7/25
  • Create an account and proceed to complete the booking
  • Access your pet’s medical records

The usability testing plan can be found here.

The detailed report of the findings from usability testing can be found here.

Here are the key points from the feedback received:

  • Vet cards on Find a Vet Page should show other available time slots
  • Vet’s education should be added to the Vet Details Page so that pet owners can entrust their pet to the vet
  • Reviews on Vet Details Page should include the pet’s issues so that other pet owners can find them more relatable
  • Payment Page should include a message of assurance to indicate that pet owners will not be charged until after the consultation
  • Medical Records Page needs icons that enable pet owners to print, download, or share the records easily
  • Confirmation Message Page should include a calendar icon to allow pet owners to add the date to their calendar

Priority Revisions

With the feedback provided by the participants during usability testing, I was able to make the changes to my design accordingly.

High-Fidelity Screens

In case you want to see all of the high-fidelity screens for the VetToPet website, they can be found here.

Desktop Screens
Mobile Screens

Edge Cases

Although the high-fidelity screens were developed to show the user’s journey to book an online consultation and access the pet’s medical records, this is essentially the happy path that the user would take. With that being said, I came up with two edge cases and designed additional screens to show how the website would deal with such situations.

  • The user has numerous pets and wants to create a profile for each of them on the VetToPet website
  • The user puts in the wrong credit card information on the Payment Page
Edge Cases

Revisiting the Problem Statement

How might we help pet owners so that consulting a vet can be more affordable, convenient, and accessible?

The problem was solved by designing a responsive website called VetToPet to enable pet owners to book online consultation from the comfort of their homes. Not only are the steps to book a consultation straightforward, but the pricing is also more affordable and transparent. The service is also available 24/7 for those who need assistance at untimely hours. In addition to that, it saves pet owners the hassle of requesting for their pets’ medical records from the clinic by providing them through their VetToPet accounts.

Next Steps

Because I primarily focused on the user’s journey to book an online consultation with a vet and access medical records, the next step would be to focus on other user journeys such as uploading questions on FAQ and accessing other resources within the website.

Challenges Faced

  • Because I was unable to find clear patterns in the user interviews initially, I had to recruit several more participants within a given time frame until I could see some patterns emerge in their responses.
  • The project went in a different direction than I had originally anticipated after I synthesized the findings from the research phase. Despite this, I learned to be flexible and changed the project deliverables accordingly.
  • Despite all the suggestions and feedback that the participants provided during usability testing, I had to make the decision as a UX Designer to prioritize and incorporate the most important ones into the design.


  • Because this particular project was related to the health and well-being of pets, it was important for me to design the website in a way that would help establish trust and credibility. Therefore, I had to be more attentive to the language that was I using for the copy writing.
  • In addition to that, I had to keep a tone that was professional yet friendly in order to create a website that would encourage pet owners to use it.
  • Furthermore, I learned that incorporating the small changes that the participants mentioned during usability testing can dramatically improve user experience.

Check out my other case studies on Medium:

Designing a responsive pet telehealth website- a UX case study was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.