LinkedIn



Dental Clinic Website with Online Booking Redesign

UI/UX Case Study

The content of this UI/UX Case Study

  1. Introduction
  2. Problem Statement
  3. Design Thinking Process
  4. Empathy Map and User Personas
  5. Identified Pain Points and Desired Outcomes
  6. Proposed Solution
  7. User Flows
  8. Wireframes
  9. Color Tokens
  10. Typography
  11. Components
  12. Design Concerns and Final UI Designs
  • Role: UX/UI Designer
  • Project: Website + Patient Booking
  • Platform:  Web
  • Design Tool: Figma
  • Focus: Patient Experience

 

Project Disclaimer
To protect privacy and avoid misrepresenting the clinic’s actual services or staff, certain details in this portfolio presentation – including doctor names, images, and other identifying information – have been modified or replaced with representative content.
1. Introduction

This project focuses on redesigning the “Dental Smiles” clinic website along with online appointment booking to improve usability, visual clarity, and patient experience. The goal was to create a modern, easy-to-navigate website that helps users quickly find treatment information, book appointments, and feel confident about the clinic’s services.

2. Problem Statement

The existing “Dental Smiles” website had an outdated visual design, unclear content structure, and difficult navigation.  Patients had limited access to online appointment booking, and therefore, they had to call the clinic, leading to missed calls, booking errors, and patient frustration. They struggled to find important information such as services, clinic details, opening hours, and patient reviews.

3. Design Thinking Process

As this project focused on redesigning an existing experience, I used a user-centered process to identify usability issues, understand patient needs, explore solutions, and validate the redesigned experience.

Design THinking DC Website
4. Empathy Map and User Personas
Empathy Map

This empathy map describes the users’ thoughts, feelings, and behavior when using the existing dental website.

These user personas include the goals and pain points of using the existing website.

  •  

Says

  • I want to book an appointment online.
  • What treatments do they offer?
  • Will they help me to get rid of my dental problem?
  • Is this clinic trustworthy?

Thinks

  • Do they accept online appointments?
  • I’m not sure I trust this clinic based on this outdated site.
  • Do they open the clinic on weekends?
  • Better if they have mention opening hours of the clinic.

Does

  • Click 2-3 other dental clinic sites for comparison.
  • Struggle to find opening hours, contact info and online booking process.
  • Hard to find previous patients’ reviews on the website
  • Looking for the dentists’ bios and the services provide by them.

Feels

  • Frustrated with poor mobile experience.
  • Relief when finding previous patients’ reviews.
  • Uncertain when online booking process is not working properly.
  • Impatient when key information is hard to find.
User Personas
5. Identified Pain Points and Desired Outcomes
Identified User Pain Points

  • Poor usability and navigation.
    • Users struggle to move through sections easily
    • Layout feels unorganized and cluttered
  • Broken/unreliable appointment booking.
  • Lack of trust-building content.
    •  Patient testimonials are hard to find
  • Outdated visual design.

Desired User Outcomes


  • Clear layout with easy navigation sections.
  • A reliable online appointment system.
  • Clear and trustworthy clinic information
    • Services and Dentist details
    • Clinic location and contact information
    • Visible patient reviews/testimonials
  • A clean, updated visual design.
    • This also helps to reflect a high-quality, professional clinic
6. Proposed Solution

Redesign the Dental Smiles Clinic website to improve usability, build patient trust, and increase appointment bookings.

The solution focuses on:
• A modern, clean visual design aligned with the clinic’s brand identity
• Introducing a three-step online appointment booking system
• A clear and intuitive navigation structure to help users find information easily
• A well-structured services section that displays all treatments clearly, with detailed descriptions available for each service

7. User Flows

These user flows depict how a real user moves through the Dental Smiles website to achieve a particular goal.

Include the following main flows:

1)Services discovery flow

2)Appointment booking flow

3)Contact the clinic flow

Services Discovery Flow
Appointment Booking Flow

Key focuses: Appointment confirmation with a text message

