This work had several objectives, focusing on team workflows and user experience:

• Standardising design elements and patterns to ensure a consistent user experience.
• Establish design and code quality standards.
• Promote accessibility and document best practices.
• Improve team communication.
• Maintain design system standards as it grows.
• Enhance design and development processes.
• Enable products to scale more easily.

That work had never been done before, so the first challenge was reconciling multiple sources of truth and a complex tech stack with various limitations. We approached this by combining all libraries, analysing them, and creating design components that could be implemented across every tool.

Another aspect of the project was conducting an accessibility audit of the components to improve the product's overall accessibility. Visually, this involved fixing hover and focus states of focusable components, which failed colour contrast ratio tests.

Here is an example of before and after the design system was implemented. These screenshots show the entry points for six different services. They were visually inconsistent, but more importantly, their user experience and behaviour patterns differed, creating friction for users and adding unnecessary effort for the product team.

Once the first iteration of the design system was created, the next challenge was making it accessible to the wider team and presenting it across the organisation for adoption at scale. After the design phase, I created comprehensive documentation on Confluence, detailing how to use the library and outlining accessibility and usability best practices for each component and pattern.

We also developed a digital guidelines document to share the design system with external stakeholders. Check out the document for a preview of these guidelines.