A design system for problem solving and avoiding repetition

Overview

At HMCTS, the design practice consisted of 18 teams made up of 62 people, including 26 researchers, 14 interaction designers, 3 service designers, and 15 content designers.

To reduce the effort required to share effective styles, components, and patterns for reuse across the teams, we created the HMCTS Design System, which addressed all of these challenges.

Our approach

After consulting with Government Digital Service (GDS), we created an alpha version of the HMCTS Design System that closely matched the approach of the GOV.UK Design System.

This involved using consistent terminology and a similar format and layout for delivering the design system. Additionally, we established an HMCTS Frontend project where the styles and component code would reside, mirroring the structure of GOV.UK Frontend.

Quality assurance

We ensured that the HMCTS Design System was easy to use in projects and straightforward for designers to contribute to by facilitating regular releases. Additionally, we maintained a high level of quality control by implementing a requirement that no contributions could be merged without review from at least two team members.

Collaborative effort

Various patterns that were either designed or required were discussed during weekly design critiques. If deemed suitable, they would be added to the backlog for development, incorporated into HMCTS Frontend, and documented in the HMCTS Design System.

Our process

When designing and developing the Judicial Case Manager, many elements were beneficial for other service lines, which is why numerous components were added to the HMCTS Design System as a foundation for future development.

Each component was crafted to be flexible and reusable, necessitating time spent on customisation for each specific use case. We ensured that each component was semantic, accessible, and responsive.

Additionally, we conducted various checks across different browser types and operating systems to verify that each component was suitable for reuse.

The benefits

The benefits of a Design System include the ability to ensure that if a service is using a component, any changes or improvements made to the Design System are immediately reflected in all services utilising that component. These updates would be carried out in ‘package releases’.

The results

A number of separate service teams are now using the Design System, saving considerable time as a result. This ensures consistency across all service lines, significantly reducing the time and effort spent on research, design, development, and accessibility testing.