At FrontEnd NE, Lily Dart, who is the head of Design Systems at Lloyds Banking Group, talked about the Constellation design system. Constellation was created to provide design components and related documentation for the four brands of the group including Bank of Scotland, Halifax, Lloyds Bank and MBNA.
Her talk was engaging and interesting. It has inspired me to dust off the a design system that I created a few years ago to support development on the internal systems at work. I believe we need one now more than even, than when I first floated the idea.
Read on for my take on Lily’s talk.
What is a design system?
An official story of how your organisation designs and builds digital products.
A design system is a product made for the organisation. It provides the tools, materials, guidance, and standards needed for digital design and delivery
A design system contains the documentation and tools to build digital products. It starts from a shared vision, design and technology principles and the brand.
Development teams will use the system when developing digital products and provide feedback. The system serves the needs of the development teams - who are the user.
Why have a design system?
A design system
- creates alignment over digital user experience will allow development teams to concentrate of the development of the systems by providing re-usable components and patterns that they can use with confidence.
- helps design teams to create prototypes and concepts that fit it with the design of the system.
- contains page components, brand guidelines and tone of voice or content design principles.
Customers may perceive an inconsistent user interface as unprofessional, buggy or at worst fraudulent.
Lily talked about an audit of Halifax’s buttons and found for one that single brand, there were at least 26 different variants - which contributes to a inconstant UI.
To combat this, a design system will contain colours, fonts, components, code and guidance on usage. This will help create the consistent experience that is needed to give users confidence in the websites and software that they are using.
Benefits of a design system
- Saves time - reusable code components help developers by taking away the guess work.
- Reduces risk - design systems will ensure accessibility can be built in - for instance accessible markup and colour contrast.
- Ensures brand consistency and integrity
- saves money - Lloyds banking group saved £190k per project - they have 300 designers and 2000 developers in the group.
Reasons to have a design system
- has more than 20 designers, developers and content people
- is seeing inconsistencies in the customer experience
- wants to design and build faster.