Well DS
Design System
Accessibility-First Design System for Scaling Health Products
Year:
2022
Timeframe:
9 months
Tools:
Figma. Adobe. Notion. ColorBox
Category:
How I crafted a scalable accessibility-first design system for a Digital Pharmacy that helped their design team to work faster and delivered better product experiences.
Challenge
Well Pharmacy's design system was disjointed, scattered and didn't comply with required accessibility standards, affecting the NHS partnership and creating friction for visual impaired customers. In addition, the system was hindering design team's efficiency, impacting business costs and creating inconsistencies across the whole ecosystem.
Solution
I architected and strategically merged a definitive new design system foundation from scratch with embedded accessibility and scalability features. Using specialised design tools, such as Colorbox, Adobe Color and Sim Daltonism, I thoroughly audit and set variables and tokens for colours and typography just right from the bottom-up, so product accessibility was rooted by default in the system. This specially helped to bridge the gap between product usability and designing at scale. In addition, I invented a Matrix component structure in Figma for core components, such as buttons and inputs easing designer's efficiency and reducing amount of variants in components, likewise size of libraries.
"A crafted and user-friendly design system cornerstone is crucial for always-evolving digital products that help not just to end-users but design teams"
System deliverables
Snapshot of assets delivered across the whole project
Healthy metrics
Figures that shows design system value
+80%
Team's efficiency in delivering
AAA
WCAG compliant in 100% of the libraries
90%
Cross-platform design consistency
50%
Figma libraries downsized
