Die Macht der Struktur – Ein Leitfaden zum Entwerfen von Systemmodellen

Designsysteme helfen Organisationen dabei, die Erfahrungskonsistenz über vielfältige Produkte, Dienstleistungen und Unternehmen hinweg aufrechtzuerhalten. Obwohl sie häufig mit visuellen Richtlinien und Komponentenbibliotheken in Verbindung gebracht werden, sind Designsysteme völlig unterschiedlich. Da immer mehr Unternehmen den Wert der Designkontinuität erkennen, etablieren neu gebildete Designsystemteams Best Practices, um die langfristige Relevanz der Designbemühungen ihrer Organisationen sicherzustellen.

Wenn sich mehrere Personen mit demselben Design beschäftigen, tauchen häufige Fragen auf. Wenn die Antworten auf diese Fragen nicht leicht verfügbar oder leicht verständlich sind, bleibt die Designkonsistenz auf der Strecke . Geben Sie Designsysteme ein.

Obwohl sie in der zeitgenössischen Designdiskussion beliebt sind, reichen die Wurzeln von Designsystemen Jahrzehnte tief in die Welt des Zeitungs- und Zeitschriftenverlags. Schon jetzt ist die systematisierte Hierarchie der redaktionellen Seiten offensichtlich, mit vorkonfigurierten Mustern, die eine konsistente Platzierung von Text und Bildmaterial ermöglichen.

Nach 2007 zwang der Zustrom digitaler Unternehmen Unternehmen dazu, bewusster auf Designkohäsion über Produkte und Plattformen hinweg zu achten. Es folgte ein Schwerpunkt auf visuellen Richtlinien und Komponentenbibliotheken, aber solche Dokumente verkalkten schnell auf den Seiten von PDFs und gemeinsam genutzten Dateien. Durch Versuch und Irrtum sind die Hersteller moderner Designsysteme dazu gekommen, ihre Arbeit als lebendige Produkte und nicht als statische Dokumente zu betrachten.

Zalando ist Europas führender Online-Marktplatz für Mode. Atlassian ist weltweit für seine Softwareentwicklungstools bekannt. Jedes hat große Produktteams und komplexe Designanforderungen. Was kann man aus ihren Designsystemmodellen lernen?

Zalando: Kollaboration als Designsystemmodell

Zalando ist Europas größter Online-Händler für Schuhe und hochwertige Streetwear. Mit mehr als 1.900 Marken wird seine riesige digitale Storefront von einem Team aus Hunderten von Designern und Entwicklern verwaltet. Um ein konsistentes Einkaufserlebnis über eine so große Auswahl an Waren zu gewährleisten, verlässt sich das Unternehmen auf ein stark strukturiertes Designsystem.

Man könnte meinen, dass die Aufrechterhaltung eines Designsystems für eine so hochkarätige Marke eine strenge Governance und einen engen Kreis von Design-Entscheidungsträgern erfordern würde. Stattdessen ist der Ansatz von Zalando dezidiert kooperativ. Anstatt sein Designsystem als eine perfekte Einheit zu betrachten, die der Entropie ausgesetzt ist, ermutigt Zalando seine Feature-Teams, bei Bedarf neue Ideen einzubringen. Wie funktioniert es?

Das Hauptziel des Designsystemteams (ZDS) von Zalando besteht darin, Feature-Teams bei der Entwicklung der Komponenten zu unterstützen, die sie benötigen, um Produkte zum Glänzen zu bringen. Gleichzeitig stellt ZDS sicher, dass die Integrität des Designsystems nicht beeinträchtigt wird. Auf diese Weise ist ZDS Verbindungsglied und Sicherheitsnetz zugleich.

