Overview
Part of a project I did on loan to the National Careers Service during a rebrand. I was tasked with creating set of published components that could be used in Figma across all prototypes, such that a change in the library would be reflected across all Figma files using this library.
User Needs
"As a designer at the National Careers Service I need to have access to standardised components so that I know my designs are consistent and conform to our branding".
Action
I worked with brand designers and developers to establish a set of components that could be used across many projects going forward. The interaction between what looks good, what is a good experience and what is feasible produced this final product.
​
All components needed mobile and desktop versions, as well as hover states and focus states. Everything from the text size and fonts to the colour palette needed to be defined.
Challenges
When this project first kicked off the team used the term 'design system' to describe what was needed. We set to work but it when it was taking much longer than expected it later transpired that the client wanted more of a pattern library or style guide. We had to row back and reconfigure which took time, and we were able to reuse a lot of what we'd already done, but we wasted lots of time. This project taught me that the terms 'style guide', 'pattern library' and 'design system' are used so interchangeably that a conversation needs to be had at the beginning about which is most appropriate to the client's needs.
Result
The completed style guide exists with NCS. The components and styles are being used by all designers needing to prototype, retaining the interactions (hover and focus states) attached to the originals. If the style needs changing the style guide can be amended and all instances of the master component will change instantly.
