Case study

Discovery & Research

Client Meetings

I began with an initial meeting with the Magrabi team to understand their objectives for the redesign, previous user feedback, and the specific challenges they encountered with the old website. Magrabi emphasized a need for improved accessibility to serve their patients, especially those with vision impairments.

‍

Competitive Analysis

I conducted a competitive analysis to identify common features and industry standards in healthcare websites. This included assessing how competitors handled accessibility, information hierarchy, and appointment booking. Key findings highlighted useful features such as font adjustments, screen readers, and brightness controls.

‍

User Interviews

I conducted interviews with 19 users (Eye Care: 5 patients, 3 family members, ENT: 3 patients, 2 family members, Dentistry: 3 patients, 3 family members). This user pool was specifically chosen to represent the various needs of Magrabi’s patients. The insights were invaluable:

• Users with vision impairments found navigating the previous site difficult.
• Family members needed quick access to essential information like appointment booking and service details.

‍

Key Insights & Problem Definition

Based on the research findings, we identified key areas for improvement

• Accessibility Needs: Patients with vision impairments required features that improved readability and usability.
• Enhanced Navigation: Users needed a more intuitive layout to easily find services, locations, and appointment booking.
• Clear Visual Hierarchy: Information needed to be displayed in a way that made important sections and actions easy to locate.

‍

Solution Ideation & Design Planning

With a clear understanding of user needs and client goals, I developed a plan to implement solutions that would address accessibility, readability, and navigation improvements

• Screen Reader: Added a screen reader option to assist visually impaired users by providing audio navigation of the website.
• Font Size Control: Included adjustable font sizes so users could personalize the text size for better readability.
• Brightness Control: Enabled users to control the screen brightness to reduce strain and improve visibility in different lighting conditions.
• Line Height Adjustment: Allowed users to increase line height for better text clarity and easier readability.
• Highlighted Sections: Important sections were designed with highlight options to make essential information easy to locate.

These solutions formed the backbone of our accessibility and usability enhancements for the new website.

‍

Wireframing & Prototyping

Wireframing

I created wireframes to map out the structure and layout of each page. These wireframes focused on simplifying navigation, establishing clear visual hierarchy, and making key actions (like appointment booking) accessible from multiple points on the site.

‍

Low-Fidelity Prototyping

Using Figma, I developed low-fidelity prototypes to test the basic layout and navigation flow. These prototypes incorporated the planned accessibility features and layout refinements, allowing stakeholders to visualize the intended changes early in the process.

‍

Usability Testing & Iterations

Prototype Testing

I conducted usability tests with patients and family members using the Figma prototypes. Each accessibility feature—screen reader, font and brightness control, line height adjustment, and section highlights—was evaluated to confirm that it met user needs.

‍

Feedback and Iterations

Based on user feedback, I made several refinements

• Enhanced the visibility of the screen reader toggle.
• Adjusted the brightness control for smoother transitions.
• Repositioned the section highlights to ensure that essential information stood out

‍

Final Design & Development Handoff

Finalized Design

The final design achieved a clean, user-friendly interface that streamlined access to services and featured intuitive controls for accessibility. Key pages, such as service descriptions, appointment booking, and contact information, were redesigned to make navigation seamless and efficient.

Handoff to Development

I documented each accessibility feature with clear specifications for the development team to ensure smooth integration. Each setting was tested in the final product to guarantee consistency across devices and browsers, helping to create an accessible experience for all users.