Design Systems, what are they and why are they so important?
Design Systems are currently a hot topic in the world of design and development, but what exactly does this term mean? How does it benefit design and development teams, and more importantly, is it really that significant?
In this first article of a series focusing on this theme, we aim to address these questions and perhaps a few more.
Let’s start by defining what Design Systems are.
What is a Design System?
The most important thing to understand here is that a Design System goes beyond a series of individual components or a UI Kit in Figma, Sketch or any tool. Depending on its maturity level, a Design System can include diverse resources like patterns, components, and style guides, among others.
Regardless of its size or maturity, a Design System is a collection of reusable elements, guidelines, styles, and principles used to build and maintain digital products in a consistent and efficient manner.
Benefits of implementing Design Systems
In terms of teamwork and processes, having a Design System is important for companies and organizations for several reasons:
- They provide visual consistency
- They generate brand culture
- They promote work efficiency
- They help us work collaboratively
- They facilitate scalability and simplify maintenance
- They assist in onboarding processes for product teams
Don’t worry, we will now go into more detail on each of these points.
Visual consistency
Design Systems enhance visual and user experience consistency across various products of the same company or organization. By having a set of common elements and patterns, all products share the same foundation.
Implementing a Design System enables a company to establish and enforce brand visual guidelines across all its products and channels. Designers, developers, marketing specialists, and other stakeholders have access to a shared library of brand assets, design patterns, and documentation, ensuring a 100% consistent brand experience.
As an extra benefit, this consistency strengthens the company’s brand identity, builds customer trust, and sets the organization apart from its competitors.
Brand culture
Humans are creatures of habit, as the saying goes. We learn from repetition from a young age, and it makes us feel more comfortable and secure dealing with what we already know. Having a common reference among products of the same organization instills a sense of trust in us, which is crucial when it comes to retaining users.
Having solid foundations, not only visually but also in terms of principles and processes, helps to create a sense of continuity between products and a brand culture. This culture impacts the people working in the organization, but also our end users, making them comfortable with our products and encouraging them to use them again.
A very evident example of this is the impact of Apple’s products and the number of followers they have. There is an entire culture around “the Apple experience.” When people buy a product from this brand, they are buying a complete experience that is also consistent across all their products, in their stores, and in their applications.
More efficient work
Having this collection of reusable elements makes the design and development workflow faster. People can focus on solving specific problems without having to spend time on repetitive tasks or “reinventing the wheel.”
With an established Design System, designers can focus more on strategic design thinking and problem-solving rather than on repetitive design tasks, such as designing a data table or another component. We save a lot of time by using predefined components and styles.
But doesn’t this diminish creativity?
No. In this case, the creative approach is focused on solving the design problem itself, so you can continue to be a creative person, even though you have to use established components and guidelines.
Collaborative work
Another benefit is that developers, Product Managers, and other interested parties can access the Design System, understand design principles, and contribute to the product design process together. This inclusion not only fosters collaboration but also promotes responsibility for the overall user experience in the final product.
In a company without a Design System, designers often spend a significant amount of time creating and recreating design assets, addressing inconsistent design requests, and managing endless feedback cycles with the development team. This individualistic approach can lead to the creation of silos, frustration, and a lack of collaboration among team members.
However, when a Design System is implemented, a culture of collaboration is encouraged, empowering employees of different roles to open dialogue, share their work, and create collaboratively.
Scalability and maintenance
With a good Design System, updates and changes are easier to implement across all our products.
This is because changes in our System are propagated to all products, making maintenance much simpler. For example, if we make a modification to the brand color in our palette, both in our UI Kit and our library (in a design tokens file, for example), this small change will be reflected in all places where the previous color was applied.
Onboarding processes
This may seem unimportant, but a lot of time is saved in onboarding marketing, design, and development profiles when there is a well-established Design System.
How? By giving these people access to all the documentation and assets of the System, so they can immerse themselves in it and learn everything they need about the way our team works and the design and development guidelines. Which is no small feat.
Establishing a Design System for our organization
It’s essential to understand that a Design System is a product in itself. In this case, our end users will be the internal members of our own organization, those who will use the System in their day-to-day work.
Like any other product, we must go through a series of phases:
- Research: understand the needs and objectives of the design.
- Definition: identify the key components to include in the system.
- Guideline creation: establish rules and guidelines.
- Development and documentation: create the component library and document the system.
In the third post of this series, we will specifically discuss each step to establish an effective Design System.
A success story: Spotify
Spotify’s Design System is a success story because it has helped them improve their design process and, above all, the consistency of their application across all devices and platforms.
In 2009, Spotify did not have a Design System, and its designers and developers only relied on a set of general guidelines, which resulted in their products being quite different from one device to another.
Starting in 2013, they began to visually align all applications and introduced their dark theme, which was a significant and common brand point of their product. With this “small” change, Spotify started to make an impression on users, who began to recognize the application for its dark aesthetics and prominent green color.
In 2015, they established an exclusive team dedicated to working on a Design System project, and that was when they did a rebranding of color, typography, and other functional and visual aspects. This System was called GLUE and was treated as a unique project, not as a long-range product. What they did achieve with this project was to generate common components and guides for their product.
Since 2018, Spotify began to grow rapidly, expanding to more than 200 designers, 2000 engineers, and 45 different platforms (including smartwatches, cars, web, and mobile, among many others). After each team created its own Design System, and given that this involved a lot of maintenance and a lack of consistency, they found themselves in the position of having to start implementing a large-scale Design System to unify the working methodologies of all teams and the aesthetics and functionality of their products.
It was at this time they decided to focus their new System as a product in itself and establish a dedicated work team. And so, in 2018, Encore was born, Spotify’s multi-platform Design System, which is still in operation today, used by more than 400 designers, over 3000 engineers, and has a dedicated team of 30 people.
Why should I implement a Design System in my organization?
Recapping everything we’ve discussed before, the main reasons to consider implementing a Design System for work are:
- It brings many benefits in terms of work processes: more efficiency and speed, collaborative work among diverse roles, and simplified scalability and maintenance.
- It also brings product-level benefits: it generates brand culture both inside and outside the organization and helps maintain functional and visual cohesion in our products.
On the other hand, it’s important to remember that a Design System is a product in itself and, as such, must go through the same process as any other.
We encourage you to embrace this methodology and make the most of it!
In the next post of this series, we’ll talk about what an ideal Design System should ideally contain.
This is a translation of the following article from our corporate website:
