Checkout.com · Published 2022
Infinity Design System
Established a token-based design system to unify disparate component libraries, embedding accessibility into components for substantial WCAG compliance gains.
- WCAG compliance
- AA
- Themes shipped
- 2
- Component tiers
- 3
Summary
Delivered design system foundations with design tokens, accessibility practices, and component tiers to maximise component visibility.
My role and team
Principal Product Designer within the leadership group spearheading the unification of disparate component libraries into a cohesive design system.
The leadership group included 2 Principal Product Designers and a Lead Engineer.
Outcomes
- Semantic tokens introduced to component libraries from the new centralised design system codebase
- Two themes introduced: a) Legacy UI to maintain compatibility across libraries; b) Rebrand to power a new product visual language
- Begun to replace foundational components with accessibility best practices, improving WCAG compliance with the new theme
- Created a tiered component structure (Core, Common, Limited) to enhance visibility and promote seamless reuse, boosting project efficiency and productivity
- Orchestrated a comprehensive training programme, equipping the team with advanced skills to navigate component design and accessibility challenges