A world without creativity is like a Harry Potter’s novel without magic. Having been involved in the field of design for over seven years, I frequently embark on a quest to discover new and innovative solutions to the unique challenges that come my way.
By day, I am a UX designer, while my evenings are devoted to my passion for painting. I am currently pursuing a Master's degree in Human Centered Design and Engineering at the esteemed University of Washington in Seattle. In addition to this, I hold a Bachelor's degree in Communication Design and a Master's degree in Visual Design.
Prior to joining the University of Washington, I served as an Interaction Designer with the UX Consulting Team at ValueLabs, and also worked as a Visual Designer with Dorling Kindersley books.
When I'm not engrossed in my work, I take pleasure in traveling, meeting new people, taking photographs, and indulging in my love for food. As a painter, you will often find me engrossed in my canvas, lost in the act of creation.
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.
I conducted 5 remote virtual usability testing with exotic pet owners to understand user concerns
Analyzed three months of customer call data including call time, frequency, and duration.
Reviewed last 6 months of website analytics to understand which pages users are experiencing friction and dropping off
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.
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
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
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.
Information Architecture
The results from card sorting were used to create an IA that shows the underlying organization and structure of the website.
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
The current system is increasing reliance on physical documents which is difficult to maintain and elevates the risk of misplacement.
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
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.
First iteration covered only 3 steps- Request an appointment, confirm appointment dates and fill out forms prior to visit.
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.
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
Products are not segregated based on animal type and are all clubbed together with some having no description attached to them.
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.
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.
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
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
Final Designs
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
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.