Designing cohesive products across the organisation 

Most of today’s biggest organisations have a wide range of channels and products. They might have a website, an app and a blog, for example. However, if there isn’t a common language, design and development teams in order to solve complex problems will quickly end up building distinct components and defining their own standards and workflows, leading to inconsistency across the organisation. As users move from one product to the other they notice those inconsistencies and might experience confusion. There’s where design systems step in. 

“A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.”

- Nathan Curtis

A design system explains how the team should design products. Besides including a style guide and a pattern library, it also comprises the design principles, rules and guidelines, as well as ready-to-use components and code snippets for developers. 

Some outputs of a design system:

• Style guide

  A document that includes the organisation’s graphic styles, colours, fonts, iconography, tone of voice and how they should be used. 

• Pattern library

  Collections of reusable user interface components that are shared across teams and aggregated to design products.

• Design principles

  Clear standards for the product team that replace subjective ideals. 

Benefits of working with design systems 

• Time-savings 

  Having common patterns saves precious time that can be invested in creating better experiences that meet users’ goals

• Better and more predictable user experiences

  Improving the design and user experience of products and services will create more predictable experiences for users

• Possibility to test high fidelity prototypes 

  Easier to build high fidelity prototypes to test with real users and learn from their insights

• Eliminate redundancies

  Reducing inefficiencies and replicated work in the design and development process

• More efficient work 

  Efficiency for both designers and engineers, enabling better design and faster builds

• Better collaboration across teams 

  Improved team communication and collaboration, with more cohesiveness and consistency 

• Clear brand identity and language