Effizientere Markenkonsistenz durch ein Designsystem mit Web Components

Brand consistency via design systems: Web Components as new best practice

Title image: Brand consistency and design systems
Brand consistency at enterprise level: Brand management is particularly challenging for companies with many teams, touchpoints and a heterogeneous development landscape. However, consistent brand management creates a competitive advantage. We have now developed a design system that is based on Web Components and thus improves efficiency and quality in brand management.

 

Brand consistency is a challenge at enterprise level

Creating a consistent brand experience is an essential task for companies. Examples such as Apple show how a holistic design can effectively reach the customer through all products and ultimately impact usage and purchase decisions. Recognizability helps people build an emotional bond with a brand and literally become fans. However, brand consistency becomes a complex challenge with increasing company size as the ambition to realize consistency in design collides with a heterogeneous development landscape. Therefore, the question of how to ensure a consistent brand experience at the enterprise level without generating unjustifiable cost and effort arises quite frequently among brand managers.

Especially in the realm of digital products, design often encounters a problem. In most organizations, a wide variety of frameworks will be used between its different teams. Thus, for each team every design update means an increased workload because of the necessity to adapt changes according to the respective framework. This process can quickly become a source of errors, produce inconsistencies, and undermine the acceptance of the design guidelines. If the effort to realize a consistent design exceeds its perceived usefullness, advocating consistency becomes a fool’s errand. The resulting friction will make it difficult to reach a consistent brand experience, both at any given point in time as well as in the process of evolving the brand over time. However, there is still some good news because we think we might have developed just the right solution to this conundrum. The answer might lie in a new evolution of a design system that solves most of these problems rather elegantly. What this means for brand consistency we want to discuss in the following blog post.

Design guidelines and style guides speak the language of authoritarian brand management. High effort, low benefit. Whoever wants to achieve real participation and identification with the brand invests in a design system.
Felix Guder

Brand consistency strengthens confidence and trust

Brand should be simple, not tedious

Above all, brand happens mainly in our minds. Therefore, it is important that it doesn’t strain its audience. Only a consistent brand creates trust and loyalty, and a corresponding view of the product. Approval, in this regard, is only possible through intuitive experience, and the basis for this is consistency in design. This notion is not based on an obsessive tendency of us designers to create order. Rather, consistency is an essential element that structures human perception. This is especially true for visual design where inconsistency quickly turns into complexity. Consequently, a brand is generally at risk of springing this trap since every brand organizes a structure of a variety of elements. Finally, the active processing of complexity is tedious for the human brain, a phenonemon we have known since Daniel Kahanemen. Therefore, complexity is exactly what we need to avoid, because brand should not be tedious.

This becomes very relevant when a company wants to create a coherent brand experience along many touchpoints of a customer journey. Suddenly, many channels, projects, and products with ownership in different teams who use a variety of different frameworks have to be taken into account. As a result, contractions and inconsistencies in the brand experience arise, which is especially a problem in digital media. These inconsistencies will then directly translate into critical judgements about a brand on the part of the customer. For this reason alone, it is advisable (and often quite successful) to (re-)think design as part of the corporate strategy. The reason: Since consistent design reduces complexity, our brain is particularly pleased about a holistically designed brand.

Why brand becomes complex at the enterprise level

These are the most important drivers of inconsistencies

To date, we have conducted a number of studies on the subject of brand consistency with our clients that have shown one thing in particular: Consistency along a customer journey is almost always an explicit goal, but it is rarely achievable. Visual design, language, use of brand elements… between varying contexts, inconsistencies will arise again and again.

The following factors have proven to be the main drivers of these inconsistencies:

1. Missing or inadequate product design guidelines
2. Parallel existence of products in several states of development or life cycles
3. Inadequate acceptance of design guidelines or too much room for interpretation
4. Lack of internal communication and coordination on design between different teams and departments
5. Fluctuating design quality due to varying design budgets
6. Silo structures within the organization

 

Technical infrastructure: The hidden driver of complexity

The factors we list above are not surprising and are often encountered in companies that have not yet adopted design as an important part of their strategy. More surprising, in contrast, is another driver of complexity we found during our research. And this one is hard to keep in check even for companies with well-developed design competence. Especially with regard to digital products it is the underlying technical infrastructures, the systems and frameworks used for product development, that create complexity.

When we take into account an orginization as a whole, inconsistency is often rootet in its technical ecosystem on the enterprise level. Long-established and grown structures will have produced a multifaceted development landscape that becomes increasingly harder to manage. In frontend development, for example, teams will use different frameworks depending on their requirements and preferences, and as a result design specifications may lead to a considerable amount of work in adapting components. Therefore, depending on budget, beliefs, deadlines, and motivation of each team the results will be true to the guidelines in only varying degrees. Thus, the produced inconsistency literally follows a system.

Image: Brand consistency means great effort. A single component often needs to be rebuilt hundreds of times.
Tech as a driver of complexity
The design of a single button, implemented over many projects and touchpoints, leads to a high degree of customization effort in practice.

Image: Web Components can display the same design in many different settings without additional workload.
Web Components as the solution
Our design system uses the web standard to eliminate the need for adaptation via simple code, even in heterogeneous development landscapes.

A design system based on Web Components

Elegant solution developed in practice

The results of our research show that inconsistency has two main causes: One technological and one human. A heterogeneous development landscape can necessitate a lot of coordination work in order to achieve consistent design, and the constant adaptation of individual components can take a lot of time and effort. These difficulties, then, are exactly what we wanted to address in projects with our clients, and we think we found an elegant solution: In a long process encompassing research and the growth of our own organization we developed a new type of design system that is based on Web Components. And we were also able to test it in cooperation with two DAX 30 companies.

In essence, Web Components are a relatively new web standard whose logic is based on a deeper level of abstraction than the components used in specific frameworks such as Angular or Vue. Without getting too technical, this means that after a process of initial developmental work, the resulting system can provide components that can be used in the form of a single line of code in any framework and by any team. This eliminates the additional work that would otherwise be necessary to adapt components, and consistency across different teams and products suddenly becomes easy. The design system functions as a single source of truth that can be maintained, developed and used in collaboration, which in turn saves considerable time, budget and coordination requirements. Last but not least, it provides a much simpler basis to further develop a brand without a process that creates headaches for those responsible for brand management.

Our initial experiences in that regard show, that such a design system actually makes achieving brand consistency easier than producing inconsistencies
Felix Guder

Achieving brand consistency becomes easier than creating inconsistency

Testing the design system in practice

The idea described above is more than just theory. By now, after a period of extensive research and the acquisition of several talented coders for our team, we finished the development of a complete toolchain, which we are currently testing with two corporate clients. The goal is to refine the system so that it can be a flexible solution that scales particularly well in larger organizations. Our initial experiences in that regard show, that such a design system actually makes achieving brand consistency easier than producing inconsistencies. As a result, we expect our clients to save time and budgetary resources which they will be able to reinvest in the quality of their products. On the user side, this should increase trust and confidence in a brand through a more consistent experiences. And, last but not least, we believe that the system can also foster a better design culture in an organization through transforming the work with guidelines from an unwelcome effort into a positive, collaborative experience.