Sechs echte Vorteile bei der Einführung eines Designsystems
Das Designsystem als Single Source of Truth
Julia Riederer
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.
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.
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.