Checkout.com Infinity Design System
Design tokens • Migration • Accessibility Documentation • Strategy
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 with 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 code bass
Two themes were 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 program, equipping the team with advanced skills to adeptly navigate intricate component design and accessibility challenges.