Pro Brite

— Designing a conversion-focused website for a local business.
Link to project
Integration icon

Role

UX Research
Brand Identity
Information Architecture
Usability Test
Integration icon

Tools

Figma
Maze
Miro
Whimsical
Integration icon

Timeline

80 hours
(4 weeks)

Overview

Pro Brite Dental is a local business that was founded by Dr. Tran in 2016. The clinic believes a good oral health contributes to overall well-being and strive to provide the best dental care with compassion. In this project, I helped the business improves customer retention by redesign the current website and apply new branding.

Problem

The present website of Pro Brite lacks information and is challenging to navigate, thereby limiting appointment bookings to phone calls only, with no online booking option provided.

Survey & User Interviews

To initiate my research, I opted to use guided questions as a starting point. These questions included: How do patients go about selecting their trusted clinics? What features would alleviate the intimidating nature of medical-related websites? To obtain answers, I conducted user interviews and surveys, focusing on qualitative inquiries.

Feel overwhelmed with medical-related websites since it is hard to navigate

Is motivated to visit the business website if it contains useful information for their research

Prefers to book appointment online unless there is an urgency, she will call the clinic directly

It is necessary to know the reviews, which dentists they will see at the appointment & potentially the cost of service

Is motivated by convenience and access to nearby local dental places

Inability to search for insurance network frustrates him

Competitive Analysis

Integration iconIntegration iconIntegration iconIntegration icon

Informative content

Most dental sites aim for a minimal but include important for their patients to learn more about the clinics. Content are grouped in categories for ease of navigation.

Intuitive navigation

Clear categories enhance the search process with prominent CTA buttons.

Online booking

Straightforward, has options to select date/time, reason for visit, and preferred dentist.

Transparency

Services include prices where applicable. Partnered insurance network are listed for patient reference. Financing options are also included.

How might we guide users to the right information and schedule appointments easily?

Information Architecture

I soon discovered the importance of intuitive navigation in medical-related websites and easy appointment booking. Despite the differences in dental clinic experience, gender and ages, all participants share the same expectation on the content they want to look for on a dental website. This formed the question:
Feature Prioritization for Pro Brite's new site
Site map
How to search for a service and make an appointment

Solution Ideation

While transforming pain points into ideas, I remained mindful of the inherent complexity of medical-related website. My goal was to create an interface that offered intuitive navigation, enabling users to effortlessly understand the services and book appointments. I commenced the design process by crafting mid-fidelity wireframes and gradually progressed towards hi-fidelity wireframes.
Early concept for Pro Brite's website

Branding

After defining the IA, I moved on and visualized the brand identity. Per request, the stakeholders wanted a logo and color palette that evoke their brand values. One thing they mentioned was to keep their original blue as the primary color.
Pro Brite UI Kit

Usability Test

I conducted the testing both in person and remotely using Maze and Zoom. The goals are to validate the user flows that I constructed, uncover users' frustrations and identify potential improvements. All participants will complete three tasks: schedule a cleanings & exams service, sign up for the membership program, and submit a quote for a service.

"I was able to complete the tasks. Overall design feels professional. Simple language could be used to replace jargons."

icon
Chloe P.

"Did not feel overwhelmed, informative, and easy to navigate."

icon
Tysha H.

Final Design

When translating the pain points into ideas, I kept in mind how complicated personal finance apps are and aimed to design the interface with intuitive navigation for users to be able to complete different tasks. I started with low-fi wireframes and developed into mid-fi wireframes.

Takeaways

This project presented an exciting opportunity for me to assist a local business with five years of experience in rebranding and reconstructing its website. The primary goal was to enhance customer retention and increase conversion rates by creating an informative and user-friendly platform. I aimed to facilitate easy access to services and appointment scheduling for patients, striking a balance between providing useful information and avoiding overwhelming the visitors.

The logo design phase posed a significant challenge, requiring multiple sketches to find the design that effectively conveyed the brand values and ensured memorability. By prioritizing the needs of both users and the business, I successfully completed the project. Looking ahead, I am eager to tackle future projects that involve designing patient profiles, enabling users to update personal information, insurance details, and conveniently schedule appointments based on their previous visits.
Continue reading

Other projects

Link to project

La Madeleine

Streamlining highly-customizable order flow
Moner main image

Moner

Optimizing finance management
Link to project

Unifocus

Hotel operations. Made simple