Contact the Clinic Flow
8. Wireframes
9. Color Tokens

1) Primary Brand Color → Blue

The system includes a primary blue color palette, greyscale colors (neutral colors), and a set of semantic colors.

To ensure consistency across screens and components, the colors are organized using tokens.

2) Neutral Colors → White, Black, and Greys

3) Semantic Colors → Green, Orange, and Red for success, warning, and error

10. Typography
“Roboto” is used as the primary font.

11. Components

Reusable UI components are created to ensure visual consistency, faster design iteration, and a scalable interface.
12. Key Design Decisions and Final UI Designs

Key Design Decisions

  • Simplifying Online Appointment Booking – Design Decisions

A look at the key design decisions and the reasoning behind them. 

1) Three-step sections to reduce cognitive load
2) Button Design – Disabled continue button with validation feedback
3) The back button preserves all entered data.
4) Entering email addresses for patients is optional
 
5) Icons on buttons – Improving action recognition

Final UI Designs

Final UI designs are presented as

01 — Home Page
02 — Appointment Booking
3 — Booking Success
4 — All Services
5 — Single Service Page (Template Design)
1) Home Page 
Full Page UI
  • This is the complete view of the “Home Page”, showcasing the overall visual design and content hierarchy and making appointment booking immediately accessible.

 

Key highlights

  • Primary CTA buttons
  • Trust-building content
  • Team
  • Services overview

  • Patients’ review

Desktop Viewport Preview
  • This is showing the above-the-fold experience before scrolling.

  • Above-the-fold content varies across screen sizes and resolutions.

2) Online Appointment Booking (A three-step booking flow)
Step 01 –  Patient Information Page (Blank State)
Full Page UI

  • This is the complete view of the “Online Appointment Booking – Patient Information Page” (Blank State).

Key highlights

  • The online appointment booking form is designed in three sequential steps.

  • First is designed for “Patient’s Information.” The continue button is disabled at this stage.

Step 01 –  Patient Information Page (Filled State)
Full Page UI

  • This is the complete view of the “Online Appointment Booking – Patient Information Page” (Filled  State).

 

Key highlights

  • The continue button is enabled for correct user inputs.

Step 01 –  Patient Information Page (Warning State)
Full Page UI

  • This is the complete view of the “Online Appointment Booking – Patient Information Page” (Warning State with warning banner for validation errors).

Step 02 –  Appointment Information Page (Blank State)
Full Page UI
  • This is the complete view of the “Online Appointment Booking – Appointment Information Page” (Blank State).

 

Key highlights

  • At this stage, the stepper displays the Patient’s Information step in green, indicating that users have already completed it.
Step 02 –  Appointment Information Page (Filled State)
Full Page UI

  • This is the complete view of the “Online Appointment Booking – Appointment Information Page” (Filled State).

Key highlights

  • Doctors are presented using distinct states so patients can quickly understand which doctors can be chosen for their selected appointment date.
Step 03 –  Confirm Appointment  Page (Summarized Entered Details)
Full Page UI

  • This is the complete view of the “Online Appointment Booking – Confirm Appointment Page”.

 

Key highlights

  • A clear summary of all booking details before final submission – giving patients a full review  before they commit.
Step 03 –  Confirm Appointment  Page (Loading State)
Full Page UI
  • This is the complete view of the “Online Appointment Booking – Confirm Appointment Page” (Loading State).

 

Key highlights

  • A processing screen that prevents duplicate submissions while the booking is being confirmed
3) Online Appointment Booking Success Page
Full Page UI

  • This is the complete view of the “Online Appointment Booking Success Page.”

 

Key highlights

  • Booking confirmed – the patient receives a reference number and appointment summary.

4) All Services Page
Full Page UI

  • This is the complete view of the “Services We Provide Page.”

5) Single Service Page — Template Design
Full Page UI

  • This is the complete view of the “Single Service Page – Template Design.”

  • Shown here –  Dental Consultation Page.

  • This template is applied across all  services across 5 categories.