The start of an
Accessible Experience
Timeline
2023 - Present
Team
PM, 2 engineers, designer
Role
Research, design systems
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.
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
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 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