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.
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?
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.
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?
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.
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.
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.
- Two leading options below headline
- Dark background doesn't feel medical
- Layout too simple, wasted space
- Clean look and feel
- Store button at top of every page
- Too much unused space above the fold
- Correct layout for header area
- Comfortable use of negative space
- Needs to have a button for the store at the top
- 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
- Too much reliance on stock photos
- Link to online store not clear
- Some pages are not properly coded for responsiveness
- 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.
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.
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.
Venn diagram to organize comments
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.
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.
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.
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.
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.
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.
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!