top of page
Group 1.png
Status: INPROCESS

A complete revamp of the website to streamline appointment booking and website engagement experience 

Evergreen Avian & Exotic Animal Hospital 

Overview

Evergreen Avian and Exotic Animal Hospital specializes in high-quality care for small exotic animals and birds. The hospital gets over 100+ client calls daily, affecting reception and customer experience. Despite the information being available on their website, it's underutilized with a 70% bounce rate.

 

My Contribution

  • Streamlined the appointment booking process online.

  • Made the new redesign WCAG compliant.

  • Establishing and implementing the new design system and style guide.

Duration

4 months (April to July 2023)

My Team

Me (Senior Product Designer)

1 UX Researcher 

1 Accessibility specialist
1 Product Manager

Problem

How can we enhance the holistic user experience at Evergreen Avian & Exotic Animal Hospital, spanning from information seeking to appointment booking and addressing post-prescription needs?

The Users

The customers are people like Returning Remmy and Newbie Nancy, who are either regular client of the hospital or are visiting for the first time. Through persona mapping, I understood that for a new client, the primary focus is on the discovery of services and information about their animal whereas the returning client is more likely focused on booking appointments or getting prescribed refills. 

Solution- A complete revamp with an informative, accessible website featuring standardized visual guidelines, incorporating online appointment booking and refills delivery functionality.

After

Before

The Process

Research

What was the other problem with the old design? I wanted to gain a deeper understanding of problem areas with the following research methods.

image5.png
I conducted 5 remote virtual usability testing with exotic pet owners to understand user concerns
text-survey.png

Analyzed three months of customer call data including call time, frequency, and duration. 

8_edited_edited_edited.jpg
Reviewed last 6 months of website analytics to understand which pages users are experiencing friction and dropping off
What-is-Usability-Testing.jpg
Conducted an in-depth competitive analysis to discern competitors' strengths, identify areas of excellence, and pinpoint areas requiring improvement.

Insights & Design Opportunities

Based on preliminary research, it was observed that 80% of users contacted the hospital seeking information readily available on the website. Additional findings also revealed that 100% of users faced challenges locating desired information such as insurance details and vet information, with 60% of users not progressing beyond the landing page.

solution

Before

01

Unorganized Information  

The website’s information architecture does not work for a hospital serving so many different types of animals as people tend to look for all resources related to a specific animal type in one place. 

The existing website also exhibits an excess of menus, with one located in the header and another positioned just below the banner image.

"

"I want to know all the information about my pet at one place" P1

old website.png
old website1.png

The animal category page provides only a basic introduction, with other essential information scattered throughout the website.

After

The previous website’s information architecture did not match users’s mental models which caused frustration in finding the relevant information. 


I used Card Sorting, Tree Testing, and flow maps to ensure clear navigation.

 

Finding 

 Users strongly associated services, pet guides, and specialists with each animal type rather than by resource categories

4.gif

Navigation by animal type

Process

Card Sort

To solve the information navigation issue, I developed 38 cards on Optimal Workshop following standard card sorting protocols, engaging participants who are current hospital patients. Of the 16 completed card sorts, 94% of participants were pet owners.

 

Most participants categorized services, forms, pet guides, specialists, and products related to a specific animal under the corresponding animal category.

Screenshot-2023-11-10-at-6.08.11-PM.png
Screenshot-2023-11-10-at-6.08.50-PM.png
Screenshot-2023-11-10-at-6.08.58-PM.png
Screenshot-2023-11-10-at-6.08.30-PM.png

Information Architecture

The results from card sorting were used to create an IA that shows the underlying organization and structure of the website.

Group 1000000948.png

Before

02

Flawed Appointment Booking System

The existing website lacks online appointment booking functionality, requiring clients to schedule appointments via phone or in-person visits.

While the website provides forms for patients, it lacks clear instructions on which forms to complete before the appointment.

 

Presently, clients must download, print, and fill PDF forms, resulting in a cumbersome and non-environmentally friendly process.

"

“How can I make an appointment if I decide to go?” P3

11.png

The current system is increasing reliance on physical documents which is difficult to maintain and elevates the risk of misplacement.

12.png

After

Online Appointment request

The prior website lacked online appointment booking options, relying solely on calls. We introduced features for online appointment requests and form submissions. Additionally, a patient directory was implemented for easy access to past records.

I used low-fidelity prototypes, usability testing, and multiple iterations to ensure clear CTA.

 

Feature 

   Step-by-step appointment  guide on the home page
  Easy web form to fill out

