What is a design system and why is it worth implementing?

In many organizations operating online, a design system is becoming the design standard. In this article I describe what the system design phenomenon is and why it is worth implementing in an organization.

What is a design system?

A design system is a document that organizes information about how we would like our brand to be perceived by customers and users. It consists of graphic collections, design and communication guidelines, and resource materials ready for reuse. All of this is intended to define a consistent brand communication language. Organizations such as the U.S. government, IBM, Google, and ... Bank Pekao, with which we worked on the redesign of the Pekao24 transactional website service, have already been convinced of the effectiveness of the design system.

Benefits of having a design system.
The greatest value of the design system is the combination of consistent visual communication with technical documentation used by programmers, managers, designers, copywriters and other specialists responsible for building customer experience. Other advantages of having a design system in your business include:

  • Accelerated development of next products and services (some companies estimate that providing websites has accelerated works by up to 8 times).
  • Faster introduction of new employees – new programmers, graphic designers, customer service employees and managers have clear guidelines and the necessary information to begin work.
  • Better user experience – instead of creating new schemes, we can focus on improving our design system.
  • Higher conversion – we can spend more time testing our designs and improving them which leads to higher conversion.
  • A sense of order and control – everyone has access to a database where they can see information about the brand from design to communication, and therefore it's easier to find the information needed.
  • Better communication between teams – a design system is a joint document. It's a dictionary through which everyone involved in building the product communicates in one language.

How do we build design systems?

Building a design system often raises questions and doubts among our customers. We always start projects of this type with a meeting, where we share our knowledge and experience, as well as present sample design systems, so that everyone involved in the project has the same background. Usually at this early stage we are faced with a choice:

Create a design system on the basis of current projects
Or ...

Create a design system from scratch and then adapt existing products to it.
Regardless of the final decision made, we always go through an analysis of the brand and its business environment, which allows us to better understand users, industry specifics and our clients' needs.

Design system components.

A design system can be divided into 3 smaller elements:

  1. Style guide – i.e. a document containing information about design standards which is a source of knowledge about, among others, colors, fonts, logotypes and the way of communicating with the user.
  2. Pattern library – i.e. a graphic library containing specific examples of interfaces and practical advice on how to use them, e.g. forms placed on a website with examples of their use.
  3. Component library – i.e. a combination of the pattern library with the code used by programmers to create next sub-sites. This is a major factor in speeding up work on future products, as programmers do not have to rewrite the site code from scratch.



Practical examples.

The design system's content is grouped into logical sets that are easy to find. Most systems have sections such as grid, animations, colors, fonts, UI elements as well as the rules for designing new elements. For a better understanding of what a design system is, I have created a short list of practical examples.

Bank Pekao

We started building the design system by defining a new graphic style. The goal was to refresh the website service and mobile application in order to make them more modern and functional. By putting all the elements in order, we were able to deliver new designs quickly and systematically. The effects of joint work with Bank Pekao are used by many thousands of Poles every day.



Atlassian (JIRA, Confluence)

Link to the Design System: https://atlassian.design/

A company known for its popular project management software - JIRA and Confluence. Year after year, we see an increasing emphasis on user experience as a key aspect of a product. The Atlassian's design system contains information about the tone of statements, marketing materials and the use of the brand image online.

Google – Material Design

Link to the Design System: https://material.io/design/

One of the most famous systems used on a huge scale. It includes the design information based on a system created by Google. Millions of applications and websites are created using this system every year. The entire Material Design is divided into sections: design, code, downloads, and components. In addition, Material Design gives access to free tools that allow you, among other things, to check the color scheme of the application on automatically generated mockups.



Fluent Design System (Microsoft)

Link to the Design System: https://www.microsoft.com/design/fluent/

Microsoft is known for updating its layout every few years. It is currently developing its products based on the Fluent Design System, which works well on a variety of operating systems: Windows, iOS, and Android.

Above I have listed the most popular design systems. A more comprehensive list can be found under: www.designsystemsrepo.com

How to develop a design system?

First of all, accurately ;)

When embarking on such a large project, it is important to remember that the development of a design system is a continuous process that can be compared to the development of an organism. Initially, the most important structures for the brand are created and then further areas are developed. In practice, on the one hand it is about systematic testing and development of current solutions, and on the other hand about adaptation to design trends and new technological possibilities that change every few years. Owing to design systems, companies can respond faster and more effectively to changes and focus on building the best possible experience for their customers.


K2 Create. 15.01.2020.