top of page

VRCC

vrcc WEBSITE.png

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 -

  1. Understand the pain points users encounter on the site

  2. Discover what type of information users seek out on the site

  3. 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

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.

Storyboard_VRCC.png

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 ...

  1. make Jessica's emergency search quick?

  2. help Jessica feel less stressed in her situation?

  3. 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)

Test & Code

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

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

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.

VRCC_wireframe.png

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.

VRCC_Style Tile.png

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

bottom of page