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.
“Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.”
— Chris Messina, tech evangelist and former developer experience lead at Uber
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
- 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.
- 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. - Create a UI/pattern library In this step, all the current components in the product are collected, creating a library.
- 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
- Atlassian
- Polaris
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.
