Juan Galavis

Healthcare App Accessible Design System

Overview

Our client, the largest federal health insurance payer with over 5 million members, conducted an audit to assess the accessibility of their mobile application. Their findings pointed out the current state of our client’s digital experiences wasn’t compliant with accessibility guidelines. Due to these findings, our clients recognized the critical importance of equalizing access to healthcare by creating a more inclusive user experience in their digital products. This report, coupled with the fact that accessible experiences can reach a bigger audience, was pivotal for our client to determine the need to update all their digital experiences to meet the Web Content Accessibility Guidelines (WCAG) 2.1 AA, which set the standards to make digital content accessible to a wide range of people with disabilities.

The audit findings also highlighted pre-existing branding issues and pattern inconsistencies. It was determined that these inconsistencies should also be addressed simultaneously with the accessible updates. To mitigate this issue now, and in the future, our client wanted us to create a design system. A design system allows designers and developers to replicate designs quickly by utilizing premade user interface (UI) components and elements that the teams can reuse, reducing the need create components such as date pickers from scratch and risking unintended inconsistency.

To tackle these issues with accessibility and inconsistencies, we created accessible design systems for our client’s desktop member portal and iOS app. However, they also wanted a separate Android design system as well. This case will focus on this new system as we navigated unique challenges with this new system.

My Role

I began by conducting comprehensive background and user research, delving deeply into best practices, and the key pain points of the current app. Working closely with business analysts, product owners, and developers, I translated these insights into actionable design goals that bridged the gap between user expectations and business objectives for the new design system. This collaborative effort allowed me to craft tangible interactive prototypes of the proposed solutions, ensuring that the envisioned design system not only met accessibility standards but also upheld functional integrity and scalability.

The Problem

In the current state, there were inconsistencies prevalent throughout the app, ranging from visual elements to interactive components. Some specific inconsistencies included erratic use of colors, irregular use of font styles, and unpredictable animations and interactions which made harder for users to learn how to use the app. In addition, key WCAG 2.1 AA requirements such as color-contrast minimums and code annotations, were not being met. By creating a design system with accessible components, we aimed to address both problems at once.

Another problem was that until now, the Android mobile app had been following iOS design patterns. This was an issue because it created inconsistencies within the platform and slowed down performance. We carefully considered the pros and cons of adopting an integrated design system versus maintaining two separate systems and ultimately opted for the latter. While acknowledging that managing two distinct design systems would entail an upfront increase in design efforts, the decision aimed to streamline development work. By leveraging the maximum number of native UI components for each platform, we anticipated a reduction in development workload and increased efficiency in delivering a more platform-specific and optimized user experience.

Client Goals

The primary objective was to address WCAG 2.1 AA compliance, ensuring that individuals with diverse abilities could seamlessly navigate and interact with the app. This involved meticulous attention to details such as color contrast, text legibility, and Talkback navigation, a feature designed to assist individuals with visual impairments or blindness in navigating and using their devices. Our commitment to accessibility went beyond compliance, aiming to create an inclusive experience for all users.

Simultaneously, we saw a unique opportunity to remediate other inconsistencies identified during the audit. The design system could become a central repository for standardized UI components, from basic elements like buttons and forms to more complex structures like navigation patterns and layout grids. By establishing a consistent design language, we aimed to elevate the overall user experience and reduce cognitive load for both new and existing users.

Process/Solution

The project unfolded in three distinct phases, first we conducted an audit of the current state of the app and researched the best practices for Android user interface (UI) design. Then we designed solutions using the best practices gathered during the previous phase and iterated on those solutions until we got buy-in from all the involved stakeholders. Lastly, we created the design system where we compiled and systematized the approved designs. Each of these phases were strategically built on top of each other, contributing to the overall enhancement of the app's accessibility, consistency, and scalability for the future.

RESEARCH: UNDERSTANDING OF MATERIAL DESIGN 3 AND BEST PRACTICES FOR ANDROID

