In a previous blog, I mentioned that using React library in front-end development allows us to create a design system more easily because it’s a component-based JavaScript library. But what does a design system mean? In this blog, I would like to share my research on design systems and talk about why creating a design system is beneficial to both developers and designers.
Design system?
The phrase “design system” has a fairly large range of meanings. Although the scope and method used by each company and service are different, it refers to a set of patterns and a shared rule language that are consistently configured to fit the purpose of the service. In other words, it documents the components for common color, typography, interaction, various rules, and design philosophies used to create services.
Previously, the company I worked for had a small UX team compared to the number of developers. So, by sharing UI/GUI components in the app with other designers, we had a design system to avoid repetitive and inefficient work. This enabled multiple designers to work together on the same project and communicate with developers more efficiently without creating a design guideline for each app page. Margins and colors tend to vary slightly when doing this which is then resolved by using a design system.
However, the more I researched, the more I realized that the design system includes its purpose, branding strategy, and the direction the company pursues, rather than just a UI tool kit or style guide. It should be a guide to help you plan out an appropriate design for the current service, not just a guide for the visual part. The process of deciding when and how to deliver the brand message according to the brand strategy should be reflected in the design system as well. Also, it is important to clearly specify the name of each component so that developers, PMs, and designers can build a consistent service.
Important points in building a design system
Answer a few questions before building a design system can be useful.
- What is the purpose of creating a design system?
- Who will use it?
- How much consistency is needed and how much freedom will it give designers?
As mentioned earlier, the design system is not just a guide to UI components and graphics, but also includes consistent documentation of the overall UX and brand strategy. Since there are many new devices that are suitable for various technologies such as AR/VR/MR these days, a different design system will be needed depending on who the target is and what kind of device it is, etc. For example, users who have lost sight will need a guide on the voice interface, so it is important to deepen the understanding of the purpose and service users before building the design system.
Advantages of design systems
Perhaps thinking of the drawbacks of a world without design systems can help us understand its advantages.
When I was working for a startup company a few years ago, I worked on an app with two designers. Since there was no design system, even for the same buttons, I had to remember what radius I had applied before and exactly what color and size it was. In spite of checking my work many times, I still found slightly different design elements in the final product.
Even with three designers working in the same space, we spent a lot of time revising designs. If a design system did not exist in a large company, I think work would be more ineffective. New designers have to spend a lot of time familiarizing themselves by making their own design guidelines and checking the design components one by one. Moreover, if they make a new design change, they will have to spend a lot of time sharing it with each other. For various reasons, many large companies are now building their own design systems and using them.
1) Communication with developers
The design system reduces wasteful communication between developers and designers. For example, if a designer has updated the tab menu design, it is possible to communicate effectively by clearly documenting the design system, rather than explaining why the tab was redesigned and how they changed it.
2) Design management cost
Obviously, a lot of time should be invested in building a design system in the beginning. However, once built, it contributes significantly to the consistency, efficiency, and aesthetics of a design. In particular, as companies and projects grow in size, new features are added to the product, or features that are not usable are removed. At this time, if the standard of the design system exists, the service can be updated quickly through a clear standard.
3) Prevent user confusion
Using a design system allows users to feel consistent in using the service. A study by Harvard Business Review found that getting 5% more customers to stay on your site can increase sales by 25% to 95%. Therefore, it is important for users to predict a certain amount of service flow and have a consistent experience.
4)Improve development productivity
Using a design system also improves development productivity. A style guide that is coded is called a pattern library. And many front-end developers document it so that it can be easily shared with teams through an open-source tool called Storybook, used for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient. If a design system is used within the company, developers can horizontally list each component, so they can quickly check the latest UI components. It can also be shared with designers and PMs, so communication about corrections or updates can be made more efficiently.
Below are articles that helped me while researching design systems and some well-known design system examples I want to share.
Recourses:
https://www.designsystems.com/
https://medium.com/@nathanacurtis
https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
Design System Examples:
Lightning Design System(Salesforce) — focuses on service logic, user experience, interaction, and flow rather than design details.
Polaris(Shopify) — It covers the details such as design accessibility and chatbot UX.
Mailchimp Pattern Library(Mailchimp) — Includes detailed guidelines such as feedback and warning messages as well as standards for visual design such as typography, color, and grid.
Material Design(Google) — It is useful for people who want to create modern and trendy designs and is used as a standard for UI design.
Fluent(Microsoft) — Focused on coherent design, integrating the fundamentals of technological innovation and customer needs. Includes guidance on developing Windows, Android, and IOS apps.
Thanks for reading!
