Background Information

The Western Sussex Animal Hospital ("WSAH") was founded in 2012 by Craig Metzner, DVM. This popular small-town animal hospital has always adhered to their core values, one of which is the service of pets over profits. It's modern medical equipment and veterinary practices ensures clients and pets get the best compassionate quality care possible.

Boasting a 4.8 star rating on Google, the WSAH is a popular animal hospital with over 100 glowing reviews. Community members want to be clients, but the business hasn't been able to break that fine line of hiring more help and staying profitable.

WSAH staff photo
Dr. Metzner and staff performing exam
WSAH staff photo
Lauren ready for service with a smile
WSAH staff photo
Tara and Holly administering vaccination

Area of concern

Like all businesses, there is a need to become more efficient and save money in order keep the hospital open for the community. Dr. Metzner called me with his concerns and noted one area of weakness for the hospital was its under-utilised website. He believed a more modern, user-focused website could help streamline some common time-consuming business activities.

Shortly thereafter, I flew to Delaware and visited the hospital to speak with members of their staff. Each had unique perspectives to share from their own experiences and/or what they heard customers mention.

What areas of improvement does the website need?

Craig Metzner

I'd like the website be a useful tool for our clients. Right now, it's too plain and it doesn't give the visitor much information.

Craig Metzner, DVM Veterinarian, Owner
Tara Edmondson

The text and buttons are hard to read on my phone. Things are very small.

Tara Edmondson LVT
Samantha Millman

Our Facebook page is more popular than our website. I don't think people know we even have one.

Samantha Millman LVT
Lauren MacDonald

I've seen on other websites where you can reorder pet medications without scheduling an appointment. That would be a helpful time and money saver for our clients.

Lauren MacDonald Receptionist

Overview

With a deeper understanding of their website concerns, I formulated the goals of this request and what questions to ponder while exploring the best design solution to implement.

Goals

  • G1  Identify general usability issues
  • G2  Determine what website design will increase traffic to the store

Questions

  • Q1  Which responsive website layout is easier to navigate? Why?
  • Q2  Can a user quickly access the online store?
  • Q3  What else can increase the website's value to their clients?

Methods Used

  • Interviews
  • Usability Tests
  • Surveys
  • Google Webmaster Tools

Competitive Analysis

Like with most projects, I like to look around and see what the competition is doing. How do they layout their homepage? Is their navigation clear? What are their strengths and weaknesses?

Savannah Animal Hospital
Savannah Animal Hospital
Eastern Shore Veterinary Hospital
Eastern Shore Veterinary Hospital
Seaford Animal Hospital
Seaford Animal Hospital
Four Paws Animal Hospital
Four Paws Animal Hospital

These competing animal hospitals have a decent online web presence, but I wasn't blown away by what I saw. Their designs feel dated and most lacked the responsive coding that Google requires for better search results. I know with some UX research, we can figure out what sort of layout works best and gets them to use the online store more frequently.

User Flow

While working from the home office, I facilitated a Zoom call where several staff members collaborated with me to determine what changes needed to be made to the website's basic structure. We used Miro to quickly move stickies around while people brainstormed ideas. In the end, the only changes we decided to make were to add some more content about the staff members, their PetPro app, and adding a Google review section.

Miro user flow
Miro user flow

Initial Designs

The previous website was using outdated coding. Because I'm not a developer, I decided to work with pre-existing templates coded by Canvas. This is a great resource for people like me that can modify and style existing code, but not properly start from scratch. I sent them four snapshots of layouts that I knew I could manipulate and that had the best starting point design-wise.

Option 1
Option 1
  • Two leading options below headline
  • Dark background doesn't feel medical
  • Layout too simple, wasted space
Option 2
Option 2
  • Clean look and feel
  • Store button at top of every page
  • Too much unused space above the fold
Option 3
Option 3
  • Correct layout for header area
  • Comfortable use of negative space
  • Needs to have a button for the store at the top
Option 4
Option 4
  • Room for store button at the top
  • Design feels very busy
  • Confusing, not sure where to go first

They gave me great feedback about what they liked and didn't like. I've noted some of their comments below each option. The two designs with the green borders indicate which designs were the most appealing to them. I created a new mockup (see below "Treatment" image) that combined those designs, and it satisfies Q1 and Q2.

Control image
  • Control image
  • Too much reliance on stock photos
  • Link to online store not clear
  • Some pages are not properly coded for responsiveness
Treatment image
  • Treatment image
  • Engaging headline message
  • Clear buttons to navigate to the store and app
  • Uses modern responsive coding practices

The WSAH staff were thrilled with the design. Before we could push that code live, we needed to perform some usability tests. This will give us the evidence to prove G1 and G2 were met.

UX Study

Quantitative Research: How fast can you find the Store button?

