top of page
This Widget Didn’t Load Refresh this page to try again.

Crafting an Inclusive
Digital Experience

Revamping a medical product for the US market to ensure ADA compliance and drive wider adoption.

Project Objectives

Revamp the Medicare Prepaid Payment Plan portal to offer an intuitive, accessible, and seamless experience, ensuring it meets the needs of all users.

Usability Enhancement for Senior Citizens

Focus on simplifying navigation and ensuring easy access to key features, making the platform more intuitive and user-friendly for senior citizens.

Ensuring ADA Compliance for All Users

Ensure the portal is fully ADA-compliant, providing an inclusive experience with support for screen readers, keyboard navigation, and other accessibility features.

UI Modernization and Responsiveness

evamp the portal’s design to meet modern industry standards, delivering a clean, responsive, and seamless interface that works across various devices and screen sizes.

User Persona

Emma Reed, a 67-year-old retired social worker with low vision, lives in an urban area. She uses the Medicare Part D portal to manage prescription costs and coverage. Emma seeks a user-friendly, accessible interface that supports screen readers and high-contrast settings for efficient navigation.

Goals

  • Manage Prescription Cost
     

  • Understand Coverage
     

  • Access information quickly

Challenges

  • Screen Reader Compatibility
     

  • High-Contrast and Scalable Text
     

  • Intuitive Navigation

The App

UX Enhancements

We conducted a comprehensive UX audit of MPPP360's legacy app using NN Group's methodology and presented our findings and proposed solutions to the stakeholders.

/01

Refining Visual Hierarchy according to Gutenberg Diagram

The page layout lacked alignment with visual hierarchy principles, leading to ineffective content and CTA placement. By realigning the layout according to Gutenberg's principles, we established a clear visual flow, positioning key elements like CTAs on the right side to align with natural reading patterns and boost user engagement.

Gutenberg Diagram

Gutenbery Diagram

Old Landing Page

New Landing Page

Picture 18.png

Smartphone
320px–480px

Tablet
481px–1025px

Desktop
1025px +

/02

Implementing Responsive Design with Breakpoints

We developed responsive prototypes in Figma using key breakpoints for three screen ranges: small for smartphones, medium for tablets, and large for desktops. By setting breakpoints at these ranges, we leveraged Figma's auto-layout and constraints to ensure elements like touch targets, text, and images adjusted dynamically at each breakpoint. This approach ensured a seamless, optimized experience across all device sizes.

/03

Streamlining Information Hierarchy for Better Usability

The lack of clear information hierarchy caused visual clutter and hindered navigation. By prioritizing and organizing content with clear headings, logical grouping, and strategic use of visual cues, we enhanced readability and improved overall user flow.

Old Card Design

New Card Design

Old Design: The FAQ page was cluttered, with questions poorly categorized, making it difficult for users to find relevant information.

New Design: The FAQ page follows an industry-standard layout with clear categories and a help section for improved navigation.

Filter and Sort Options

/04

Improving Data Retrieval Efficiency for Better User Experience

Inefficient search and complex table design hindered data retrieval. Through workshops with stakeholders, we identified key filtering and sorting parameters. We introduced autocomplete search, filtering, sorting, and a simplified table design with consistent color patterns, making data access faster and clearer for users.

Optimized Mobile Navigation and Information Architecture

The existing mobile navigation and information architecture were not optimized for touch interactions or smaller screens. We restructured the IA, reorganizing and categorizing content and features within the hamburger menu and top app bar to prioritize key actions. By refining the content pathways and improving spacing, we created an intuitive, touch-friendly experience that ensured seamless navigation on mobile and tablet devices.

Elevating Accessibility

User interviews with individuals facing accessibility challenges, particularly visual impairment, provided valuable insights. Based on their feedback, we improved color contrast, standardized button designs, and optimized screen reader compatibility to create a more accessible and inclusive application.

/01

Standardizing Button Design

We implemented a standardized design system with clear sizes, colors, and placements to define button roles and priorities. Large touch targets and consistent screen reader labeling were added to enhance interaction and accessibility.

 

  • High-Contrast Colors: Ensured sufficient contrast between buttons and backgrounds according to WCAG guidelines.
     

  • Accessible Focus States: Added visible focus indicators to assist keyboard and screen reader users in navigation.
     

  • Large Touch Targets: Designed buttons with ample size for easy interaction on touchscreens.
     

  • Consistent Labeling: Provided clear and consistent labels to help screen readers identify button functions.

Old Design: A flat button layout with no hierarchy or defined button states.

New Design: Implemented a clear button hierarchy with distinct states.

/02

Enhancing UI Readability with Accessible Colors

The lack of an accessible color palette with insufficient contrast between text and backgrounds made it challenging for users with visual impairments to navigate the UI. To address this, we implemented a standardized design system by adhering to WCAG guidelines to achieve AAA compliance, ensuring optimal readability for all users.

Key improvements included:
 

  • WCAG AAA Compliance: Achieved a 4.5:1 contrast ratio for standard text and a 7:1 ratio for large text.
     

  • Support for High-Contrast Screens: Ensured compatibility with high-contrast screen settings for visually challenged users.

Old Design: The colors used failed WCAG contrast tests, with a ratio of 2.06:1, falling below the permissible ratio.

New Design: Adjusted color palette to meet WCAG guidelines, ensuring a contrast ratio of at least 4.5:1.

/03

Interactive and Responsive Input Fields

The original input fields lacked visual focus indicators, error messages, and placeholders, making navigation and error correction difficult, particularly for screen reader users. We revamped the input field designs to improve usability and accessibility.

Key updates include:
 

  • Enhanced Focus Visibility: Implemented visual focus indicators like border changes and background color shifts for better navigation.
     

  • Integrated Clear Error Messages: Added specific, actionable error messages linked to input fields to guide users in correcting mistakes.
     

  • Descriptive Placeholders: Included informative placeholders to clarify required information and support screen readers.

Old Design: The layout didn’t adhere to mobile design standards, lacked screen reader support, input field states, and error messages.

New Design: Added screen reader labels, defined input states, and included error messages for better usability.

Project Highlights

Throughout the course of this 7-month project, led by me with two other designers, several key improvements were made to enhance accessibility and user experience. The following highlights showcase the major achievements and outcomes:

Comprehensive UX

Auditing

What started as a UX audit project expanded into a full-fledged revamp of multiple products, thanks to positive feedback and praise from stakeholders.

Design System & Feature Integration

Developed a new design system from scratch, which will serve as a valuable asset for future UI changes and feature integration.

User Testing & Feedback

Conducted comprehensive testing with the accessibility team, incorporating feedback from users with accessibility needs to drive impactful improvements.

bottom of page