21.01.2024_21.32.02_REC-ezgif.com-video-to-gif-converter.gif

Process

Iteration and Usability testing

To address the feature of online booking, we added a progress bar on the home page, guiding users through the appointment process. This process bar will guide the participants on their current status and all the remaining tasks they need to complete before the in-person appointment. 

However, the participants initially found it confusing because we only covered the most important steps but based on their feedback we itterated and went into detail with all the possible steps needed till the hospital visit to avoid any confusion.  

progress bar.png

First iteration covered only 3 steps- Request an appointment, confirm appointment dates and fill out forms prior to visit.

progress-bar-usability.png

The second iteration included all the process before visiting the hospital however the participants found it confusing because they wanted to see the whole journey of their experience including visiting the hospital.

high fidelity.png

The current iteration covers both before after and visit steps and virtually guides the user when they have achieved the current task and guides them to the next one. 

Before

03

The current website features a product page showcasing available products but presently, customers can only view the products online, but physical presence at the hospital is required for both booking and pickup.

Also, the current product page's presentation is disorganized with inconsistent information and layout.

"

“I can see the available products but how can I order it? Do I need to visit hospital for it?” P2

No online delivery of products

product page_1.png

Products are not segregated based on animal type and are all clubbed together with some having no description attached to them. 

product page.png

After

Online product booking request

The prior website lacked online booking of products.With the new relaunch, I introduced a form feature where users can select all the products and pick up the date and time when they want to get it delivered. They can also sign in. for a monthly subscription model to get a monthly delivery of meds.
u

 

Feature 

   At-door delivery of products
  Subscription plans for regular customers.

2.gif

Before

04

The current website lacks a cohesive visual identity, resulting in an inconsistent look and feel that fails to evoke a sense of credibility, professionalism, inclusivity, and community engagement. 

The current website also lacks responsiveness and is not WCAG compliant making it harder for a diverse section of people

"

“This is a little chaotic and old, it probably reflects the clinic as well.” P2

Poor Branding and Design system

The lack of distinct color assignments for various animal types, inconsistency in font usage, and issues with text readability in various sections are notable areas requiring attention.

branding.png
Screenshot-2023-11-10-at-5.52.12-PM.png

After

Updated branding and Design System

The user research showed that users were put off by the overall look and feel of the site and did not want to engage with the content. The content was also severely outdated.

I analyzed the design system, and accessibility to develop a welcoming experience. I also worked with the staff to include updated information on their policies and team.

 

Feature 

  Vibrant and modern branding
  New and easy design system

3.gif

Process

Brand tenents for visual design

I created a branding survey and sent it to our stakeholders to understand how our users think and feel about the brand. I then analyzed all the results and developed 3 brand tenets and translated them into design translations to help inform decisions in the design process.

Brand tenet 1: Inclusive

Evergreen Exotic Animal Vet Hospital provides equal access to all exotic animal species and their owners regardless of age, experience, or number of pets.

Design translation:

  • Attention to accessibility in navigation and alternative text

  • Reduce cognitive load by using single font with varying weights

Brand tenet 2: Welcoming

Evergreen Exotic Animal Vet Hospital is a non-corporate, and family-owned business that promotes a welcoming community for their clients

Design translation:

  • Color categorization by animal type to add vibrance and organization

  • Show real photos of animals and the community

Brand tenet 3: Expert

Evergreen Exotic Animal Vet Hospital delivers the highest quality, professional care for small, companion exotic animals and birds

Design translation:

  • Use of geometric hexagon motif for consistency and structure

  • Clean background with accent colors for simple and professional experience.

Exploring color pallets and iterations

Group 36.png
Group 36.png
Group 36.png
1 color.png
1 color.png

Final Designs

Group 1000000947.png

IMPACT

Minimized the incoming calls by 20%, prioritizing outgoing calls, and reduced call duration by 15%

Reduced time on task by 15% and decreased the website bounce rate by 25%​.

Created a visual identity that feels welcoming, inclusive, and professional

Improved the accessibility and usability of the applications to follow WCAG guidelines

Takeaways & Reflection

Big Logo.png

STAKEHOLDER ALIGNMENT

Effectively managing stakeholder expectations was crucial. I facilitated regular discussions to ensure every stakeholder's unique perspective was heard and considered. Balancing these needs with the long-term product vision was essential

STRUCTURED RESEARCH IS CRUCIAL

Structured research plays a pivotal role in the process of website redesign. It serves as the foundation upon which informed decisions are made, guiding the redesign process towards meeting the goals and expectations of both the stakeholders and the target audience.

bottom of page