The start of an

Accessible Experience

Timeline

2023 - Present

Team

PM, 2 engineers, designer

Role

Research, design systems

Color palette showing passing color contrast

Updated color palette for the flagship app based on WCAG guidelines

Overview

In 2023, I collaborated with a team comprising two engineers and a product manager at Cambridge Mobile Telematics (CMT). We were tasked with conducting a comprehensive overhaul of accessibility standards in our flagship mobile app. This project marked the start of CMT placing inclusivity at the forefront of our design approach.

I did a complete update of our color palette to adhere to WCAG 2.2 contrast guidelines and addressed over 60 touch target issues in our app in order to move towards creating a more accessible user experience.

These updates are currently getting applied to all 30+ of our white label app customers.

Mockup showing text not passing contrast ratios

Background

Our flagship app is used as the template for our customer’s white label apps, and our customers look to us to incorporate best practices in our app, such as accessibility.

In 2023, accessibility started becoming more of a concern for our customers. Multiple customers surfaced concerns about color contrast throughout their app, which prompted to us to the root of the issue - our flagship app.

Examples of failing text contrast that customers had raised concerns about in their apps.

Execution

Spreadsheet showing touch target values for CMT's app, DriveWell Go

The engineers started by using a plugin and doing an audit of all tappable items, assessing their compliance with touch target requirements. They then compiled a list of UI elements requiring adjustment in our mockups to meet the specified touch target sizes for each operating system.

Next, I updated the UI components/elements in the design system to either increase in size, or to include padding that would allow the component to achieve the required touch target size (iOS 44 px, Android 48 dp).

Color palette accounting for accessibility

Color palette before the update

Color palette after the update

Finally, I audited and then revised the color palette in the design system to ensure a minimum of AA passing contrast. I used this accessibility update as an opportunity to streamline colors and improve documentation, aiming to make the design system more user-friendly for others at CMT.

The Impact

In addition to meeting our customer’s needs, this project has significantly benefited our company. The research conducted has provided valuable insights into accessibility best practices, which we’ve been successfully implementing across both new and existing products and features. We recognize there’s still much more we can do to improve accessibility in our app; this project is just the start.

  • +500k

    Active users receiving an enhanced user experience

  • 30+

    Customer apps are receiving accessibility updates

  • 9 colors

    Edited in order to meet a minimum contrast level of AA

  • 60+

    Touch targets across iOS and Android corrected to adequate sizing

Previous
Previous

Design System

Next
Next

Version Control