Design Systems

Introduction

Design systems have been getting a lot of attention recently. Companies like Airbnb, Uber, and IBM are beginning to really understand how useful they are for building products faster than ever before. In this post, I want to give you a short introduction to the subject of a design system; what it is and how it can be useful for an organisation.

­

What is a design system?

Design systems have been around for a long time. But the way that we talk about them nowadays is little different. Usually, they’re talked about in the context of digital products. Design systems can be all sorts of different things:

1. Brand Guidelines

When you think of design systems, you might be thinking about design/brand guidelines. These have been around for quite a while. One of the most well-known examples is the “NASA Standards Manual” (1) designed in the 70s, it’s a unique manual that was designed by hand and implemented on all Nasa products, from uniforms to space shuttles. (1)

In our current digitised world, people are putting their style guides and brand online, allowing users to access and download the available assets easily. The typical brand guidelines usually tackle issues such as typography, colours, layout, grid and spacing.

2-Linkedin guideline

(2) Linkedin guidelines

2. Design Language

Design Language is a little bit of a step up from Brand Guidelines. It is not only about logo usage and spacing; it is more like a philosophy or a design direction you get when thinking about a product or a company. Material design from Google is one of the most well know ones right now. The idea around material design is that their textures and animations make it seem like everything has a tactile feel as if you’re dealing with materials.

 

3-Material design language

(3) Material design language

3. Voice and Tone

Voice and tone is an extension of your brand. It shows the personality of your organisation or product in the written format. It explains, for example, how you would communicate with your users, whether it’s in an informal or formal way. MailChimp is a great example of an organisation that is well known for their separate tone guidelines across UI.

“MailChimp’s voice is human. It’s familiar, friendly, and straightforward” (6)

4-MailChimp content style guide

(4) MailChimp content style guide

4. Pattern Libraries

A pattern library is also known as a Component library or front-end style guides. These are basically the bits and pieces of your user interface such as Buttons, Forms, or Icons.

5-Atlassian Pattern library

(5) Atlassian Pattern library

So, which one is the correct definition of a design system? 

Generally speaking, there’s no official definition of what a design system is.

Brand Guidelines, Design Language, Voice & Tone and Pattern Library are all elements of a design system. Depending on the company, the focus can be on one or all elements to provide a coherent design approach.

Founder of EightShapes, Nathan Curtis, defined a design system as the following:

 “A design system is a living, funded product with a roadmap and backlog, serving an ecosystem”

With this definition in mind you can think of a design system as a product which serves your main product with an aim to improve communications between designers and developers.

Do we Need a Design System?

A question we often ask is “do we need a design system?”. When thinking of an answer to this, think about what your organisation needs and which problems the design system will solve for your product. (8)

A design system will provide a value if your products:

  • Need to look and behave similarly.
  • Implement similar UI components.
  • Duplicate low-level functionality.
  • Suffer from visual regression bugs.

If these factors are important for your product, then you’ll most likely benefit from having a design system in place.

Benefits of a Design System

Some of the design system goals or benefits at a high level:

  • Provide a single source of truth for building UIs.
  • Save time and money through shorter production cycles.
  • Increase consistency.
  • Decrease maintenance.
  • Allow UX team focus on the experiences and dev. teams on implementation.
  • Improve user experience through well-defined and learned behaviours.

Companies around the world are using design systems, and they are becoming the new standard for enterprise software development.

How to Build a Design System

Each organisation has a different approach to building a design system, depending on different factors such as team set-up and capacity. However, when an organisation decides to invest in building a design system there are key steps they should follow.

 1. Building a Design System Team

As a company grows, communication must strengthen between teams to organise a coherent design system.  There are three team models for Scaling a Design System. (9)

7-Solitary-team

A. Solitary: one person or few people from the same team building the design system for the entire company.

  • Works for small companies.
  • Not a long-term solution.
  • Less adoption throughout the organisation.

7.1-Centralized-team

B. Centralised: a full-time team working on creating and scaling the design system.

  • Works for large and small companies.
  • The design system team has time to spread the system across teams.

7.2-Federated-team

C. Federated: designers from different product teams decide on the design system together.

  • Works for large and small companies
  • Design system is representative of many products
  • System spreads easily

Creating a clear plan is essential to ensure that the design system can adapt and thrive as more products are being built within teams.

True collaboration isn’t throwing designs over the wall. It’s designers, engineers, & the rest of the team sharing the responsibility to build a quality product.” Diana Mounter, Github.

2. Do Your Research

As I mentioned earlier, thinking of a design system as a product means you need to do research, collect data and get insights from different people within your organisation. Therefore, it is necessary to:

  • Talk to the people that are going to be using and building the design system (developers, designers, Project Managers).
  • Have a clear vision of what needs to be built. And how will it be built?
  • Align everyone in the same efforts.

3. Create the UI Inventory for the Design System

You must understand the current state of your design and development ecosystem. The best way to start is by building an inventory of all the different patterns, colours, text styles and assets used in the product. The inventory clearly shows all the inconsistencies in your product. (10)

home24 desktop style guide

Home24 checkout project style guide

A. Create the Patterns Inventory

  • Start by collecting different examples of patterns from your product(s) either by taking screenshots or collect patterns directly from design project files.
  • Take the patterns collected from products and group them into categories “Buttons, Colors…etc.” ­

Home24 UI buttons inventory group.

Home24 UI buttons inventory group

B. Presentation for the team

  • Explain that building a design system is an ongoing process and that requires team effort.
  • Clarify that all designers and developers will have the right to contribute to the system

4. Design System Documentation

“If It Isn’t Documented, It Doesn’t Exist” – Coding Horror

The ultimate goal at the end is:

  • giving the user of your design system an idea of what the components looks like along with it’s functionality in the same place.
  • having components, Code, Documentation, Dos and Don’ts all wrapped into one.

9-design system documentation

(9) Carbon design system

5. Management and Organisation

Thinking of a design system as a living project (and not as a side project) which requires maintenance within an iterative process to keep developing and serving the main product. Having an agreement between product members on how to manage and organise the design system helps in achieving that goal.

Schedule weekly reviews with stakeholders and developers

  • Developers should validate designs and make sure that everything is possible from a development standpoint.
  • Align on what are you going to name each component (drop-down or select input?).

Establish a long-term governance.

  • What is the contribution process?
  • How is it going to be shared out?
  • Find a copywriter to write the guidelines and documentation for the components.
  • Who updates the design system?
  • Who approves changes?
  • Who gets to decide which patterns stay, go?

Conclusion

Having a sustainable design system helps your organisation work faster and smarter so designers can focus on the experiences and developers on implementation.

As Nathan Curtis once said, “A design system isn’t a project, it’s a product serving other products”. Like all great products, a design system requires iteration and evolution.

References:

  1. https://www.kickstarter.com/projects/thestandardsmanual/reissue-of-the-1975-nasa-graphics-standards-manual 
  2. https://brand.linkedin.com/ 
  3. https://material.io/guidelines/ 
  4. https://styleguide.mailchimp.com/voice-and-tone/ 
  5. https://atlassian.design/
  6. com course > Managing a Design System with Sketch> Anne Grundhoefer. 
  7. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
  8. Creating a Design System: The Step-by-Step Guide by Uxpin https://www.uxpin.com/create-design-system-guide 
  9. http://carbondesignsystem.com/components/button/code

Further Reading: 

-Brand style guide examples:

https://saijogeorge.com/brand-style-guide-examples/.

 -Design System handbook

https://www.designbetter.co/design-systems-handbook/building-design-system. 

-Nathan Curtis medium page:

https://medium.com/@nathanacurtis

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s