Wenn ein Feature-Team von Zalando eine Lösung benötigt, die im Widerspruch zum Designsystem des Unternehmens steht, reicht es mithilfe eines einfachen Google-Formulars einen Beitrag ein. Wenn ein Beitragsticket eingeht, überprüft ZDS die Änderungsanfrage und kategorisiert sie als Leicht , Mittel oder Schwer . Jede Kategorie hat ihre eigene Abfolge von kollaborativer Überprüfung, Gestaltung und Iteration.

Sobald ein Beitrag diesen Prozess durchlaufen hat und Wirklichkeit wird, aktualisiert das ZDS-Team das zentral freigegebene Designsystemportal, zeigt die Änderungen in seiner wöchentlichen Demo und kommuniziert die Aktualisierungen an Interessengruppen und Kunden.

Die Einfachheit des Beitragsmodells von Zalando ermöglicht es verschiedenen Stimmen im Unternehmen, an der Weiterentwicklung des Systems mitzuwirken. Philosophisch gesehen betrachtet Zalando sein System als Produkt und nicht nur als Dokumentationsressource, die dazu dient, Produkte visuell aufeinander abzustimmen. Aus dieser Perspektive ergeben sich praktische Erkenntnisse, die auf verschiedene Designsystemmodelle anwendbar sind:

• Governance ist wichtig, aber Teams, die Designsysteme beaufsichtigen, sollten sich auf den Erfolg anderer Teams in ihren Organisationen konzentrieren.
• Gestalten Sie den Beitragsprozess für Features einfach, transparent und kooperativ und dokumentieren Sie die gesamte Kommunikation.
• Lassen Sie Designer und Entwickler gemeinsam an Änderungen am System arbeiten und fördern Sie so eine gemeinsame Systemsprache.
• Erstellen Sie eine Checkliste, die sicherstellt, dass bei jeder Aktualisierung des Systems Probleme mit der Barrierefreiheit behoben werden.

Atlassian: Design System Thinking neu gedacht

Atlassian erstellt Tools für die Softwareentwicklung und Zusammenarbeit, wie Jira und Trello.

Im Jahr 2017 wurde Atlassian umbenannt und eine Website für seine Designrichtlinien gestartet. Gleichzeitig hostete das Unternehmen eine separate Website, die seinen UI-Komponenten und den entsprechenden Codebeispielen gewidmet war.

Mit der Zeit passten sich die beiden Websites an , was zu Frustration und Verwirrung bei internen Design- und Entwicklungsteams, Drittanbietern von App-Integrationen und Atlassian-Kunden führte.

Atlassian erkannte eine wachsende Kluft zwischen Design und Entwicklung und beschloss, seinen Ansatz für Designsysteme zu überdenken. Design- und Entwicklungsdokumentation konnte nicht länger als wenig mehr als ein Mittel zum Generieren von Code und grafischen Ausgaben für Atlassian-Produkte behandelt werden. Das Designsystem musste als eigenständiges Produkt respektiert werden.

Um das Problem vollständig zu verstehen, unterzog sich Atlassian einer externen Prüfung und führte Umfragen zur Kundenzufriedenheit durch. Wie vorauszusehen war, wurden die beiden Seiten als falsch ausgerichtet und veraltet erachtet. Angesichts seines Rufs auf dem Spiel und eines großen Ökosystems von Designern, Entwicklern und Interessenvertretern, die Veränderungen forderten, erkannte Atlassian seine Mängel und machte sich daran, sein Designsystem neu zu erfinden.

Anfang August 2020 startete das Design System Team (ADS) von Atlassian eine neue Website, auf der Richtlinien für Marken, visuelle Elemente, Inhalte, Komponenten und Muster konsolidiert werden.

Außerdem das ADS-Team:

• Die Hälfte der UI-Komponenten auf das neue System migriert (der Rest ist in Arbeit)
• Dokumentation komplett umgeschrieben und vereinfacht
• Verbesserte Suche innerhalb des Systems
• Click-to-Copy-Code-Links hinzugefügt

