Checkout.com Infinity Design System
Design system set up with design tokens to unify disparate component libraries. Integrated accessibility best practices into component designs, leading to substantial WCAG compliance improvement.
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