The design system is the central location for styles, components and patterns which we use across the new Transport for West Midlands (TfWM) website.
Whenever we plan to build a new service based on the needs of our users, the design system helps us to save design time. We can use these existing styles, components and patterns towards new services. If we need a component and pattern which is not in the design system, it’s my responsibility to create it. The new component or pattern must meet the service’s requirements identified in the discovery phase.
If we create a new component or pattern for a service, we add it into the design system for any designer or developer to use. Before this, a new component or pattern goes through usability and accessibility testing. This testing is to ensure the new component or pattern is easy to use.
New styles, components and patterns are first designing in the local design system library in Figma. After testing, they are passed onto the developers to be added to the live site via GitHub.
Along with the designs themselves, the documentation informs the developers on how to use styles, components and patterns. Clear and descriptive documentation is important to ensure styles, components and patterns are used correctly and consistently.
Since the start of my role at the West Midlands Combined Authority (WMCA), I’ve managed the TfWM design system by:
Taking ownership of the local design system library in Figma
Overseeing the transition of the local design system from Sketch to Figma
Adding styles, components and patterns to the local and live Design System website
Maintaining the local and live design system site by updating designs and documentation.