Design Systems @ FrontEnd NE December 2019

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.

- Brad Frost

A design system is a product made for the organisation. It provides the tools, materials, guidance, and standards needed for digital design and delivery

- Lily Dart

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

Customers may perceive an inconsistent user interface as unprofessional, buggy or at worst fraudulent.

- Lily Dart

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

Reasons to have a design system

The organisation

  1. has more than 20 designers, developers and content people
  2. is seeing inconsistencies in the customer experience
  3. wants to design and build faster.

Examples of Design Systems