Um ihre digitalen Entwicklungsprozesse maximal effizient gestalten zu können, setzen Organisationen unterschiedlichster Art heute zunehmend Design-Systeme ein. Diese Design-Systeme werden dabei jedoch vor zahlreiche Herausforderungen gestellt, die durch Transformationsprozesse, Unternehmenszusammenschlüsse, Produktentwicklungen oder Veränderungen im Bereich der Markenidentität entstehen. Wie können Design-Systeme so aufgebaut werden, dass sie die weiter zunehmende Komplexität und die Herausforderungen, ihrer sich weiterentwickelnden Umgebung meistern können?
Wir wissen bereits, dass sich Design-Systeme ständig mit den Produkten, die sie in Szene setzen, weiterentwickeln. Um Aktualisierung und Skalierbarkeit garantieren zu können, benötigen sie flexible Strukturen. Es gibt aber noch weitere wichtige Punkte zu beachten. In diesem Artikel beleuchten wir die Aspekte, die wir für die wichtigsten Bausteine eines erfolgreichen Design-Systems halten.
Punkte, die es von Anfang an zu beachten gilt:
Kollaboration
Ein Design-System entsteht normalerweise aus der Initiative einer Geschäftseinheit oder einer Abteilung, die verschiedene Produktentwicklungsprojekte verantwortet und Design- und Entwicklungsressourcen durch die Einführung wiederverwendbarer Frontend-Programmierungselemente möglichst effizient nutzen zu wollen.
Obwohl die Einrichtung einer gemeinsamen Frontend-Entwicklungsbibliothek und eines UI-Toolkits die Konsistenz zwischen bisher isolierten Teamentwicklungen sicherlich verbessert, wird die wirkliche Effizienz eines Design-Systems von anderen Faktoren bestimmt, die eine echte Design- und Entwicklungszusammenarbeit zwischen den beteiligten Teams überhaupt erst ermöglichen und fördern.
Einer der wichtigsten Faktoren hierbei ist die Einbindung aller Stakeholder. Es ist klug, sämtliche Designer und Entwickler aus verschiedenen Teams zusammenzubringen und sie, ihre Probleme, Fragen, Zweifel, Vorschläge und Meinungen gemeinsam auszutauschen und diskutieren zu lassen. Jedem eine Stimme zu geben erhöht das Gefühl der Integration und Eigenverantwortung, was wiederum zu einem erhöhten Maß an Eigenbeteiligung, synchronisierten Arbeitsabläufen und effizienter Zusammenarbeit führt.
Tipp: Nehmen sie Kontakt mit den Personen auf, die das Design-System nutzen und lernen Sie ihre Bedürfnisse kennen. Organisieren Sie regelmäßig stattfindende Besprechungen mit strukturierter Moderation und einer teamorientierten Themenagenda mit den Verantwortlichen von Produktteams, Designern und Frontend-Entwicklern.
Strategie
In großen oder fusionierenden Organisationen kann es erforderlich sein, dass ein Design-System von neuen Geschäftseinheiten und den entsprechenden Stakeholdern eingeführt und akzeptiert werden muss.
Die beteiligten Parteien werden dies jedoch nur dann wie geplant umsetzen, wenn ihnen der Wert des Systems bewusst ist. Daher ist es wichtig, das Design-System von Anfang an als ein Projekt zu betrachten, das eine klare Strategie erfordert. Diese Strategie sollte Folgendes definieren:
1. Grundlegende Werte – Auf welchen Werten basiert das Design-System?
2. Anwender und deren Bedürfnisse – Für wen wird das System aufgesetzt?
3. Produkt-Ökosystem – Welche Produkte und Teams sind einzubeziehen?
4. Team – Wer ist verantwortlich? Welche Ressourcen stehen zur Verfügung?
5. Vision, Einsatzzweck und Ziele – Warum setzen wir das System auf?
6. Produkteigenschaften – Was ist enthalten oder wird geliefert?
7. Leistungsversprechen – Was sind die Anwendungsvorteile?
8. KPIs – Wie lassen sich Effekte messen?
9. Strategieplan – Ein iterativer und aktualisierter langfristiger Plan
Tipp: Setzen Sie bei der Definition von fiktiven Nutzertypen an, indem Sie zunächst die Bedürfnisse aller beteiligten Teams sammeln und diese Informationen hinsichtlich der Bedürfnisse eines jedes Nutzertyps des Design-Systems analysieren.
Atomare Flexibilität
Ein atomarer Design-Ansatz begünstigt die Flexibilität und Skalierbarkeit der Komponenten für neue Anforderungen. Token und Komponenten eines gut strukturierten Design-Systems lassen sich leichter an Herausforderungen anpassen, die durch neue Produktanforderungen oder neue Markenidentitäten entstehen, und ermöglichen ein konsistentes Nutzererlebnis über verschiedene Produkte hinweg.
Tipp: Thema Flexibilität in jeglicher Hinsicht im Auge zu behalten ist von elementarer Bedeutung. So ist es beispielsweise lohnenswert, über die Namensstruktur von Token nachzudenken, da zum Beispiel Farbnamen in der Bezeichnung bei der Definition der Markenidentität eine andere Bedeutung haben als in anderen Kapiteln.
Vorlagen, Beitragsflussdiagramme und Designprinzipien
Die Dokumentation von Komponenten allein reicht nicht aus, um Einheitlichkeit zwischen Produktteams zu schaffen. Da Designer Informationen auf viele verschiedene Arten interpretieren und verwenden (was häufig zu vielen unterschiedlichen Lösungen für ähnliche Zwecke führt), wäre es praktisch Vorlagen mit bereits programmierten Komponenten dokumentieren zu können, um eine gewisse Design-Grundkonsistenz zu garantieren.
Vor der Erstellung neuer Komponenten ist es daher sinnvoll, sich zu vergewissern, dass nicht bereits programmierte Komponenten existieren, die wiederverwendet oder an neue Produktanforderungen angepasst werden können. Dies könnte beispielsweise mittels eines Flussdiagramms zur Erstellung und Verwendung von Komponenten geschehen. Da die meisten neuen Komponenten in der Regel aus dem Bereich des Produkt-Designs kommen, bietet es sich an, ein solches Diagramm aus Design-Perspektive aufzusetzen und dabei verschiedene Optionspfade zu den Entwicklungsstufen in Betracht zu ziehen.
Die Berücksichtigung guter Design-Praktiken für eine optimale User Experience über verschiedene Einzelprodukte hinweg, kann innerhalb des Design-Systems konsolidiert und gefördert werden, indem Designprinzipien definiert und dokumentiert werden. Um den jeweiligen Design-Teams ein effektives Werkzeug an die Hand geben zu können, sollten diese Prinzipien auf den in der Strategie definierten Grundwerten basieren und detaillierte Anwendungsbeispiele enthalten.
Tipp: Diagramme, Prinzipien und weitere Richtlinien sollten gemeinsam mit allen Designern und Entwicklern, die an der Erstellung des Design-Systems beteiligt sind, erstellt und validiert werden, da so sichergestellt werden kann, dass sie von jedem Stakeholder auch übernommen und angewendet werden.
Werkzeuge und Verfahren
Die Verwendung von zu vielen Designproduktions- und -dokumentationswerkzeugen erhöht die Komplexität und erschwert die Gewährleistung der Designkonsistenz und der technischen Spezifikationen. Wichtige Schritte sind deshalb die Prüfung verfügbarer Werkzeuge und der Einsatz von Produkten, die eine Konsolidierung von möglichst vielen Funktionen in einer einzigen Umgebung gestatten.
Tipp: Manche Werkzeuge fassen zahlreiche Funktionen in einem einzigen Paket zusammen. Sie sollten sich diese genau ansehen und dem jeweiligen Team dann die Möglichkeit geben, sich für die beste Lösung zu entscheiden.
Effiziente Dokumentation
Eine klare und effiziente Dokumentation beschleunigt die Produktion, verhindert siloartige Entscheidungsfindungsprozesse und es lassen sich damit ressourcenschonend unnötige Wiederholungen und doppelter Arbeitsaufwand vermeiden.
Mittlerweile existieren einige gute Dokumentationsplattformen, die für Design-Systeme eingesetzt werden können. Eine der wertvollsten Funktionen, die man bei der Auswahl berücksichtigen sollte, ist die Möglichkeit, live-programmierte Beispiele zu präsentieren. Es ist extrem hilfreich, Komponenten bereits in der Dokumentation in Aktion sehen und testen zu können. Dies ermöglicht es beispielsweise responsives Verhalten der entsprechenden Komponenten auf Webseiten zu testen.
Benutzerdefinierte Plattformlösungen geben Designern die Möglichkeit, die Zuverlässigkeit von Komponenten „live“ zu testen, wenn beispielsweise Inhalte oder Sprachversionen geändert werden. Dies kann die Problemfindung in einem Design-System erleichtern, und helfen Punkte, die vor der Produktion des Endprodukts behoben werden sollten, zu definieren.
Tipp: Designer und Entwickler sollten sich darauf verständigen, welches Plattform-Tool ihre tägliche Arbeit mit dem Design-System am besten unterstützt. Welche Funktionen sind in der Lage, die Effizienz in der Produktion wirklich zu steigern?
Federführung und Kommunikation
Ein Design-System kann ohne effektive Kommunikation und gute Führung nicht erfolgreich sein. Ein erfolgreiches Design-System geht Hand in Hand mit einem Team von Designern, Entwicklern und anderen Produktbeteiligten, die sich gemeinsam dafür engagieren, maximale Effizienz in der Produktentwicklung, Benutzerfreundlichkeit, Zugänglichkeit und bessere User Experience-Werte zu erzielen. Eine positive Atmosphäre, die Vertrauen, psychologische Sicherheit und Transparenz fördert, ist unerlässlich für die Entwicklung von gegenseitigem von Respekt, Zusammenarbeit, Inspiration und Engagement von allen Beteiligten.
Tauschen Sie sich aus. Die Öffnung von Kommunikationskanälen, um Stakeholder einzuladen und über neue Funktionen auf dem Laufenden zu halten, oder die Förderung von Transparenz bei der Entscheidungsfindung sind ebenfalls hilfreiche Praktiken, deren Einsatz jedoch ohne eine gewisse Planung nicht effizient genug ist. Informationsüberfluss oder sich wiederholende Kommunikationsmuster können leicht übersehen oder ignoriert werden. Was sind die wichtigen Dinge, die kommuniziert werden sollen und an wen sind sie gerichtet? Welche Kanäle sollen für die verschiedenen Zwecke genutzt werden? Dies sind nur einige der relevanten Fragen, die man sich stellen sollte, bevor man Kommunikationsentscheidungen trifft.
Tipp: Häufigere und gut geplante Kommunikation können Stakeholder-Interesse und Engagement steigern.
Dedizierte Entwicklungsressourcen
Ohne die erforderlichen Entwicklungsressourcen (Design-Systementwickler) oder eine angemessene Verteilung der Entwicklungsarbeit (Beitrag der Teams) können all die zuvor genannten Punkte dennoch ins Leere laufen. Es ist daher sinnvoll, mindestens einen dedizierten Entwickler im Team zu haben, der die Frontend-Arbeiten rund um das Design-System planen, dokumentieren, koordinieren und leiten kann.
Tipp: Es ist wichtig, potenzielle Risiken im Hinblick auf Entwicklungsressourcen bereits im Voraus zu berücksichtigen und zu bewerten, falls die Anforderungen an das Frontend deutlich steigen.
Fazit
Ein Großteil des Erfolges eines Design-Systems hängt davon ab, wie gut es gelingt, alle Beteiligten in eine team-orientierte Gemeinschaft zu integrieren, die sich durch gemeinsame Ziele, Prinzipien und eine offene Kommunikation auszeichnet und die eine klare Strategie definieren kann.
Der Einsatz dokumentierter Entscheidungsdiagramme und von klar festgelegten Designprinzipien kann Produktteams effektiv dabei unterstützen, eine bessere und konsistente User Experience zu generieren.
Um die Flexibilität und Skalierbarkeit eines Design-Systems zu erhöhen, ist es daher wichtig, Komponenten auf der Grundlage einer atomaren Struktur aufzubauen und beschreibende Token-Namenskonventionen zu verwenden, die nicht durch Elemente einer bestimmten Markenidentität beeinflusst sind.
Die Sicherstellung ausreichender Frontend-Ressourcen und eine solide Arbeitsverteilung ist entscheidend, um effektiv und mit der erforderlichen Geschwindigkeit auf die Anforderungen der Produktentwicklung reagieren zu können.
