Supercrunch Blog

Marcus Knight January 9, 2018 Design, User Experience, User Interface

Design systems

Facilitating scalability and consistency in design

Design challenges

Imagine your company has just reinvented itself with a completely new brand identity. The colours, logo etc. will need to be updated for all your digital products; maybe on a global scale if you’re a large company. With no system in place this would cost a lot of time and resources to achieve.

Scalability is another key issue and currently design has often kept up with the demands of a fast growing business by simply hiring more designers, or pushing existing designers to work faster and longer hours. Continuing to work in this manner comes at a cost to the business’s future:

  • No scalable design assets (colours, images, fonts etc..)
  • No design consistency (apps, websites would all look different)
  • Designers eventually become overloaded
  • Design documents quickly become outdated
  • No transparency
  • Production is greatly affected

“Design is struggling to scale with the applications it supports because design is still bespoke – tailor-made solutions for individual problems.” Source: designbetter.co

The solution: design systems

Design systems are a set of design elements within a single shared resource connected to all digital products. So whenever a logo or colour has been changed, this change would reflect in all products (e.g. websites or apps). Design systems are also a great reference point for the entire business to learn, understand and align design consistency across all touchpoints. They normally consist of:

  • Brand guidelines
  • Tone of Voice
  • Colours
  • Imagery
  • Typography
  • Design principles
  • UI library

and are maintained and updated by a design team.

“A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.” Source: Airbnb design team

The benefits of design systems

“A design system is the best way to improve design consistency and efficiency” Source: DesignBetter.Co

Design systems are scalable, accessible and maintained by a team of designers (rather than a single person), so if one person is on holiday or sick, the other team members have full access and transparency.

They are the single source of truth for the most recent design assets and replace the need for emails from colleagues asking for design assets. Programmers no longer need to ask how a button’s interaction works and there’s no more scrambling to find the latest brand images.

As a result, static prototypes can be constructed and iterated much faster. And the overall efficiency of the business increases, because design now has a centrally maintained location, which means resources can focus on other important tasks, such as enhancing the user experience.

How does this work in the real world?

It’s important to note that design systems aren’t simply created and then left in the corner to gather dust: They need to be maintained and manicured just like the hair that grows on your head. In an ideal setup, any changes or improvements made to the system would automatically update in all applications attached to the system.

Think of a design system as “dropbox” for design a development; you make changes to a file and every person that has downloaded a copy of this file will automatically receive the update.

Some examples of working design systems (sometimes known as styleguides, living styleguides or design language):

  1. https://www.lightningdesignsystem.com/
  2. https://material.io/guidelines/
  3. https://www.ted.com/swatch
  4. https://atlassian.design
  5. https://style.eurostar.com
  6. https://polaris.shopify.com/

At SUPERCRUNCH by GfK we also work with design systems to maintain design consistency across all client products. In the past we adopted an open approach of sharing design assets within a wiki/confluence, but this method quickly became outdated.

If you’re interested in finding out more, here are two really cool resources on design systems (videos):

  1. https://www.youtube.com/watch?v=7hYOLLO2gc4 – Jina Bolten
  2. https://www.youtube.com/watch?v=Eq0-Sz5S9iI – Paul Farino

Do you have experience with design systems in your company?