Implementing an accessible tokenised new design system
To comply with my non-disclosure agreement, I have omitted confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Whispir.
Our mission is to create a Design System that passes AAA+ accessibility standards saving 40% of our teams' time
Accessibility Tools
Chrome screen reader extension
macOS > Accessibility > VoiceOver
Time Frame
12 months
Role
Head of Product Design
Team
Product Design Lead: Hazel Chen
Product Designer: Janie Pham
Full stake Engineer:
Jelo Rivera
Our Impact
-
Our Design System ensures consistency and flexibility across our digital offerings using design tokens, bolstering brand identity.
-
Design tokens empower teams to apply standardised elements efficiently.
-
Proactive adherence to accessibility standards mitigates legal risks and saves resources.
-
Streamlined processes driven by design tokens expedite design creation for designers and implementation for engineers, resulting in faster delivery of user-centric solutions.
Watch our video demonstration showcasing how design tokens simplify the management of diverse product themes within Whispir, including light and dark modes.
The catalyst for change
How It Began
The motivation for developing a new design system stemmed from a revelation from an accessibility audit conducted on September 28, 2021, by the Centre for Inclusive Design. The comprehensive audit underscored the necessity for improvement, revealing that the then-existing components (UI Lib 2.0) achieved a modest 57% Accessibility Compliance against the rigorous standards outlined in the WCAG accessibility guidelines, encompassing up to and including 2.1 Level AA. This pivotal revelation spurred our commitment to crafting an inclusive and accessible design system that prioritises equitable access for all users, marking the onset of our journey towards a more universally inclusive digital landscape.
Our approach
Through extensive research and collaboration, we developed a new design system to address accessibility shortcomings in UI Lib 2.0. Engaging users, experts, and our team, we defined clear goals and specifications.
Leveraging design tokens and collaboration tools, we created a flexible, accessible design language. Implementation involved gradual rollout across products, with continuous testing and refinement to meet WCAG 2.1 Level AA standards.
VoiceOver Accessibility Tool for our new feature - ComposeAI
Our team's dedication to accessibility standards has led us to a significant milestone for Whispir.
Return of Investment
Total Effort = Implementation Time spent X No. of times Implemented in Product UI
Using a benchmark of 30 implementations in Product UI for calculation in this case study.
-
Without a Design System:
20 hours = 5 hours design + 10 hours engineering + 5 hours maintenance
0% Efficiency gain20 hours effort x 30 times implemented in Product UI = 600 hours Total Effort
———————————————————
With a Design System:
40 hours = 10 hours design + 15 hours engineering + 10 hours maintenance[including initial one-time set up & implementation]
.6 hours = 2 hours design tokenise time + 4 hours engineering tokenise time
64% Efficiency gain40 hours One-Time set up & Implementation + (6 hours tokenise x 30 times implemented in Product UIs) = 220 hours Total Effort
-
Without a Design System:
140 hours = 40 hours design + 80 hours engineering + 20 hours maintenance
0% Efficiency gain140 hours effort x 30 times implemented in Product UI = 4,200 hours Total Effort
———————————————————
With a Design System:
260 hours = 60 hours design + 120 hours engineering + 80 hours maintenance[including initial one-time setup & implementation].
12 hours = 4hours design tokenise time + 8 hours engineering tokenise time
85% Efficiency gain260 hours One-Time set up & Implementation + (12 hours tokenise x 30 times implemented in Product UIs) = 620 hours Total Effort
Accessibility Testing Criteria
We aim to:
Guarantee equitable access to digital experiences for all users, regardless of their abilities or limitations.
Uphold industry standards and best practices in accessibility design.
Foster a culture of inclusivity and diversity within our digital products and services.
Ensuring inclusivity and accessibility are fundamental principles guiding our design system implementation. In this section, we present the criteria used for automated Quality Assurance (QA) testing on accessibility. These criteria serve as benchmarks to evaluate the accessibility of our design components and interfaces.
Keyboard navigation and equivalent functionality play a pivotal role in web accessibility. Some users, particularly those with disabilities, rely on keyboard navigation (and interactions) as an alternative to using a mouse/touchscreen. Recognising this, our testing criteria prioritise the seamless navigation and operability of our digital interfaces through keyboard inputs.
The criteria outlined in the table represent our commitment to creating universally accessible solutions that empower every user. We encourage thorough review and adherence to these standards throughout the design and development lifecycle.
In Conclusion
This journey of implementing a comprehensive design system has been a testament to perseverance, collaboration, and innovation. We've achieved remarkable milestones: enhancing design efficiency, streamlining processes, and championing inclusivity through accessibility standards.
The tangible ROI, reflected in efficiency gains and time savings, validates our dedication to excellence. Our unwavering commitment to accessibility shines through the meticulous implementation of testing criteria and enlightening accessibility voice-over demonstration.
Looking ahead, I remain committed to continuous growth and evolution. My heartfelt gratitude goes out to every team member (Hazel Chen, Janie Pham and Jerald Rivera), stakeholder, and contributor who has played a pivotal role in this transformative journey.
Together, let's shape the future of design, inspiring and empowering through accessible digital experiences.