I researched Brad Frost’s Atomic Design framework. This methodology breaks components down into smaller, more manageable units, from atoms to molecules, organisms, pages and templates.

By adopting this framework, I was able to systematically organise our components, making them easier to locate and utilise.

To further enhance usability, I implemented alphabetical ordering for each component category. This structured approach not only streamlined our design system but also empowered our team to work more efficiently and maintain consistency across our designs.

The first step was to establish a better token library in the design system. They consist of colours, text styles, shadows, corner radius and spacing values.

Colours

• Audited the existing colours used and tested the colour contrast.

• Created a colour pairing chart so designers knew which colours were accessible and could be paired together.

• Created colour variables using appropriate naming conventions.

Corner radius and spacing values

• Defined corner radius and spacing values and created variables.

• Added examples of components using these values.

Text styles

• Defined text styles to use within the design system.

• Labelled at sizes rather than adding specific meaning to text.

• Documented accessible standards for do’s and don’ts of text.

Shadow values

• Specified shadow values as effects with example components

Audit

I audited the software by taking screenshots and creating visual site maps to identify components in use and any inconsistencies.

Key findings:

• Some components were missing from the design system.

• Others were outdated in both Storybook and the software.

• Some components were not accessible.

To address this, I categorised components as atoms, molecules, organisms, or templates—prioritising the foundational atoms first.

• Prioritised the foundational atoms such as buttons, checkboxes, and toggles.

• Involved other designers in building out these key atoms to speed up the process and ensure all teams were aligned.

• Created each atom to align with the new, accessible colours and tokens.

• Developed variants for different states.

• Added other variations for specific components, such as size adjustments and the addition of labels or icons, providing enhanced flexibility.

• Added examples of components in use on a page for context and do’s and don’ts for each component.

• Continued this process for molecules, organisms and templates.

• Set up a weekly Design System meeting to align designers and developers, share updates, and gather feedback. This helped developers smoothly integrate new tokens and components into Storybook while maintaining consistent naming.