Veterinary Web Design

VRCC

Overview

Objective - To redesign the website based on research results and build a final design on GitHub.

My Role - UX Researcher, UI Designer, Front-end Developer
Team Size - 3
Length of Project - 2 weeks
End Product - Mid-fidelity prototype in Figma ; Bootstrap site

Problem -

The website is designed to display the services VRCC offers and market why they should be customers' #1 choice for pet care. I have observed that the homepage does not provide the information that pet parents seek and lacks personality, which is causing people to go elsewhere for veterinary services. How might we improve the website so that it is attractive and as a result increase customer retention?

Solution -

Redesign the homepage by rebuilding a content strategy that will help business success.

UX Research

Gaol - To determine how and why users interact with a veterinary provider's website.

Objective -

Understand the pain points users encounter on the site
Discover what type of information users seek out on the site
Determine how we can improve the site to better meet users' needs

Methodology: 1x1 usability testing, Survey, Heuristic Valuation

Platforms tested: Desktop

95.8% - Expects to see the location of the vet clinic
95.8% - Expects to see the hours of operations
Deciding Factors
- #1 - Location
- #2 - Reviews
Top Services -
- General Care
- Emergency Services
- Dentistry

Covid Info - Orange text is not color accessible; it's wordy and takes up a large portion of the homepage
Hero Image - Banner is short and text is crowded ; needs space to breathe
Resources - Valuable info for new customers ; could be moved up on the page
Footer - Location info should be presented on the homepage as well as the footer ; Vertical alignment makes the footer unnecessarily large

User Insight

We discovered that the homepage lacks the information pet parents seek to gain their trust in VRCC's care.

We believe that people will be more inclined to choose VRCC if that information is immediately presented to them.

We might do this by adding the top driving factors to create a supportive experience. Doing this will communicate the quality of services and trustworthiness of VRCC, resulting in increased customer retention.

Key Takeaways

Location and hours need to be prominent
People like to view reviews before making a decision

Creating a Persona

Objective - To understand our target audience and empathize with their needs and frustrations by developing a persona based on our research.

Meet Jessica Jones -

Screen Shot 2022-03-03 at 6.49.04 AM.png

Jessica's Story -

We wanted to envision a realistic time when Jessica will be searching for a vet to have a deep understanding of WHY we need to enhance her experience.

Conclusion -

Jessica is stressed because an emergency happened where she needs to find a vet urgently
She is mostly concerned if the vet provides the services that she's looking for AND if they are reliable

How might we ...

make Jessica's emergency search quick?
help Jessica feel less stressed in her situation?
gain Jessica's trust to choose VRCC to care for her dog?

Ideation

Game Plan - Together, we organized our ideas into a worked feature prioritization diagram and I took on the responsibility of running the competitor analysis for our team.

Quick Wins

Add digits to the phone number
Add Reviews and Location
Provide information about the top 3 services
Reduce the size of the COVID notice

I analyzed 4 websites -

2 Vet Clinics (Direct Competitors)
2 Pet Groomers (Indirect Competitors)

Feature Prioritization

We sorted all of our ideas into the matrix to determine our quick wins due to our short time frame.

Competitor Analysis

We were able to identify areas we can improve and help VRCC stand out based on our competitors' weaknesses.

Feature Prioritization

We sorted all of our ideas into the matrix to determine our quick wins due to our short time frame.

Test & Code

Sketches to Wireframes - We each did a quick sketch of the homepage based on research findings the combined ideas into one wireframe.

Sketches

Desktop Wireframe

Sketches

1/2

Building on GitHub -

We created our repository and added branches for each of us. We gave each other a section of the homepage to code. We used Bootstrap to help with our framework of the site. Constant communication happened to make sure that we were all on the same page as to whether somebody pushed a commit and we had to pull a request before editing our own code.

My responsibilities were to build -

Jumbotron slideshow
Testimonials
Blog posts

Check out our site!

Iteration

I find coding to be difficult and I was proud of our team because we were able to build a website that provided vital information pet parents seek when visiting a vet site. We gathered valuable feed back from our presentation and I wanted to iterate on our design to work on my vidual design skills.

Feedback

Participants enjoy how short the homepage is
They feel that it's easy to find the information
The testimonial section is word-heavy and crowded
They are not a fan of the 2-column layout because the content seems congested

Iteration

Span Testimonials section to break up content
Restructure the layout of the homepage so that it is breathable

Style Guide -

I updated the style guide to improve the aesthetic of the website. I decided to use different shades of teal from the logo. This added more brand voice and consistency as well as made the website look professional and reliable.

Final Product

Build in interactive interactive elements - hover state and carousel
Connect Google Maps to the "Get Directions" link
Test again and iterate on findings

Team Work

We were all beginners in coding and I was proud of what we built in just two weeks. We did a great job in our research phase and discovered the top information pet parents seek which helped us create a website that is truly tailored to our users.

We communicated well during our development phase and no technical issues occurred, which I count as a WIN! Overall, the project was a success and I understood the importance of having quality research data to drive user-centric designs.

Visual Design Work

I enjoyed working on my visual design skills and felt that I created a welcoming vibe that was informational and easy to read. I appreciate whitespace and used it to help make the website look less crowded.