Six benefits of using a design system

A Design System as Single Source of Truth

 

Company silos: The problem with achieving consistency

Companies with a focus on digital products today face the challenge of creating a uniform user experience and consistent design across many touchpoints and products. However, scaling design in this way does not come easily. Behind the product landscape of a company are a multitude of teams and stakeholders, some of whom are in close contact with each other, but who are much more often stuck in the frequently invoked “corporate silos” and have little to do with each other.

If you look at the underlying processes, a central design artefact such as a sketch library or a style guide often serves as a “set of rules”. It structures the design, but does not synchronise it with development. In the end, such an artefact remains a mere template that each product team “rebuilds” anew. In the effort to achieve visual consistency, friction losses and redundancies occur quickly, which can cause high costs. Design updates are delayed or only partially implemented. Last but not least, teams lose valuable time that could be invested in improving the quality of the products.

In view of this extra effort, we asked ourselves: Does every team really have to reinvent the wheel? Of course not. And that’s why, together with our customers, we have developed design systems that bring design and code together and thus not only lead to a significant return on investment, but also have numerous other positive effects. We have compiled the advantages for you.

Return on Investment of design systems

6 Benefits of using design systems

In developing design systems with corporate clients we now can present some insight in the topic. In our opinion, these are the most important benefits of using a design system:

• Quicker time to market

  Leaner workflows that require fewer coordination and approval processes lead to time savings in both interface design and front-end development. This significantly accelerates both the development of new products as well as their maintenance.

• Reduced susceptibility to errors

  Unlike with using a style guide, existing products do not need to be manually adapted when a design change is made. Product teams can use component updates from a node package provided by the design system team. This approach reduces the risk of errors. In this way, the design system can continue to evolve without making existing products obsolete. If a redesign occurs within the company, it can be rolled out in the existing design system.

• More efficient processes

  Anchoring design patterns in individual lines of code eliminates sources of error and redundancy. Daily work becomes more efficient, which also reduces costs. What does this mean in detail? Our design system is based on web components, which have a lower level of abstraction in their functional logic than the components of frameworks such as Angular or Vue. The result: a pattern that is developed as a web component can be mapped in any framework without much adaptation effort – and in just a few lines of code. This principle of framework agnosticism leads to better scaling of the design in the company, since teams with different technical bases can all fall back on the same source. In addition, if a new UI element is needed in a single team, it can be developed as a web component and easily made available to other teams throughout the company.

• Higher quality

  The budget savings can be reinvested directly in improving the products. In this way, the design system not only pays for itself in the medium term, but also increases the quality of the products – much to the delight of users and customers.

• Higher work satisfaction

  A design system that has been developed collaboratively and at eye level by designers, developers and stakeholders from the brand and specialist departments creates transparency and a solid framework for all stakeholders. This ultimately leads to greater acceptance because the various needs have been taken into account.

 

Our experience with introducing a design systems

As a single source of truth and participative element, a design system can sustainably close the gap between design and development. In addition to increased efficiency and better quality, it brings other side effects that have a positive impact on collaboration and design culture in the company. Nevertheless, it is hardly surprising that the introduction of a design system, especially in a large corporation, is an extensive project that cannot be accomplished in one fell swoop. In this regard, we have had good experiences with driving the development forward within individual projects or teams, which then act as ambassadors in the group. In this setting, feedback, data and experience on the impact of the system can be collected and components developed that can then be rolled out relatively easily in other teams.