Which design took the least amount of time to find the store button? To know which design allows the visitor to find the store the fastest, I conducted a Userbrain usability test. Random testers were asked to perform several tasks. I wanted to know how long it took for them to find the store button on each design. As a bonus question, I also asked them to pick which design they liked better and why.

Userbrain study
Video of Pablo interacting with my prototype
Userbrain study
Video of Micheal timing himself performing my tasks
Tester Name Time on Control version Time on Treatment version
Pablo B. 00:22 00:07
Michael B. 00:14 00:05
Danielle M. 00:12 00:03
Janice N. 00:44 00:07
William L. 00:15 00:04
Emily V. 00:23 00:02
Paige H. 00:33 00:05
Average 00:23 00:05

Qualitative Research: Which design do you like better and why?

I used Zoom to interview people and test out my Adobe XD prototype. These participants were asked to find a way to access the online store, critique the overall designs, and provide additional feedback. Here are some snapshots and quotes from some of the sessions.

Zoom interview
Zoom interviewee interacting with my prototype
Zoom interview
Another Zoom interviewee talking about the design
Default user

I liked the second version better. It's cleaner and more focused.

Jenevieve I.
Default user

Definitely #2. However, I think you should use pictures of the actual people that work there. Don't use stock images. Gives it that personal touch.

Dave P.
Default user

I like the layout with the pets on it. I did get confused with the two buttons in the middle of the page. Maybe give them different colors to show me they go to different places.

Drew M.

Venn diagram to organize comments

Venn diagram

UX Research: Recommendations

This research confirmed my original thought that the Treatment version would be more popular. It did shine a light on a few other ideas that other people shared.

  • Users found the store button  18 seconds faster  in the new design
  • Different colored buttons for different major tasks
  • Use real images of staff and inside the hospital
  • Product advertisements could be alternative way to direct traffic to the store

Data-Driven Design

The influence of various factors, facts and figures helped create the right website design that satisfied Dr. Metzner, his staff, and their online visitors. Here is the current design and be sure to visit the live website.

2022 WSAH Homepage

Success Metrics

Q1  Which responsive website layout is easier to navigate? Why?

According to our Userbrain testers, they all picked the treatment version over the control one. Here is what they had to say.

Default user

I like how I can order medications or schedule an appointment right from the homepage without having to click anywhere else. Real time saver.

Emily V. Study participant
Default user

The colors are eye-catching and the people in the photos look like they enjoy what they're doing. I get good vibes from this place.

Paige H. Study participant

Q2  Can a user quickly access the online store?

Embedding the Crazy Egg heat map script into the website allowed me to observe where users are clicking. Based on where the white dots appear, I can tell they are actively using the button at the top of the page to access the hospital's online store.

Crazy Egg home page heat map
Heat map of Home page
Crazy Egg staff page heat map
Heat map of Staff page

Q3  What else can increase the website's value to their clients?

I conducted a Crazy Egg survey entitled "Reason for today's visit" and it gave me some interesting insights. This survey ran for two weeks on the live site. When a user landed on the website, the survey appeared in a popup. It asked them to choose one of four options for their reason of visitng.

Crazy Egg survey page setup
Survey settings page and preview
Crazy Egg survey results
Survey results
  • Visit the store
    %
  • Get directions
    %
  • Read our services
    %
  • Other
    %

"Noted. We are always looking for areas of improvement. Looks like our visitors want to know more about our services. I better get to writing!"

- Larry Metzner, Office Manager

Positive Outcomes

Increased page rankings

I used various Google webmaster tools to monitor the website's performance. Because we made Google "happy" with the modern responsive coding, we have seen an increase in search result placements for general keyword phrases like "veterinarians near me" and "Sussex County animal hospital". Here are some snapshots of the positive site growth.

Google Search Console
WSAH account in Google Search Console
Google Analytics
Google Analytics - WSAH pages viewed
Google Analytics
Google Analytics - WSAH acquisition overview

Efficient time saver

Before we redesigned the WSAH website, Lauren typically spent 20% of her week filling out invoices for prescription refills. This included time spent on the phone with the customer or walk-ins. The process was very tedious and time-consuming.

Now, clients use the online store and it's reporting a 55% increase in usage. Lauren only has to click an approval button in an email from the store, and she gets that 20% of her week back for other tasks.

"I spend less time approving refills and filling out invoices, because clients are doing it online through our store."

- Lauren MacDonald, Receptionist

The fun isn't over

I will continue to monitor the WSAH website's performance, review heat map analytics, conduct randomly timed surveys, and listen to any client feedback. In the meantime, I know the staff want to write more about their services, so I suspect I'll get a phone call as soon as they're done!

More success stories

⇐ Case Study: Freddie Mac FAST®

Written by Chris Metzner
Image
Using modern project management methodologies, I can translate a client’s user requirements into visually appealing interfaces and positive experiences that align with project UI specifications.