Design Systems: benefits, challenges & solutions
The New Digital School visited companies like Farfetch, Outsystems, XING, Unbabel and GitLab to learn about the need, benefits, and challenges of Design Systems in the industry.
There has been a lot of noise around Design Systems. It has been one of the major talking points in the design community for the past 2 years. You might have read a host of articles on Design Systems. Some love it, some are skeptical whether it suits their purpose and whether they will replace jobs.
Why Design Systems?
The need for Design Systems goes hand in hand with the need for scale, efficiency, and consistency in Design.
Imagine that your company has a product that it has been building for a long time. It’s likely that the many teams working on different parts of the product will create inconsistencies in the product over time.
HubSpot explained that when they audited every component they had, they found out +100 shades of grey, 6 different primary buttons and many other inconsistencies in their interface.
These can be the result of misunderstandings due to lack of clear direction. It usually happens as a result of unaligned teams or individuals. Additionally, the development of a product across different platforms (i.e. web, mobile or tablet) can further increase those inconsistencies, resulting in a disconnected user experience. Ouch.
Design Systems aim to solve this by bringing order to chaos.
They help teams by giving them a more structured and guided way to build solutions for their product problems.
InVision’s handbook defines Design Systems as follows:
“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”
This definition highlights the three main principles of Design Systems:
Efficiency: Instead of repeatedly building similar components from scratch, Design Systems enable designers & developers to reuse components and thereby increase efficiency.
Consistency: Design Systems introduce a shared set of principles and rules to build components. It becomes much easier to create consistent experiences across different platforms.
Scale: Increased efficiency and consistency lead a company to build faster products at scale.
Many companies have been advocates for Design Systems. AirBnB’s Design Language System helps them create solutions with a common language amongst stakeholders. Companies like IBM have, in fact, made their Carbon Design System public where designers and developers can contribute.
Examples like these are well known around the world, but we wanted to know how those inspired the national design landscape.
How are they doing it in Portugal?
We wanted to learn how companies in Portugal are scaling Design Systems — from the benefits they are providing to challenges in its implementation.
In July, The New Digital School promoted the Business of Tech Week, a week dedicated to getting to know the design and technology landscape of companies in Portugal. Students packed their notebooks, pens and carefully crafted questions and explored Porto and Lisbon in search of answers.
We visited companies like Farfetch, Outsystems, XING, Unbabel, and GitLab to learn how they are doing it. This is what we found.
I. The need
All the companies we talked to had pioneered their own Design System in a way. One company kept notes on how the experience on the website should be. Soon these notes became too hard to understand and maintain. Two other companies kept a shared Sketch file of used Components. Yet, the difficulty in keeping that file updated with the live website led to an outdated list of components.
Their first attempts made companies realize that there was indeed a need for a more organized system.
II. Benefits
The Design Systems of these four companies were at different stages of development. Some companies had a more developed design language while others were still at the beginning of implementation. Nonetheless, all these companies’ Design Systems had benefits in common.
Alignment: A Design System that responds to the needs of all platforms drives product alignment. Companies make sure their product is consistent on iOS, Android and web.
Speed: Design Systems provide a shared library of reusable components and guidelines. Building products becomes much faster.
Gaining time: As building products becomes faster, designers gain time they can invest in other areas. Companies invest more in understanding users and their needs. There’s more space for exploration because designers are no longer reinventing the wheel.
III. Challenges & Solutions — how companies are doing it
Different stages of development of the Design Systems lead to different challenges. The four companies shared what troubles them in keeping a common design language — and how to work on those challenges.
## When to create components
We learned from XING that a static Design System will not fit a company that has a large scale product. Teams will create solutions by combining already existing components of the Design System if these components can solve the interface problems. However, when the existing components are not enough, teams will create new ones.
It can become hard for teams to make decisions on whether a new component should be created or not for certain situations. The Design System library can quickly be filled with many solutions that solve the same problem in the product. Inconsistency arises and the Design System becomes a burden, rather than a reliable structure to build interfaces.
### How companies are doing it
💡 Building guidelines
Asking questions can help designers understand their next move. By asking questions, teams can start to build their own Design System guidelines. These building guidelines help teams decide on building or reusing components. In the end, it contributes to less but more meaningful components. Here are some examples of questions:
- What problem do we want to solve?
- Is there an already built component we can use to solve that problem?
- If we create a new component, can it solve other problems?
By asking questions like this, teams can avoid building several different versions of a profile picture, for example. While building the Design System, questions like these will come to the surface. They should be answered as soon as possible and be made public. It will help guide future decisions on building and combining new components.
💡Communication with other teams
Finding out if other teams see value in a new component requires great communication. Key decisions that influence the whole system must be public to other stakeholders. It’s important to generate discussion between them to achieve the most efficient system possible.
Companies can define different types of communication formats. A centralized approach leads to teams solely dedicated to maintaining a Design System; a less centralized approach leads to many individuals iterating the Design System together from their own teams.
## Design Systems and Legacy Products
Implementing a Design System is not an action, but a process. Especially when considering legacy products, where the technology used is old.
In GitLab’s case, they want to update their technologic stack but, at the same time, build a consistent Design System based on that technology.
Companies cannot simply build a Design System on top of the current interface — they need a plan that involves development and design.
“We want to have our house in order before building a castle”
- Pedro Moreira da Silva, Senior UX Designer at GitLab
### How companies are doing it
💡Start with the basics
Going for the big and daunting tasks can prove itself a mistake later. The companies we visited started with the basics such as typography and colors, moving on later to discover other inconsistencies in their interfaces.
These discoveries are the result of interface audits. In audits, every component is investigated and filed for review. It is important to understand the reason for such inconsistency and work on guidelines that will help avoid repetition.
💡Developers and designers must be hand-in-hand
The code needs refactoring and updates. Design needs consistency. To foster this evolution, developers and designers can save time by aligning themselves during the adoption phase. Developing with a new technology and a Design System should be in sync.
It can be done as a Boom, where teams redesign and code the whole system in one go. Time is invested upfront to launch the system as a whole. Or it can be done as an Incremental process, adopting the basics (such as colors) and moving to more complex parts of components.
It becomes essential to have the process planned by Product Managers/Owners. These people will define the roadmap for the Design System across the product and enhance the communication between developers and designers.
💡Building a live Design System
As companies move from old technologies to more popular and supported stacks, they want to update their Design System in the same measure. GitLab, for example, is working on a Design System that will be updated in real-time with their product.
“We don’t want screen shots, we will only have the live code so everything is in sync.”
- Pedro Moreira da Silva, Senior UX Designer at GitLab
Therefore, every component of the Design System exists in the product. The rule of “the component only goes into the Design System if it’s coded” supported by GitLab helps keep the library documentation up-to-date and avoid legacy-product-problems in the future.
## Getting everyone on board
It is definitely one of the biggest challenges companies face. The bigger the company, the harder it gets to scale a Design System to all the teams.
“Getting everyone on board is a fight. It is very hard.”
- Nuno Amorim, Visual Designer at XING
### How companies are doing it
💡 Invite everyone to the party
There is no use in a Design System that doesn’t solve the team’s needs. If it fails, teams will not use it.
“People need to work on the system to understand it. It needs to grow in the real world.”
- Bruno Silva, Lead Designer and Founder at Unbabel
A system cannot simply be imposed. It is important for teams to work on it from the very beginning. They need to express their problems and feel ownership of their solutions.
💡Single Source of Truth
Companies must work on making their Design System accessible for teams. GitLab is a great example of that — they keep an updated handbook on how they run the company and they update their Design System in a public way.
A Single Source of Truth (SSOT) like that allows the whole company to access changes and updates. On top of that, it creates a common language between stakeholders, contributing to better communication.
💡Peer-to-peer reviews
A peer-to-peer review system can help get teams on board the Design System. By reviewing their colleagues’ work, teams increase their Design System awareness. It helps designers understand if the Design System can scale to their needs or if it needs improvement.
Some companies have special teams focused on reviewing work. In these cases, a single source of truth — such as GitLab’s Design System — becomes essential to help these teams. Yet, that same source of knowledge must continue to be public to the whole company. Its main goal is to educate everyone about how design should evolve inside the company.
💡Announcements
For every action, a reaction. For every update, a notification. Design Systems are not a static tool, but a living organism inside companies. The increased need for updates requires a bigger effort to get everyone on board to know what’s new.
Companies must strive to create a system that informs stakeholders of changes to the Design System. That system can be in the form of video calls, blog posts, channel announcements or a changelog every time there is a change. The goal is to keep everyone on the same page.
Wrap up
Despite the trend in the design community, Design Systems are not a simple choice. Companies are facing many challenges while implementing their own system. These challenges are tied with the scale of the company, the team and the product itself.
Like a living organism, the Design System evolves as an integral part of the company. It adapts to the ever-changing, fast development cycles of product development and scales efficiently if built with care. It becomes of huge importance for companies to weigh benefits and challenges, to understand the return on investment of implementing their own Design System.
Authors
What are your thoughts on Design Systems? How are you implementing them and what are your findings?
Leave your thoughts on the comments. If you enjoyed this article, hit the 👏 button and help others find it.
