Projects

About Me

Get In Touch

Healthcare

CASE STUDY - Enhancing UX of Mayo Clinic Website

Redesigned Mayo Clinic’s site to streamline navigation, boost accessibility, and improve UX—cutting appointment scheduling time by 20%.

Healthcare

CASE STUDY - Enhancing UX of Mayo Clinic Website

Redesigned Mayo Clinic’s site to streamline navigation, boost accessibility, and improve UX—cutting appointment scheduling time by 20%.

Industry

Healthcare

Project

Web Redesign

Timeline

Aug 2023 - Nov 2023

My Role

UX Designer

🩺 Context

Mayo Clinic is one of the most trusted names in global healthcare, serving millions of patients each year. Despite its clinical excellence, the website’s user experience didn’t reflect the same standard. Core flows like Request Appointment, Log In, and Create Account were difficult to navigate, leading to usability concerns and friction in accessing vital medical services.

⚠️ Challenge

Patients struggled to complete critical tasks due to unclear navigation, inconsistent UI patterns, and a lack of accessible design. These barriers created frustration and delayed access to essential healthcare services — undermining trust in the digital platform.

🎯 Objective

Redesign the user experience for the Request Appointment, Log In, and Create Account flows to streamline navigation, improve accessibility, and enable patients to connect with care faster and more intuitively.

Results

20%

Faster Appointment Scheduling

Improved

Accessibility & Site Flow

Tools Behind the Work

Design Process

The UX improvement process for the Mayo Clinic website began with competitive analysis, user research, and heuristic evaluation to uncover key pain points. This foundation supported an iterative approach involving data analysis, ideation, prototyping, testing, and final recommendations for a more user-centered design.

STEP 1

STEP 1

In-depth Research

Conducted competitive analysis and heuristic evaluations.

Heuristic Evaluation:

Key findings:

1. Clear indicators of system status required.

2. Recognition over recall emphasized.

3. Appointment booking should be quick and straightforward.

4. Emphasis on error prevention and consistency.

Competitive Analysis:

A competitive analysis of healthcare institutions, including the Mayo Clinic, Cleveland Clinic, and Johns Hopkins Medicine, uncovered clear-cut methodologies for effective navigation and information architecture.

Conducted competitive analysis and heuristic evaluations.

Heuristic Evaluation:

Key findings:

1. Clear indicators of system status required.

2. Recognition over recall emphasized.

3. Appointment booking should be quick and straightforward.

4. Emphasis on error prevention and consistency.

Competitive Analysis:

STEP 2

STEP 2

Design

Wireframes

Transformed user insights and Key findings from the research phase into visually appealing interfaces.

Wireframes

Transformed user insights and Key findings from the research phase into visually appealing interfaces.

STEP 3

STEP 3

Prototype

Created high-fidelity prototypes using tools like Figma, incorporating improved visual elements and intuitive interactions.

STEP 4

STEP 4

Original Design

Refined Design

Claim Status Tracker

Know where things stand

A simplified claim tracker with status indicators reduces confusion and support requests.

Original Design

Refined Design

Favorites + Scheduling

Personalized provider experience

Students can bookmark providers and get notified when appointments become available.

Original Design

Refined Design

A complete view of the redesigned experience—from onboarding to scheduling.

STEP 5

STEP 5

STEP 6

STEP 6

Testing

Method of Evaluation

SUS and Task Usability Temaplate

SUS and Task Usability

Temaplate

Where

via Zoom

30+

No.of Participants

Total Tasks

79.2

SUS Score

20%

User Friendliness Score

Tasks for the Participants

1. Access your healthcare information, such as your ID card

2. Find the provider info within the app.

3. Schedule an appointment with an in-network healthcare provider for a routine check-up.

4. Find your upcoming appointment information.

5. Access your claims and claim history.

Participant Comments:

Participant 1: "Wow, that was easy! I found my ID card right away."

Participant 2: "Ah, there it is! My upcoming appointments are right on the main screen. Easy to find."

Participant 3: "finding my ID card was a breeze! It was right where I expected it to be."

Participant Comments

Participant 1: "Wow, that was easy! I found my ID card right away."

Participant 2: "Ah, there it is! My upcoming appointments are right on the main screen. Easy to find."

Participant 3: "finding my ID card was a breeze! It was right where I expected it to be."

Screenshots from test sessions

Observations

1. Participants found it intuitive and straightforward to find their ID card information.

2. Participants encountered minor navigation challenges or had to explore a couple of sections of the app before locating the provider information.

3. Participants were able to quickly locate the upcoming appointment information.

4. Participants had a positive experience accessing their claims history.

Results

20%

Faster Appointment Scheduling

25%

Accessibility & Site Flow

Recommendations

1. Enhance provider information visibility: Increase the visibility of provider information by implementing a dedicated section for provider details to ensure that users can easily find and access this essential information.

2. Streamline appointment scheduling: Simplify the appointment scheduling process by providing clearer instructions and guidance. To improve usability by incorporating features such as calendar integration and real-time availability updates.

STEP 7

STEP 7

Next Steps

Analyze Test Results
Review usability testing feedback to extract actionable insights and identify areas for improvement.
Iterate the Design
Refine wireframes based on test findings to ensure stronger alignment with user needs and expectations.
Prototype Refinement
Update the interactive prototype to reflect design improvements and enhance overall usability.
Optional Additional Testing
Conduct follow-up testing, if needed, to validate refinements and ensure the solution remains user-centered.
Finalize Design for Handoff
Prepare detailed design specifications and documentation for a smooth handoff to development.