Scaling a Design System Across Products and Teams
How I contributed to evolving Genesis, Stepstone's design system, improving consistency, accessibility, and scalability across multiple products, platforms, and markets without disrupting the teams that depended on it.
The Problem
As adoption of Genesis grew, so did fragmentation. Inconsistent interaction patterns across products, accessibility gaps in colour contrast and focus states, legacy components that no longer aligned with modern UX expectations, and increasing effort required for teams to implement and maintain standards.
How do you evolve a design system that is already widely used, without breaking the products that depend on it?
Rather than treating Genesis as a static library, we approached it as an evolving product - identifying high-impact areas for improvement, prioritising changes that scale across multiple components, and ensuring changes were adoptable, not disruptive.
What I Worked On
1. Accessibility-Driven Colour System (DL2.5)
Problem
Our existing colour system did not consistently meet accessibility standards, particularly WCAG AA contrast requirements across UI states, interactive elements, and text.
solution
I contributed to evolving the design language (DL2.5), redefining colour pairings to meet accessibility standards, ensuring contrast compliance across all UI states, and creating a more robust and flexible colour system with clearer guidance for designers and engineers.
- Improved accessibility across all products using the system
- Reduced risk of non-compliance with WCAG AA standards
- Clearer guidance reduced ambiguity for designers and engineers
2. Standardising Focus States Across Components
Problem
Focus states were inconsistent or missing across components, creating accessibility and usability issues — particularly for keyboard navigation and assistive technology users.
Solution
I led efforts to define consistent visual patterns for focus states and applied them systematically across all relevant components, aligned with accessibility best practices.
- Improved keyboard navigation and accessibility across all products
- Created a unified interaction experience
- Reduced implementation ambiguity for engineering
3. Evolving Component Patterns
Header & Footer: Navigation patterns needed to support increasing product complexity and scale across multiple product contexts. I worked on evolving header and footer components to handle complex navigation structures while maintaining consistency across experiences.
Upload Component: File upload interactions were inconsistent and lacked clear state handling. I helped design a multi-state upload component covering default, uploading, success, error, and edge case states.
Header and Footer
Navigation patterns needed to support increasing product complexity and scale across multiple product contexts. I worked on evolving header and footer components to handle complex navigation structures while maintaining consistency across experiences.
Upload Component
File upload interactions were inconsistent and lacked clear state handling. I helped design a multi-state upload component covering default, uploading, success, error, and edge case states.
- Improved clarity and usability of file upload interactions
- Reduced implementation inconsistencies across products
- Scalable pattern available for reuse
4. Motion & Interaction Details
Problem
Micro-interactions and motion were inconsistent or underdefined, creating an uneven perceived quality across products and no shared foundation for future motion work.
Solution
Micro-interactions and motion were inconsistent or underdefined, creating an uneven perceived quality across products and no shared foundation for future motion work.
- Improved perceived performance and product polish
- Enhanced user experience consistency across products
- Foundation established for system-wide motion guidelines
Accessibility Champion
Alongside the design system work, I was appointed as Accessibility Champion for the organisation. That meant going beyond component-level compliance and taking on a broader responsibility for how accessibility was understood and applied across the company.
I worked closely with the facilitator running accessibility training across the organisation, helping drive engagement and making sure designers actually showed up and got something from it. More significantly, I worked directly with the legal team as Stepstone prepared for the European Accessibility Act, which introduced enforceable legal obligations for digital products operating in the EU.
Accessibility stops being a best practice and starts being a legal obligation. My job was to make sure the design system was ahead of that, not catching up to it.
Accessibility Champion responsibilities
- Appointed Accessibility Champion across the design organisation
- Supported accessibility training and drove participation across the design team
- Worked directly with the legal team on EU Accessibility Act compliance
- Used the design system as the foundation for meeting legal obligations at scale
The Bigger Shift
This work contributed to a broader shift in how Genesis operates within the organisation — away from a static deliverable and towards a product with its own roadmap, standards, and governance.
A design system isn't just what you build, it's how you enable others to build.
My Role
- Contributed to design system evolution across multiple areas
- Appointed Accessibility Champion for the organisation
- Supported accessibility training programme
- Worked with legal team on EU Accessibility Act compliance
- Led accessibility improvements to colour system and focus states
- Designed and refined complex components and patterns
What I'd Do Next
- Introduce system-wide motion guidelines and tooling
- Strengthen design-to-code alignment using MCP
- Develop clearer adoption metrics and dashboards
- Expand guidance for complex interaction patterns