About Design Systems in Organizations — What It Is and What Values it Brings

What is a Design System?

A design system is a guideline of standards on how to use and combine a collection of reusable components. More specifically, a design system is documented well and clearly explains standards and constraints on using design components. With a design system, designers can use or create components easier and more consistently.

Let’s dissect design systems

These principles are what design systems usually contain.

#1. Purpose and shared values

Before starting anything, it’s essential to align teams on a clear set of purposes or shared goals. By doing this, the team can build a common vision of the organization.

Furthermore, communicating organizational values is also important so the team can hold on to the same key values based on brand objectives. The overall design in the running need to implement these values in order to achieve said organizational goal and brand objectives.

Posters the ASH team created for their core values

#2. Design Principles

Design principles are guiding sentences that help teams reach the purpose of the product through design. By building fundamental design principles, designers can make design decisions purposefully.

One example of a design principle is “Direction over choice” by Medium. Through this design principle, text editing is much simpler, where users are directed to only process their text through an essential amount of ways.

Design Principles must guide design choices

#3. Brand identity & language

A brand identity is a strategy of how an organization communicates its brand. This identity should be defined in line with the brand objectives.

According to Alla Kholmatova, brand identity should contain rules on how to use and not use:

  • Colours
  • Fonts
  • Spaces
  • Shapes
  • Icons
  • Illustrations
  • Photographies
  • Animations
  • Voice and tone
  • Sounds

#4. Components & patterns

Components and patterns, as the heart of the design system help designers utilize them in a consistent manner. Components are the building blocks, while patterns are the instructions on how to build with the components in a logical and consistent way, across all the products.

The Benefits of Developing and Implementing a Design System

Improved Consistency

With the presence of a design system, multiple designers can implement UI design according to the same system, hence creating a much more improved consistency throughout the product. Moreover, when different design teams work independently, they can still create designs that are cohesive and look as if they were created in one whole team.

Improved Quality

Due to the effect of consistency design systems brings, the quality of the overall product design will be very much improved. It will make users recognize the different parts of the product much easier.

Better Communication

A design system is very much like a language that consists of vocabulary (components) and grammar (guidelines). When different design teams refer to the same language, they will be able to communicate much easier, minimizing any misunderstanding of any design term. A design system will be much more advantageous when the design team is geographically dispersed with different local or national languages.

Faster Design Process

When designers implement a new feature of a product, they do not need to develop all UIs from scratch. With a design system present, they can reuse and combine different components of the design system, hence speeding up the design process. Furthermore, they do not need to worry about the consistency of the design.

Higher Focus

With design systems present, designers longer do not need to waste their focus on the UI of the product that is already defined. Designers can now focus on more complex problems, such as information prioritization, workflow optimization, and journey management. Therefore, all design teams can be more productive in solving problems other than the UI.

Building a Design System

  1. Conduct a visual audit The first step in building a design system is to do a visual audit of your current product design. By doing an audit, designers can identify how and what they can develop a consistent design system from the current design.
  2. Create a visual design language The visual design language is the core of the design system. This language consists of components that can be constructed in the digital product. This language consists of:
    Color — Common colors in a design system include 1–3 primaries that represent the brand. Furthermore, this color palette can be further enhanced with complementary colors, neutrals, and shades.
    Typography — Most design systems include just 2 fonts: 1 font for both headings and body copy, and a monospace font for code. Keeping the font count system is one best practice of typographic design, as it prevents users from being overwhelmed and also prevents performance issues caused by the excessive use of web fonts.
    Sizing and spacing — Spacing and sizing look best when there is rhythm and balance. A 4-based scale is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size.
    Imagery — To achieve success with imagery in a visual design language, it is crucial to have a solid guideline. is having a plan and sticking to it. Set guidelines for illustrations and icons, and use the best image format for the situation.
  3. Create a UI/pattern library In this step, all the current components in the product are collected, creating a library.
  4. Document what each component is and when to use it Lastly, documentation is crucial, as this is what separates a pattern library from a true design system.

Existing Design Systems

  • Material Design

Material Design System

  • Atlassian

Atlassian Design System

  • Polaris

Polaris by Shopify

How We Developed the Crowd+ Design System

We did not.

As this was only a one-time project that was also done in a very short time frame, we did not develop a documented design system. However, we did develop a consistent pattern library that contains all of the design components, referring to Brad Frost’s atomic design system principle.

If Crowd+ was a product that is continually developed, a well-documented design system can very much be needed to obtain consistency, quality, and a better development experience within the design team.

Conclusion

A design system is a guideline of standards on how to use and combine a collection of reusable components. It contains the organization’s purpose and shared values, design principles, brand identity & language, and design components & patterns. Differentiating from a component or pattern library, a good design system is documented well and clearly explains standards and constraints on using design components. With a design system, designers can use or create components easier and more consistently.

Despite the advantages a design system can offer, we did not implement it thoroughly, where the project we develop is only a one-time development project with no continuation whatsoever. However, we did develop a cohesive design library that really brought the team benefit during the whole development process.

If Crowd+ was a continuing project, we definitely will consider creating a very well-designed and documented design system.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amrisandha Prasetyo

Computer science student at Universitas Indonesia | Aspiring product designer 🎨💻