During this initial phase, we conducted an in-depth analysis of over 50 screens of our client’s current Android app. This involved a meticulous examination and categorization of each page and its user interface (UI) elements, which helped us identify elements that required changes. In parallel we did a deep dive into Google’s Material Design 3 to better understand the native Android components that we could consider for our client’s design system. Additionally, we explored what other “best in class” Android apps were doing at the time (Q2 2023) to ensure that we were referencing common Android patterns and best practices.

DESIGN SOLUTIONS AND ITERATIONS: CREATION OF A REMEDIATION PROTOTYPE USING ITERATIVE DESIGN.

We leveraged the findings from the Accessibility Management Platform (AMP) report, personas and journey maps previously created for other engagements with this client to create low fidelity wireframes to determine solutions to existing design issues such as fonts, text sizes, brand color and contrast ratios. These low fidelity wireframes allowed us to quickly iterate on visual designs that our client could start approving.

After all these low fidelity wireframes were approved, we collaborated with the mobile app product manager to prioritize key screens based on their significance and impact. Once this order of priorities was agreed on by all stakeholders, we created high fidelity prototypes of each screen using the solutions laid out on the wireframes. This created an accessible and consistent version of the existing app. The presentation of this phase was thoughtfully structured, starting with an overview of the remediated screens, followed by a detailed analysis of each screen. The existing app screen was set side-by-side to the new, accessible version to effectively showcase the improvements made and provided a comprehensive understanding of the changes proposed for all the screens analyzed in the initial research phase. This presentation strategy streamlined the review and approval process keeping the project on a tight timeline.

CREATE DESIGN SYSTEM: COMPILATION AND SYSTEMATIZATION OF THE APPROVED DESIGN SOLUTIONS.

During the third and final phase, we compiled and organized all the components created during the design phase. Working backwards was key for ease of adoption by showing how the high-fidelity prototype screens were made up of reusable components. We leveraged the existing Google Material Design 3 library organization to organize the client’s components. By using this pre-existing organization, we were hoping to further buy-in and adoption by using an organization system that all the stakeholders were already familiar with. Moving forward, the design system that we created will serve as a centralized repository of design elements that designers and developers can leverage to streamline work. Within the design system, we have detailed instructions to guide stakeholders on the use of the design system. The design system doesn’t just have the visual pieces, but also included CSS code snippets that could be leveraged when building each component. The design system may also be easily expanded anytime in the future, with new components added as features are created.

Challenges

Communication with a large and diverse group of stakeholders presented challenges at times. Managing diverse interests and conflicting goals when designing solutions was a major challenge that we mitigated by always referring to WCAG 2.1 AA standards and Material Design 3 as our North Star when conflicts or questions arose. Additionally, education and understanding of the importance of creating an inclusive experience and adhering to WCAG 2.1 standards from business leaders and other stakeholders was crucial for the success of this project. We emphasized the value of accessibility to create buy-in and reinforce the importance of maintaining and leveraging the design system. We found challenges when teaching both technical and non-tech stakeholders how to effectively use the system. We addressed this by teaching them how to use it and why it will improve the mobile app.

Lessons Learned

Accessibility is not solely the responsibility of designers; it's an ever-evolving target that involves everyone in the development process. While UI adjustments are crucial, a significant portion of accessibility enhancements requires backend adjustments and settings. This understanding highlights the need for collaboration among designers, developers, and other stakeholders to address both frontend and backend aspects of accessibility effectively.

Future Iterations

Accessibility is a collective effort that spans through various roles within all the teams responsible for delivering the mobile app. Recognizing that everyone, from designers to developers, plays a crucial role in creating an inclusive user experience is vital. Additionally, and more importantly, accessibility improvements are an iterative process. This design system is the first step towards a more inclusive experience, but regular audits using the latest WCAG standards, collaboration and feedback loops between all teams are crucial for new enhancements and maintaining an accessible mobile app.