KLiNGEL

Designsystem^{hoch 13}

Die Aufgabe:

Entwicklung von 1 multimarkenfähigen Designsystem, für alle 13 B2C-Marken der KLiNGEL Gruppe mit insgesamt 56 Länderausprägungen.

Die Herausforderung: viele unterschiedliche Marken unter einem Dach

Zur KLiNGEL Gruppe gehören so bekannte Best-Ager Modemarken wie Alba Moda, Impressionen, Wenz und MONA. Sie alle sollen gemeinsam ein Designsystem nutzen aber weiterhin als individuelle Shops auftreten. Die Idee: von den Vorteilen eines Designsystems – schnellere Time-to-Market und einsparen wertvoller Entwicklungskosten – sollte nicht nur ein Online-Shop profitieren, sondern alle 13 der Gruppe. Somit potenzieren sich die Vorteile mit jeder weiteren Marke, die dem System hinzugefügt wird – ein Designsystem hoch 13.

Diese Digitalstrategie stellte uns vor eine große Herausforderung. Uns war bewußt, das sich ein so effizientes System nur mit einem hohen Maß an Standardisierung und Vereinheitlichung erzielen läßt. Gleichzeitig benötigen die Marken genügend Raum, ihr individuelles Corporate Design ausspielen zu können. Schließlich sollte die Stammkundin von der Umstellung kaum Notiz nehmen, ihren Shop gleich wiedererkennen und sich dort direkt zu Hause fühlen.

Es brauchte eine durchdachte Designstrategie, um diese unterschiedlichen Anforderungen vereinen zu können.

Eine Auswahl der zur KLiNGEL Gruppe gehörenden Marken:

Die Umsetzung: 13 Pattern Libraries in einer

Der Schlüssel zur Problemlösung sollte eine bereits in der Webentwicklung bekannte Technik sein: der Einsatz einer leistungsfähigen Pattern Library. Eine solche Lösung hilft dabei, Webseiten mit einem einheitlichen User Interface zu entwickeln und das Design zentral zu steuern. Vorstellen kann man sich eine Pattern Library als eine große Box voll mit Bauklötzen, aus der sich die Webentwickler bedienen können. Nur das es sich bei den Bauklötzen um keine Holzwürfel handelt, sondern um Designelemente, wie Buttons, Formularfelder und Überschriften. Da so über den ganzen Webauftritt hinweg, immer wieder die gleichen Bausteine zum Einsatz kommen, entsteht eine einheitliche und konsistente Nutzererfahrung.

In unserem Fall gehen die Anforderungen an eine Pattern Library allerdings über das bislang übliche Maß hinaus: sie sollte die Designbausteine nicht nur für eine Marke, sondern für alle 13 ausspielen. Das Problem: eine Pattern Library beinhaltet bereits hunderte von Elementen allein für eine Webseite. Mit jeder weiteren Marke würde sich die Anzahl der Bausteine verdoppeln. Und bei 13 Marken wären die Elemente auf eine unüberschaubare Zahl angewachsen.

Eine besondere Logik, macht es dennoch möglich eine solche Technologie für unsere Zwecke zu nutzen: wir gestalteten ein gemeinsames Set an übergreifenden Bausteinen, die für alle Marken identisch sind. Wir bezeichnen diesen Teil der Pattern Library als Designkern. Der Designkern kann im nächsten Schritt pro Marke individualisiert werden. Dafür legten wir innerhalb der Pattern Library wirksame Stellschrauben in Form von Markenvariablen fest.

Der Designkern sorgt für die notwendige Standardisierung, während sich mit Hilfe der Markenvariablen jeder Brand in einem festgelegten Rahmen individualisieren läßt.

Die Pattern Library mit übergreifendem Designkern und den markenspezifischen „Stellschrauben“:

Die Templates zeigen die Unterschiede

Analog der Atomic Design Methode, setzen sich die Shoptemplates aus den Designbausteinen der Pattern Library zusammen. Die einzelnen Shops greifen dabei alle auf die gleichen Seitenvorlagen zurück. So mußten wir jeden Seitentyp, sei es Artikeldetailseite oder Warenkorb, nur einmal für alle 13 Shopangebote gestalten. Der individuelle Charakter eines jeden Markenshops, entsteht allein durch die markenspezifischen Design Patterns, mit denen sie verknüpft sind. So fliessen die Design Patterns der Marke MONA direkt in die Templates des MONA-Shops, während die Alba Moda gebrandetet Patterns in die Templates des Alba Moda-Shops einfliessen. So präsentieren sich die 13 Markenshops, trotz vieler Gemeinsamkeiten, in ihrem individuellen Gewand.

