Das Designsystem als Single Source of Truth

Julia Riederer

In diesem Artikel: Markenkonsistenz und einheitliche User Experience – ein Traum vieler Konzerne. Dabei sollte es Realität sein, dass außen erkennbar ist, welche Produkte zu welchem Unternehmen gehören. Dass über alle Touchpoints hinweg ein ähnliches Erlebnis erzeugt wird. Doch, je größer der Konzern und dessen Produktpalette, desto schwieriger wird genau das. Wir zeigen euch unsere Herangehensweise.

Konzern-Silos: Das Problem mit der Einheitlichkeit

Unternehmen mit Fokus auf digitale Produkte stehen heute vor der Herausforderung, eine einheitliche User Experience und konsistentes Design über viele Touchpoints und Produkte hinweg zu erschaffen. Eine solche Skalierung von Design gelingt jedoch nicht ohne Weiteres. Hinter der Produktlandschaft eines Unternehmens stehen eine Vielzahl an Teams und Stakeholder:innen, die zwar teils in engem Austausch stehen, jedoch wesentlich öfter in den vielfach beschworenen „Konzern-Silos“ stecken und nur wenig miteinander zu tun haben.

Schaut man auf die darunterliegenden Prozesse dient häufig ein zentrales Designartefakt wie ein Sketch Library oder ein Styleguide als „Regelwerk“. Es strukturiert das Design, synchronisiert es jedoch nicht mit der Entwicklung. Ein solches Artefakt bleibt schlussendlich eine bloße Vorlage, die jedes Produktteam aufs Neue „nachbaut“. Bei der Bemühung um visuelle Konsistenz entstehen schnell Reibungsverluste und Redundanzen, die hohe Kosten verursachen können. Design-Updates werden verschleppt oder nur teilweise durchgeführt. Nicht zuletzt verlieren Teams durch die aufwendige Pflege wertvolle Zeit, die in die qualitative Verbesserung der Produkte investiert werden könnte.

Angesichts dieses Mehraufwandes haben wir uns gefragt: Muss wirkliches jedes Team das Rad neu erfinden? Natürlich nicht. Und deshalb haben wir zusammen mit unseren Kund:innen Designsysteme entwickelt, die Design und Code zusammenbringen und damit nicht nur zu einem signifikanten Return on Investment führen, sondern auch zahlreiche weitere positive Effekte haben. Die Vorteile haben wir für euch zusammengestellt.

Ihr möchtet mehr über die technischen Aspekte von Designsystemen erfahren? Mein Kollege Tim geht in seinem Artikel zu Web Components näher darauf ein.

Return on Investment von Designsystemen

Warum sich ein Designsystem lohnt: 6 Vorteile

Wir haben Designsysteme für und mit großen Unternehmen entwickelt und Erfahrungen sammeln können. Hier die sechs wichtigsten Vorteile auf einen Blick:

Time to Market

Schlankere Abläufe, die weniger Abstimmungs- und Freigabeprozesse erfordern, führen zu zeitlichen Einsparungen sowohl im Interface Design als auch im Frontend Development. Das beschleunigt sowohl die Neuentwicklung von Produkten, als auch deren Pflege signifikant.
Geringere Fehleranfälligkeit

Anders als beim Styleguide, müssen bestehende Produkte bei einer Designänderung nicht manuell angepasst werden. Produkt-Teams können auf Component Updates aus einem Node Package zurückgreifen, das vom Designsystem Team bereitgestellt wird. Diese Vorgehensweise verringert die Fehleranfälligkeit. Das Designsystem kann sich auf diese Weise ständig weiterentwickeln, ohne dass bestehende Produkte veralten. Kommt es innerhalb des Unternehmens zum Redesign, kann man das im bestehenden Designsystem ausrollen.
Effizienzsteigerung

Die Verankerung von Designpatterns in einzelnen Code-Zeilen eliminiert Fehlerquellen und Redundanzen. Die tägliche Arbeit wird effizienter, wodurch sich auch Kosten reduzieren. Was heißt das im Detail?

Unser Designsystem basiert auf Web Components, die in ihrer Funktionslogik auf einer tieferen Abstraktionsstufe ansetzen, als die Komponenten von Frameworks, wie Angular oder Vue. Die Folge: Ein Pattern, das als Web Component entwickelt wird, lässt sich ohne großen Anpassungsaufwand in jedem Framework abbilden – und zwar in wenigen Code-Zeilen. Dieses Prinzip der Framework-Agnostik führt dazu, dass das Design im Unternehmen besser skaliert, da Teams mit unterschiedlicher technischer Basis alle auf die gleiche Quelle zurückgreifen können. Zudem: Wenn in einem einzelnen Team ein neues UI-Element benötigt wird, kann es als Web Component entwickelt ganz einfach den anderen Teams im gesamten Unternehmen zur Verfügung gestellt werden.
Bessere Qualität

Die Einsparungen im Budget können direkt in die Verbesserung der Produkte reinvestiert werden. Auf diese Weise bezahlt sich das Designsystem mittelfristig nicht nur selbst, sondern erhöht auch die Qualität der Produkte – sehr zur Freude von Nutzer:- bzw. Kund:innen.
Akzeptanz

Ein Designsystem, das kollaborativ und auf Augenhöhe von Designer:innen, Entwickler:innen und Stakeholder:innen von Marke und Fachabteilungen entwickelt wurde, schafft Transparenz und einen festen Rahmen für alle Anspruchsgruppen. Das führt letztlich zu einer höheren Akzeptanz, weil die verschiedenen Bedürfnisse berücksichtigt wurden.

Vorteil Nummer 6: Überbrückung der Design-Development-Gap
In der Praxis entstehen zwischen Design und Frontend-Entwicklung immer wieder Redundanzen: Artefakte des UX Designs müssen im Prozess nachgebaut werden, was zu Fehlern und einem erhöhten Arbeitsaufwand führt. Ein Designsystem schließt diese Lücke als Single Source of Truth, sodass diese Probleme der Vergangenheit angehören.

Einführung eines Designsystems: Unsere Erfahrungen

Ein Designsystem kann als Single Source of Truth und partizipatives Element die Lücke zwischen Design und Entwicklung nachhaltig schließen. Neben Effizienzsteigerungen und besserer Qualität bringt es noch weitere Nebeneffekte, die positiv auf Kollaboration und Designkultur im Unternehmen wirken. Dennoch ist es wenig überraschend, dass die Einführung eines Designsystems gerade im Großkonzern ein umfangreiches Projekt ist, das nicht auf einen Schlag gelingen kann. Wir haben gute Erfahrungen damit gemacht, die Entwicklung innerhalb einzelner Projekte bzw. Teams voranzutreiben, die dann im Konzern als Botschafter fungieren. In diesem Setting können dann bereits Feedback, Daten und Erfahrungen zur Wirkung des Systems gesammelt sowie Komponenten entwickelt werden, die im Anschluss relativ einfach in weiteren Teams ausgerollt werden können.