Dental Clinic Website Redesign
UI/UX Case Study

1. Introduction
2. Problem Statement
3. Design Thinking Process
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.
User Personas
5. Identified Pain Points and Desired Outcomes
6. Proposed Solution
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:
  • Services discovery flow
  • Appointment booking flow
  • Contact the clinic flow
Services Discovery Flow
Appointment Booking Flow

Key focuses: Appointment confirmation with an email and a text message

Contact the Clinic Flow
8. Wireframes
9. Color Tokens

1) Primary brand color → Teal

  • Used for:
    • Primary buttons
    • Links
    • Key highlights

  • The system includes a primary teal palette, an orange accent color, greyscale colors (neutral colors), and a set of semantic colors.
  • To ensure consistency across screens and components, the colors are organized using tokens.

2) Secondary / Accent Color → Orange

3) Neutral Colors → White, black, and greys

4) Semantic Colors → Green, yellow, 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.

Key interactive components include hover and focus states to provide visual feedback and improve usability.

12. Design Concerns and Final UI Designs

Design Concerns

Note: All data shown is fictional and used solely for design demonstration.

Final UI Designs

  • Home Page
  • Online Appointment Booking Page
  • Online Appointment Booking Progress Page

  • Online Appointment Booking Completed Page
  • Online Appointment Booking Success Page
  • All Services Page
  • Single Service Pages

13. Design Insights and Future Steps

Design Insights

Patients value speed and clarity more than visual complexity. Users primarily visit the dental clinic website to quickly find doctor availability, services, and contact options. Reducing visual noise and highlighting key actions like ‘Book Appointment’ significantly improves user confidence and easiness.

Future Steps

Adding available time slots and dentist selection could significantly reduce phone calls and improve patient convenience.