Der aussagekräftigste Beweis für die reife Denkweise von Atlassian kommt von ADS Lead Designer Jennie Yip: „Ein verbreiteter Irrglaube über Designsysteme ist, dass sie nach ihrer Veröffentlichung zu einer unveränderlichen Quelle der Wahrheit werden. Ein Designsystem ist nie vollständig. Bei Atlassian fangen wir an, unsere Sicht auf unser Designsystem zu verändern … in eine lebendige und atmende Einheit.“

5 Designsystem-Prinzipien, an die man sich erinnern sollte

Die Schneide von heute ist die stumpfe Klinge von morgen – ein Problem, das alle Designdisziplinen durchdringt. Tools und Plattformen zum Erstellen und Hosten von Designsystemen sind reichlich vorhanden, aber die schnelle Entwicklung des digitalen Designs macht es rentabler, Designsysteme im Sinne von Leitprinzipien zu betrachten.

1. Designsysteme sind digitale Produkte.

Wie alle digitalen Produkte müssen Designsysteme regelmäßig gewartet werden. Systeme, die über lange Strecken ruhen, werden nicht mehr verwendet und verfallen.

2. Designsysteme sind kollaborativ.

Designsysteme müssen den Anforderungen von Stakeholdern gerecht werden, die mehrere Geschäftsfunktionen repräsentieren. Das Bereitstellen von Wegen für die Zusammenarbeit verhindert, dass Systeme innerhalb von Design- und Konstruktionssilos existieren, und stellt sicher, dass Produktideen nicht ignoriert werden.

3. Designsysteme leben von Einfachheit.

Designsysteme sind ein Ort, um Antworten zu finden, nicht um Auszeichnungen für auffällige Grafiken, komplizierte Animationen oder witzige Texte zu erhalten. Informationen sollten gut organisiert, leicht zu navigieren und durchsuchbar sein, während Textbeschreibungen den Kontext mit prägnanten Anweisungen ausbalancieren sollten.

4. Designsysteme erfordern Kommunikations- und Engagementstrategien.

Teams, die Designsysteme verwalten, müssen überlegen, wie sie den Stakeholdern regelmäßig Updates und neue Funktionen mitteilen. Newsletter, Q&A-Sitzungen und andere Outreach-Strategien sollten informieren und einbeziehen: „Das sind die Veränderungen. Deshalb sollten Sie sich darum kümmern.“

5. Designsysteme sind zentralisiert.

Designsysteme sollten an einem einzigen, cloudbasierten Ort zugänglich sein. Das Navigieren im System oder das Abrufen von Assets sollte keine Kenntnis eines bestimmten Designprogramms erfordern. Und denken Sie daran, dass die Veröffentlichung separater Richtlinien für Design und Entwicklung ein sicherer Weg zur Produktdissonanz ist.

Die Kraft struktureller Flexibilität im Design

Designsysteme sollen keine Monolithen sein, groß und imposant, für immer unverändert. Sie sind auch nicht nur Repositories für Designkomponenten und -stile. Sie sind lebende, atmende Produkte, organische Bestrebungen, die gepflanzt und beschnitten werden müssen. Als solche verdienen sie engagierte Teams, die sich aus Designern zusammensetzen, die sich für ihre laufende Wartung und Erneuerung einsetzen. Designsysteme sind schließlich nie fertig.

Letztendlich sind die besten Designsysteme unkompliziert, kollaborativ und flexibel. Sie beantworten drängende Designfragen mit Klarheit, begrüßen den Input von mehreren Stakeholdern und priorisieren wirkungsvolle Lösungen gegenüber dogmatischen Formeln.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Konsistenz ist der Schlüssel – So bauen Sie ein Figma-Designsystem auf
• Verständnis von Designsystemen und -mustern
• Figma vs. Sketch vs. Axure – Eine aufgabenbasierte Überprüfung
• Warum Materialdesign verwenden? Vor- und Nachteile abwägen
• Die Vergangenheit ist immer noch gegenwärtig – ein Überblick über zeitloses Design