Das multimarkenfähige Designsystem im Überblick: vom Designkern bis zur Auslieferung der unterschiedlichen Markenshops greifen alle Bestandteile perfekt ineinander. Es entsteht ein hocheffizientes Gesamtsystem, mit dessen Hilfe sich alle unterschiedlichen Markenshops der KLiNGEL Gruppe zentral steuern lassen:

Unsere Rolle

Unsere Rolle bei diesem Großprojekt lag vor allem darin, das Designsystem gemeinsam mit dem internen UX-Team von Grund auf zu planen und zu gestalten, die Shoptemplates zu gestalten und die Markenimplementierungen aufzusetzen. Die grundsätzliche Idee, das eine Pattern Library mit variabler Markensteuerung, eine Lösung für dieses Projekt sein kann, wurde vom Softwarehaus neuland – Büro für Informatik entwickelt. Neuland zeichnet sich auch für die technische Konzeption, Umsetzung und Bereitstellung der multimarkenfähigen Pattern Library verantwortlich. Die Pattern Library baut auf der Open Source Software „UIengine“ von Dennis Reimann auf. Die Anwendung steht auf Github zur freien Verfügung.

Zudem arbeiten an diesem Projekt weitere interne und externe digitale Experten, wie Entwickler, Systemarchitekten, Produktmanager und Analysten. Gemeinsam wird die Plattform in einem fortlaufenden Verfahren (Continous Deployment) permanent weiterentwickelt.

„Die Designer von H2D2 haben die komplexe Aufgabe ein multimarkenfähiges Designsystem zu konzipieren perfekt gelöst. So konnten wir nicht nur 13 Markenshops der KLiNGEL-Gruppe innerhalb kürzester Zeit auf ein modernes und nutzerfreundliches UI umstellen. Das modulare System macht es uns außerdem möglich, unsere Shops permanent weiterzuentwickeln, um so mit dem rasanten Tempo im Markt mithalten zu können.“

— Sven Christian Andrä · Chief Digital Officer (CDO) · Klingel Gruppe

Alle Teams unter einem Dach dank Pattern Library

Das die Pattern Library der KLiNGEL Gruppe zu einem Erfolg wurde und von allen Projektbeteiligten angenommen wird, ist insbesondere zweier Eigenschaften des Systems zu verdanken:

#1 Die Pattern Library ist an den Produktivcode der Plattform angeschlossen. Da so eine gemeinsame und verbindliche Bibliothek zur Verfügung steht, können die verschiedenen Projektteams unabhängig voneinander entwickeln und an verschiedenen Features und Teilbereichen der Plattform arbeiten. Damit wird eine hohe Umsetzungsgeschwindigkeit ermöglicht und dennoch ein visuell und funktional übergreifendes Interface sichergestellt.

#2 Die Pattern Library ist offen für Stakeholder aller Disziplinen und fördert kollaboratives arbeiten. Nicht nur dient die Pattern Library als Wissensdatenbank für Product Owner, Entwickler und Markenverantwortliche. Verschiedene Disziplinen werden befähigt aktiv mitzuwirken. So können wir als Designer viele gestalterische Einstellungen an Komponenten oder markenspezifischen Variablen, direkt im Code der Pattern Library vornehmen. Auch können wir direkt in der Anwendung prüfen, wie sich die Änderungen auf das Gesamtbild auswirken. Dieses Verfahren spart wertvolle Entwicklungszeit und aufwendige Designiterationen in Grafikprogrammen wie beispielsweise Sketch oder Photoshop.

Direkt aus den Komponenten der Pattern Library können wir Beispielseiten erstellen, um das Design in Echtzeit in der Anwendung überprüfbar zu machen

Das Ergebnis

Bereits 1 1/2 Jahre nach Projektbeginn konnten 9 Marken in insgesamt 28 Länderausprägungen erfolgreich auf das neue Designsystem migriert werden (Stand Februar 2020). Weitere 4 Marken in noch mehr Länderausprägungen werden in diesem Jahr folgen. Mit einem effizient geplanten Designsystem konnten wir einen wichtigen Grundstein für diese rasante Projektentwicklung legen.