KLiNGEL

Design system times 13

The task:

Development of 1 multi-brand design system, for all 13 B2C brands of the KLiNGEL Group with a total of 56 country variants.

The challenge: many different brands under one roof

Well-known best-ager fashion brands such as Alba Moda, Impressionen, Wenz and MONA belong to the KLiNGEL Group. Whilst the idea was that all of these brands should use one design system together it was important that they would still continue to appear as individual shops. The idea: from the advantages of a design system – faster time-to-market and saving valuable development costs – not only one online shop should benefit, but all 13 of the group. Thus, the advantages multiply with each additional brand that is added to the system – a design system times 13.

This digital strategy presented us with a great challenge. We were aware that such an efficient system could only be achieved with a high degree of standardization and unification. At the same time, the brands need enough space to play out their individual corporate design. After all, the regular customer should hardly notice the changeover, recognize her shop immediately and feel right at home there.

It took a well thought-out design strategy to be able to combine these different requirements.

A selection of the brands united in the KLiNGEL Group:

The solution: 13 pattern libraries in one

The key to problem solving should be a technique already known in web development: the use of a powerful Pattern Library . Such a solution helps to develop websites with a uniform user interface and to control the design centrally. Think of a pattern library as a big box full of building blocks that web developers can use. Only that the building blocks are not wooden cubes, but design elements such as buttons, form fields and headings. Since the same components are used over and over again across the entire website, a uniform and consistent user experience is created.

In our case, however, the requirements for a pattern library go beyond what has been customary up to now: it should use the design components not just for one brand, but for all 13. The problem: a pattern library already contains hundreds of elements for one website alone. With every additional brand, the number of components would double. And with 13 brands, the elements would have grown to an unmanageable number.

A special logic, however, makes it possible to use such a technology for our purposes: we designed a common set of overarching building blocks that are identical for all brands. We refer to this part of the pattern library as the design core . In the next step, the design core can be individualized for each brand. For this purpose, we established effective adjusting screws in the form of brand variables within the pattern library.

The design core ensures the necessary standardization, while each brand can be individualized within a defined framework with the help of brand variables.

The pattern library with an overarching design core and brand-specific “adjusting screws”:

The templates show the differences

Just like with the Atomic Design method, the shop templates are made up of the design components of the pattern library. The individual shops all use the same page templates. So we only had to design each page type, be it article detail page or shopping cart, once for all 13 shop offers. The individual character of each brand shop is created solely by the brand-specific design patterns with which they are linked. The design patterns of the MONA brand flow directly into the templates of the MONA shop, while the Alba Moda branded patterns flow into the templates of the Alba Moda shop. The 13 brand shops present themselves in their own individual guise, despite many similarities.

The multi-brand design system at a glance: from the design core to the delivery of the various brand shops, all components interlock perfectly. The result is a highly efficient overall system with the help of which all the different brand shops of the KLiNGEL Group can be controlled centrally:

Our role

Our role in this major project was primarily to plan and design the design system from scratch together with the internal UX team, to design the shop templates and to set up the brand implementations. The basic idea that a pattern library with variable brand control could be a solution for this project was developed by the software house neuland – Büro für Informatik developed. Neuland is also responsible for the technical conception, implementation and provision of the multi-brand pattern library. The pattern library is based on the open source software “UIengine” by Dennis Reimann . The application is freely available on Github .

In addition, other internal and external digital experts, such as developers, system architects, product managers and analysts, are working on this project. Together, the platform is continuously developed in an ongoing process (continuous deployment).

“The H2D2 designers have perfectly solved the complex task of conceiving a multi-brand design system. We were not only able to convert 13 brand shops of the KLiNGEL Group to a modern and user-friendly UI within a very short time. The modular system also enables us to continuously develop our shops so that we can keep up with the rapid pace of the market.”

– Sven Christian Andrä · Chief Digital Officer (CDO) · KLiNGEL Group

All teams under one roof thanks to the Pattern Library

The fact that the KLiNGEL Group’s Pattern Library became a success and was accepted by all project participants is due in particular to two properties of the system:

#1 The pattern library is connected to the productive code of the platform. Since such a common and binding library is available, the various project teams can develop independently of one another and work on various features and sub-areas of the platform. This enables a high implementation speed and still ensures a visually and functionally comprehensive interface.

#2 The Pattern Library is open to stakeholders from all disciplines and promotes collaborative work. Not only does the Pattern Library serve as a knowledge database for product owners, developers and brand managers. Different disciplines are enabled to actively participate. As designers, we can make many creative settings on components or brand-specific variables directly in the code of the pattern library. We can also check directly in the application how the changes will affect the overall picture. This process saves valuable development time and time-consuming design iterations in graphics programs such as Sketch or Photoshop.

We can create sample pages directly from the components of the Pattern Library in order to make the design verifiable in real time in the application

The result

Just 1 1/2 years after the start of the project, 9 brands in a total of 28 country versions were successfully migrated to the new design system (as of February 2020). Another 4 brands in even more country versions will follow this year. With an efficiently planned design system, we were able to lay an important foundation for this rapid project development.