How we work

We use this process to evolve a component, add a variant to an existing component, or create new components.

These are the key stages in the process:

Define → Design → Develop → Document → Deliver

Here’s an overview of what happens at each stage:

Define - Gather evidence of existing state to better understand the user need, which is used to define the scope and constraints for the piece of work.

Design - Explore design solutions in Figma, defining interaction behaviours, token usage and accessibility requirements, whilst testing and iterating designs with users to validate final decisions.

Develop - Implement designs as production ready code into robust, reusable components in storybook, accessible by default.

Document - Add work to the UAL Design system documentation site through our CMS (matrix), using simple, consistent language and a relevant template.

Deliver - Components are reviewed and tested to ensure they behave and appear as designed across the browsers we support and adher to our accessibility standards.

This is an iterative process that may require looping back to a previous stage when new information or understanding is uncovered.