Auto Trader Design System (ATDS)
Built an accessibility-first design system serving millions of users across the UK's largest automotive marketplace, establishing new standards for inclusive digital experiences.
Impact & Outcomes
- Achieved WCAG 2.1 AA compliance across all components
- Reduced design-to-development handoff time by 60%
- Established component library used by 20+ product teams
- Created comprehensive token architecture for theming and white-labeling
The Challenge
Auto Trader UK needed a scalable design system to unify their digital products while meeting stringent accessibility requirements. With millions of users relying on their platform to buy and sell vehicles, the system had to work for everyone - including users with disabilities.
The existing design landscape was fragmented across multiple products, with inconsistent patterns and no systematic approach to accessibility.
My Role
As Lead Design Systems Architect, I:
- Led the design systems strategy and implementation from inception
- Established accessibility-first principles as core to the system
- Created comprehensive component library and token architecture
- Collaborated with 20+ product teams to drive adoption
- Built governance processes and contribution models
The Approach
Accessibility-First Foundation
Rather than treating accessibility as an afterthought, we built it into the foundation:
- Every component designed and tested to WCAG 2.1 AA standards
- Screen reader optimization and keyboard navigation patterns
- Comprehensive color contrast system using token architecture
- Focus management and ARIA patterns built into primitives
Token Architecture
Created a systematic approach to design decisions:
- Multi-tier token system (base → semantic → component)
- Support for theming and white-labeling
- Comprehensive color, typography, and spacing scales
- Dark mode support built from the ground up
Cross-functional Collaboration
Success required buy-in across the organization:
- Weekly design system office hours
- Contribution guidelines and governance model
- Documentation-first approach with live examples
- Regular cross-team workshops and training sessions
Impact
The Auto Trader Design System transformed how the organization built digital products:
- Accessibility: First automotive marketplace in the UK to achieve full WCAG 2.1 AA compliance
- Efficiency: 60% reduction in design-to-development handoff time
- Scale: Successfully adopted by 20+ product teams across the organization
- Quality: Consistent user experience across all touchpoints
- Innovation: Token architecture enabled white-labeling for B2B products
What I Learned
This project reinforced that design systems are fundamentally about people, not just components. The technical architecture was important, but the real success came from:
- Building relationships across teams
- Creating clear governance without bureaucracy
- Treating accessibility as a quality metric, not a checklist
- Maintaining momentum through continuous communication
The accessibility-first approach proved that inclusive design doesn’t compromise aesthetics or functionality - it improves both.