Design system
I was the lead UI designer on the design system, creating foundations, components, patterns, and documentation, to speed up the creation of consistent digital experiences.
I worked closely with a project manager, user researcher, accessibility expert, and developers to turn designs into reusable products using Figma as the primary design tool.
After thorough research and accessibility reviews, I designed the components and created detailed documentation for developers. Our product teams then tested the components, which were iterated on. We used Zeroheight as the platform to show the documentation and Storybook for the build.
The approach
Foundations
We had a set of brand guidelines that had already been produced. These were very basic with no information on how to design the elements. The colour palette was especially restrictive for the requirements of a design system.
I introduced design tokens to help the product teams understand which elements to use by replacing static values with self-explanatory names.
These tokens were used for:
-
Typography
-
Colour
-
Spacing
-
Borders
-
Breakpoints
-
Z-Index
-
Motion
Font tokens
There are 4 types of font tokens: font family, font size, font weight, and line height. Combined, these tokens create a typographic style to use within the product.
Four types of font tokens which gave increased flexibility to product teams.
Colour tokens
As I mentioned, the set of colours was too restrictive for what we needed so we decided to split the colours into two sections, one for product and one for brand. The product colour needed to support the purpose of the content, helping to communicate interactive states, and messaging like errors and warnings. The brand colours remained as they were, to be used on more of the marketing designs. The composition of a token name may vary depending on the type of token and its level of interactivity:
Prefix - This prefix refers to the design system (flare)
Category - The type of token and what it relates to (colour)
Element - The element which is being styled by the token (bg)
Role - Underlying role and associated styling (success)
Variant - How the token is being used (strong)
State - The visual status on which it's applied (hover)
Example showing how a colour value is used to create a colour token that is then plugged into a component
Form fields
Many of the product teams across HL needed form fields to produce consistent user journeys. With accessibility an important factor, I also had to consider how reusable these would need to be. The text input for example, would be used across multiple components such as date of birth, search, and auto-complete, with set sizes and fluid variants.
Creating building blocks allowed for flexibility and consistency across components.
Documentation
To document the Figma files for developers, I used a plugin called Eightshapes. This described all of the properties that were needed and also helped to speed up the design work. The developers found this extremely useful.
Example of part of the documentation for developers.
Other components
The library of components required for forms was now fairly substantial and we were starting to see the benefits of teams not having to reinvent the wheel and eliminating inconsistency. Colleagues were also able to contribute by submitting new components or changes on Jira through Zeroheight.
Example of some other components produced.