Nowadays, it's getting harder and harder to find someone in IT who hasn't heard of design systems or wouldn't want one in their product. The term is not only fashionable but also has positive associations. It is, in fact, a valuable optimization. But can it get any better than that?

Yes, it can. A design system, even the most beneficial one, will not appear on its own. Building it requires attentiveness and a sizable time investment. And when it comes to investing resources in something, you’ll most likely wonder what exactly you can gain. Will it pay off? Again, the answer is positive – it will.

However, before we get into the numbers, let's get to know the real value a design system provides.

Time for theory – implementation process in a nutshell

Almost every digital product is based on an interface. Naturally, the interface has to be designed beforehand. When thinking about this, you probably picture a designer painstakingly creating a visual image of each view and all the actions within the product. In reality, though, the designer's desk is just one of the many stages of a long and bumpy path of interface creation.

The process begins earlier. Before a design is created, there must be a need and a business concept. This is the most lively, creative, and technologically unconstrained stage of the product design process. It is then that the ideas are generated in pursuit of providing more functionality to the user. Needs are discovered during research, and you look for areas that will add value to the product.

In this phase, a vision for product development is created and placed on the roadmap as well as in the task backlog.

And that is where the design process actually begins.

This is a good moment to mention the design system again. Because in order to better understand the profitability of this tool, let's first consider...

…what if there is no design system?

The standard implementation process is based on the sequential transfer of responsibility for each stage of product development.

1. It all starts with the researcher or designer, who is responsible for translating the business concept into a simple prototype that will allow them to understand the problem, find a solution, and pre-test its rationale on users.
2. This basic (low-fidelity) concept goes to the next stage of the “assembly line,” where a UI designer composes the final (high-fidelity) interface based on the prototype.
3. The interface then makes its way to the development team, which tries to translate the graphical vision into code in a suitable environment.
4. The product is then tested for bugs, but also for how the implementation corresponds with the initial design.
5. If everything went well, the product gets released to users.

But there is a small problem – everything rarely goes well …

Not the perfect world of physics – real-life obstacles

The issue with “everything goes well” is that it’s an ideal scenario that will almost never happen.

This is because such a sequential process notoriously involves communication problems that occur between the stages. I mean problems like misreading intentions, technical problems, and either party failing to realize that for some reason, the proposed solution is impossible or too costly.

Each of these traffic problems is a threshold that slows down or completely stops the process. Wasting the time of each of the specialists involved and, at the same time, wasting money as a result .

Let's try to reduce our equation to a single-screen mobile app

We’ll use approximations and generalizations to visualize the cost involved.

So, to design a single screen, we need experts from several fields: a UX designer, a UI designer, an Android developer, an iOS developer, and a tester. One screen and five specialists translate into about 50 hours of work.

Next, let’s multiply this by a simplified hourly rate, which gives us $5,000. Assuming that our process consists of 20 screens, the end result will be $100,000 .

Design system as a game-changer

Now, what does this process look like when we have a design system in place? And what is this tool anyway?

In the simplest terms, a design system relies on building interface components, which are then constantly reused in the manufacturing process . In a way, we create LEGO blocks that we can then use to assemble screens or processes. Along the design-development line, a digital ecosystem is produced, and it becomes an increasingly rich set of elements.

Once we have a design system, the process changes

1. In the first step, the designer builds processes with design system components.
2. The development team uses previously written code, applying new logic and context to finished components.
3. Testers no longer need to verify the correctness of interface design.

In the case of a design system, the roles of UX and UI designers are usually reduced to a single person – the product designer, who uses already existing elements. Developers do not have to rewrite code, and the role of the tester is simplified.

Coming back to our “one screen” calculation – if we use a design system, the time needed to build it is about a third less, so 35 hours. For a 20-screen process, we end up with savings of approximately $35,000.

That's what all the magic is about. Reversing the order of the process, defining the components, and then creating documentation that predicts the behavior of each element on various devices, error handling, dark mode, and all the issues that are worth solving once, instead of being discussed over and over again.

Different but alike?

All that is possible because, in reality, the interfaces of digital products are very repetitive . Take a look at any app on your phone – unless you've come across a product that’s a glitch in the matrix, you should see a reasonably orderly set of graphics, navigation elements, text areas, or carousels.

There are so many guidelines and restrictions from Android/iOS software manufacturers and so many user habits derived from experience with other products that reinventing the wheel is an all-around wrong strategy. Of course – this repetitiveness of the interface is not synonymous with the fact that we should constantly design the same thing. On the contrary – detecting areas where technological cleverness can be exploited will allow you to carve out time for real innovation (more on that in a moment).

Nevertheless, the repetitive nature of the interface increases the importance of the word "reusability," which in turn is the main keyword of the design system-based process. It's not just the repeated use of a single element: it's also the removal of the aforementioned “slowdown thresholds.”

The archaic product development process causes communication problems between the different stages of interface development. Building a design system pulls all these problems out in front of “the parenthesis,” solves them at a higher level, and gets rid of them once and for all.

Every component, which we will reuse at the design stage, already has its representation in the code repository. It has passed testing and can be reused at almost no cost from the point of view of the interface layer itself.

Even more significantly, the savings grow in direct proportion to the product’s lifespan . With each iteration, we add lines of code, which would lead to an increase in technological debt, if added in an uncontrolled manner. When considered before introduction, bearing in mind systems thinking and the idea of reusability, they will make the product gain modern development speed and become a tool for dynamic business scaling .

A multitude of benefits

Saving time and money is a strong argument on its own, with most studies and research on design systems suggesting gains of around 30% for the speed of the manufacturing process and savings on interface construction. This is a significant gain, which becomes greater the longer the product stays on the market and the greater the scope of its interface.

However, time and money are not the only advantages of having a design system . There are many, but let’s take a look at four main ones.

• You can use the time you saved to enhance product quality . The resulting “wow effect” will contribute to user loyalty, which in turn will ensure higher profits. The money saved, when invested properly, will come back to you doubled.
• Repeated use of the same elements allows for consistency of both style and usability . The latter is a particularly important factor that will then determine whether users will judge your product as comfortable, useful, and understandable.
• Consistency is also a stepping stone to rapid and global product redesigns . The times when every product went through a redesign every two years are over. With a design system in place, you can very easily adapt the product to new branding or make changes to keep up with trends.
• An organized design process and clear code make the design system a “ single source of truth .” They eliminate the bus factor, allow for much faster deployment of new team members, and make work more enjoyable. And a happy team usually means a successful product.

It’s never a good time to lose money

The product interface is the point of contact between the user and the technology . That is why it’s important and impossible to ignore each time a product is created or when a plan to expand the product appears.

Regular and dynamic expansion of the product is also the foundation of a successful service. How quickly a mobile application is able to respond to user needs or to the results of data analysis decides the quality of the service and the team behind it. In order to respond quickly, it is necessary to strip away all the problems and technical limitations that could shake up the process.

Design systems are an effective tool for business scaling. It wouldn’t be controversial to say that it is simply impossible to make a product fast enough without them.

Netflix, Spotify, Airbnb, Uber, Revolut – each of them bases its interface development process on its own design system, and the benefits of this way of working are often the subject of studies or presentations by their design teams.

Of course, this is just a short list of products that have been optimized and now follow the modern approach to building digital services, saving both time and money. We’re quite certain that your product would also benefit from the implementation of a design system.