Designsysteme gehen alle an

Für die Funktionen, die in diesem Beitrag genannt werden, wird ein Figma Organisation-Abo benötigt. Mehr erfahren.

Dieser Artikel ist der erste einer dreiteiligen Serie, die sich im Detail mit den Erfahrungen von Workday befasst und beschreibt, wie das Unternehmen sein Designsystem entwickelt, zum Produkt gemacht und letztendlich veröffentlicht hat.

Das Design ist das Herzstück eines jeden gelungenen Produkts. Es ist häufig das, was über Erfolg oder Misserfolg eines Geschäfts entscheidet. Die erfolgreichsten Unternehmen legen den Schwerpunkt auf gutes Design und das nicht nur in ihren Designteams, sondern auch in ihren Entwicklungsteams, beim Produktmanagement, auf Führungsebene und in vielen weiteren Bereichen. Teilweise stellen sie ihre Tools sogar öffentlich zur Verfügung, um ihre Stellung als branchenweiter Vorreiter im Bereich Design zu festigen. Es kann jedoch eine Herausforderung sein, für diese auf Design orientierte Ausrichtung eine Unterstützung auf so breiter Ebene zu erreichen, insbesondere dann, wenn dies mit einer derart großen Investition von Ressourcen einhergeht. Viele erkennen zwar den Wert für die Produktentwickler, sind sich aber nicht im Klaren darüber, welche Auswirkungen ein Designsystem auf diese größeren Zielgruppen haben kann.

Für mich bedeutet der Aufbau eines Designsystems nicht nur, eine Ressource für die Produktentwicklung zu schaffen, sondern auch ein Werkzeug, das in Kombination mit den richtigen Zielgruppen eine unternehmensweite Designmentalität fördern kann. Dies kann sich positiv auf das Einstellungsverfahren auswirken und sogar das Onboarding vereinfachen. Designsysteme verändern nicht nur den Bereich des Produktdesigns – sie revolutionieren die gesamte Dynamik und den Prozess der Produktentwicklung und -vermarktung.

Die Einführung eines Designsystems sollte in Phasen erfolgen, die sich an bestimmte Zielgruppen richten. Jede Phase bringt zusätzliche Vorteile mit sich. Stell dir die potenziellen Zielgruppen deines Designsystems als konzentrische Kreise vor, die jeweils einer dieser Phasen im Freigabeprozess zugeordnet sind. Dein Designsystemteam befindet sich in der Mitte der Kreise: Es legt den Grundstein für dein System und entwickelt es ständig weiter, basierend auf dem kontinuierlichen Feedback der umliegenden Zielgruppen. Die erste Gruppe außerhalb deines Designsystemteams ist das Produktdesignteam. Danach erfolgt eine Erweiterung auf entweder die restlichen Designteams innerhalb des Unternehmens oder die Produktentwicklungsteams. Die Größe und Organisationsstruktur deines Unternehmens bestimmen die Reihenfolge.

Bei größeren Unternehmen mit mehreren einzelnen Designteams (Marke, Marketing, Produkt usw.) haben wir festgestellt, dass diese so früh wie möglich eingebunden werden sollten. Dadurch kann eine einheitliche Marken- und Produktvision entstehen, bevor das Designsystem programmtechnisch umgesetzt wird. Dies ist in der Branche nicht allgemein üblich und würde intuitiv eher abgelehnt. Es hat jedoch mehrere entscheidende Vorteile, alle Designteams noch vor der Entwicklung des Designsystems ins Boot zu holen: So werden die isoliert arbeitenden Teams in das System einbezogen und erhalten bereits in der Anfangsphase Kontrolle darüber. Die Akzeptanz lässt sich viel leichter fördern, wenn es sich um etwas handelt, das gemeinsam entwickelt wurde. Wenn sich das Designsystem aufgezwängt anfühlt, ist die Vereinheitlichung ein chaotischer, langsamer Prozess, für den Refactorings, Änderungen und schwierige Gespräche erforderlich sind. Unserer Erfahrung nach lässt sich dieser Prozess weitaus einfacher gestalten, wenn alle Beteiligten von Anfang an Mitverantwortung für das System tragen, wodurch insgesamt eine gesunde Beziehung gefördert wird. Außerdem führt dieses Vorgehen zu einem einheitlicheren externen Marketing (z. B. Verwendung des gleichen visuellen Stils für die Marketing-Website im Vergleich zu den Screenshots auf dieser Website).

Als Nächstes erreicht dein Designsystem die erweiterten Produktteams, sodass Produktmanager*innen und Entwickler*innen es übernehmen und mitgestalten können. Danach gilt es, deine neue Designphilosophie mit dem Rest des Unternehmens (Führungskräfte, Vertriebsmitarbeiter*innen usw.) zu teilen. Zu diesem Zeitpunkt solltest du über die Ressourcen und Statistiken verfügen, um die Vorteile deines Systems zu vermitteln und die Beteiligten davon zu überzeugen, alle Aspekte des Unternehmens mit Blick auf gutes Design anzugehen. Nun bist du bereit, dein System der ganzen Welt zu präsentieren! 🌏

Phase eins: Produktdesignteams

Es ist ein aufregender Moment, wenn du beginnst, dein Designsystem mit deinen Produktdesignteams auf Herz und Nieren zu prüfen. Als erstes wirst du feststellen, dass die Workflows der Designschaffenden verbessert und vereinfacht werden. Unabhängig davon, ob du Sketch-Bibliotheken oder ein robusteres Tool verwendest (wir bei Workday lieben Figma), sorgen Systeme wie diese für Einheitlichkeit und bieten Vorteile wie automatische Komponenten-Updates und Versionsmanagement. Die begleitende Designdokumentation unterstützt den Wissensaustausch, reduziert Rückfragen und vermeidet, dass Design-Silos entstehen. Wenn wir dieselben Ressourcen, Methoden und Philosophien als einheitliche Designsprache verwenden, können wir uns mit kniffligen Designproblemen befassen, ohne uns um Dinge wie intern überliefertes Wissen, Markenidentität, Pixelpositionen oder Ähnliches zu kümmern.

Diese Phase ist auch der Beginn deines verbesserten Onboarding-Prozesses. Ein Designsystem ist ein sich ständig weiterentwickelndes Ökosystem – nicht nur eine Reihe von Komponenten und Farben, sondern eine Zusammenstellung von Richtlinien und eine bestimmte Art des Denkens. Die Dokumentation und die Ressourcen, die du zur Verfügung stellst, sollten mehr als die Hälfte deines Designsystems ausmachen (der Rest sind deine Komponenten). Diese Elemente sind nicht nur für die produktverantwortlichen Personen in deinem Unternehmen äußerst nützlich, sondern eignen sich auch hervorragend als Lehrmaterial. Wenn neue Designschaffende oder Entwickler*innen die Liste der verfügbaren Komponenten durchsehen, schnell auf ihre Verwendungs- und Inhaltsrichtlinien zugreifen und Informationen über bewährte Designpraktiken, Farbrichtlinien oder Recherchemethoden abrufen können, fühlen sie sich sofort stärker mit dem Unternehmen, dem Produkt und seinen Beschäftigten verbunden. Durch den schnellen Zugriff auf diese Inhalte wird die Wissensbarriere abgebaut und die entsprechenden Personen können im Handumdrehen relevante Arbeiten erstellen, die auf dein Designsystem abgestimmt sind.

Phase zwei: Designteams im gesamten Unternehmen

Jetzt kannst du dein Designsystem den Designschaffenden im gesamten Unternehmen vorstellen. In großen Unternehmen mit mehreren Designteams in den einzelnen Bereichen beginnen diese Teams zwangsläufig, sich aufgrund ihrer Spezialisierung und der üblichen engeren Zusammenarbeit innerhalb ihrer eigenen Teams in verschiedene Richtungen zu entwickeln (das kommt selbst in den besten Firmen vor 😉). Dieser Trend kann zu Design-Silos führen, die aus den einzelnen Teams der verschiedenen Produktbereiche wie Marketing, Branding, Customer Experience usw. bestehen. Die Berücksichtigung dieser neuen Zusammenhänge ist der Zeitpunkt, an dem dein Designsystem wirklich zu wachsen beginnt, und je nach Größe des Unternehmens wird es auf eine harte Probe gestellt. Dies ist auch die Chance für dein Designsystemteam, Feedback aus der Praxis zu erhalten, Workflows zu verbessern und alle größeren Probleme zu beseitigen. Obwohl die Arbeit des Designsystemteams am System in dieser Phase von entscheidender Bedeutung ist, ist dies auch der Beginn eines grundlegenden Wandels. Wenn immer mehr Designschaffende die neu verfügbaren Ressourcen nutzen, werden sie sich einbringen und fragen, wie sie bei der Weiterentwicklung helfen oder einen Beitrag leisten können.

Diese Phase der Systemeinführung ist die perfekte Gelegenheit, die Teams, die in den oben genannten Silos arbeiten (meist Produkt und Marketing/Marke), wieder zusammenzuführen. Auch wenn dies wahrscheinlich ein langsamer Prozess sein wird, ist es doch eine gute Möglichkeit, alle Beteiligten einzubinden – was letztlich die Akzeptanz erleichtert – und auf eine einheitliche Marken- und Produktvision hinzuarbeiten, die ein gemeinsames Design und gemeinsame Komponenten aufweist.

Auch die erweiterten Designteams werden davon profitieren, da die Verbesserungen an deinem Design-Onboarding-Prozess (wie in Phase eins erwähnt) auf alle Designerschaffenden im Unternehmen ausgedehnt werden.

Obwohl es für deine Designteams hilfreich ist, zusammenzuarbeiten und ihre Anwendungsfälle in deinem Designsystem abzubilden, solltest du vermeiden, den Teams, die später hinzukommen, zu viele Vorschriften zu machen. Zum Beispiel sollten produktbasierte Komponenten nicht zwangsweise in Marketingdesigns eingebaut werden, wenn sie nicht richtig passen. In solchen Fällen verweise ich gerne auf Bruno Berghers Artikel Coherent, Not Consistent (Kohärent, nicht konsequent), in dem er schreibt: „Coherence means making sure every part of your product feels like it belongs there, instead of trying to make them exactly the same.“ (Kohärenz bedeutet, sicherzustellen, dass sich jeder Teil des Produkts so anfühlt, als gehöre er dorthin, anstatt zu versuchen, alle Teile genau gleich zu machen.)

Phase drei: Entwicklungsteams

Der nächste Schritt besteht darin, den Rest der einzelnen Produktteams einzuladen, sich zu beteiligen und einzubringen. Das bedeutet, Entwickler*innen und Projekt-/Produktmanager*innen hinzuzuziehen. Zu diesem Zeitpunkt sollte die Designtechnologie ein wichtiger Bestandteil der Organisation sein, um die Workflows der Designschaffenden zu vereinfachen und den Entwicklungsteams die Nutzung des Designsystems zu erleichtern. Darüber hinaus sollte dein Team in der Lage sein, kodifizierte Versionen der visuellen Grundelemente zu erstellen, zu kontrollieren und zu pflegen, die die Bausteine deines Designsystems für Entwickler*innen bilden. Dazu gehören Token wie Farben, Symbole, Typografie und einfache Komponenten wie Schaltflächen, Eingabefelder und Menüs. Diese dienen als Single Source of Truth und vereinfachen den Entwicklungsstart und den Übergabeprozess erheblich. Ein Beispiel hierfür ist unser kürzlich als Open Source bereitgestelltes Workday Canvas Kit, das React- und CSS-Komponenten enthält (weitere Framework-/Plattformunterstützung ist in Vorbereitung).

Neben einer Komponentenbibliothek kann es sinnvoll sein, einen Ort zu schaffen, an dem alle Ressourcen und Dokumentationen zu finden sind. Unser erster Schritt zur Förderung der Akzeptanz außerhalb unseres Designteams war die Einrichtung der Workday Design-Website. Die Bereitstellung dieser Ressourcen zusammen mit der Dokumentation deines Designsystems ermöglicht es Produktmanager*innen und Entwickler*innen, sofort loszulegen und einheitliche Erlebnisse zu schaffen, die der Sprache deines Produkts, den UI-Standards und den Komponentenrichtlinien folgen. Mit dieser Grundlage laufen auch die Design-Reviews deutlich reibungsloser ab. Die Dokumentation dient den Entwickler*innen als ständige Referenz, sodass sie weniger Rückfragen an die Designschaffenden stellen müssen. Auf diese Weise wird die Effizienz gesteigert und sichergestellt, dass die Produktteams die richtigen Komponenten für die richtigen Anwendungsfälle verwenden. Es ist die einfachste Möglichkeit, dein Designsystem und deine Designsprache einem breiteren Publikum zugänglich zu machen, und ich kann diesen Ansatz nur empfehlen.

Phase vier: Führungskräfte, Vertriebsmitarbeiter*innen und alle anderen

Bis zu dieser Phase waren die einzigen Adressaten deines Designsystems die Menschen, die deine Produkte herstellen. Das ist zwar eine tolle Errungenschaft, aber wie wäre es erst, wenn dein gesamtes Unternehmen bei der Bewältigung der alltäglichen Probleme auch gutes Design im Blick hat? Wenn du deinen Vertriebsmitarbeiter*innen die Informationen und Ressourcen an die Hand gibst, die sie brauchen, um dein Unternehmen nicht nur als ein Produkt mit guter Benutzerfreundlichkeit zu verkaufen, sondern als ein Unternehmen, das eine führende Position im Bereich Design anstrebt? In diesem Fall gilt es, auch die übrigen Mitarbeiter*innen einzubeziehen, die die Vorteile deines Designsystems noch nicht direkt erlebt haben. Präsentationen vor verschiedenen Teams im Unternehmen – bei Workday nennen wir sie „Roadshows“ – können dabei helfen. Sie erläutern die Grundlagen, die Philosophie und die Ressourcen deines Designsystems und zeigen, wie diese später in Kundengesprächen in wertvolle Verkaufsargumente umgewandelt werden können. Wenn möglich, solltest du auch einige Übungen einbauen, die zum designorientierten Denken anregen, um diese Mentalität und die Leidenschaft für gutes Design zu fördern. Einige Beispiele für solche Übungen findest du im Abschnitt Playbook auf unserer Design-Website. Ein grundlegendes Ziel während dieses Prozesses ist es, das Bewusstsein für den Wert, den Zweck und das Potenzial zu fördern, das dein Designsystem für dein Unternehmen darstellt.

Phase fünf: Die Öffentlichkeit

Die letzte Phase der Einführung eines Designsystems ist zweifellos die aufregendste. In dieser Phase stellst du deine harte Arbeit der breiten Masse vor. Dies ist sicher nicht für alle Designsysteme erforderlich, aber ich denke, dass größere Designteams dies in Betracht ziehen sollten. Bevor du loslegst, solltest du sicherstellen, dass du über eine ausreichende Dokumentation und Komponentenabdeckung verfügst, indem du deine Bibliothek mit häufig verwendeten Alternativen wie Material UI und Bootstrap abgleichst.

Hat ein weltweites Publikum Zugang zu deinem Designsystem, fördert dies automatisch die Akzeptanz und den Bekanntheitsgrad (sowohl intern als auch extern), da es von anderen Websites und Stellen aufgegriffen wird. Dies ist ein weiterer Punkt, an dem deine Design-Dokumentationsseite einen erheblichen Einfluss haben wird. Wenn dein Unternehmen eine Möglichkeit für Benutzer*innen bietet, individuelle Erlebnisse innerhalb deiner Anwendung zu erstellen (wie die Workday Cloud Platform), dient dein Designsystem als großartige Ressource, um Kunden und Drittanbietern zu helfen, einheitliche und nahtlose Erlebnisse innerhalb deines Ökosystems zu schaffen. Nicht zuletzt wird sich die Bekanntmachung deines Designsystems auch auf dein Einstellungsverfahren auswirken. Wenn du mit den führenden Designunternehmen der Branche konkurrierst, wirst du talentierte Bewerber anziehen und designorientierte Interessenten für die skalierbaren Designherausforderungen begeistern, mit denen du dich auseinandersetzt.

Die angegebenen Phasen und ihre Reihenfolge sind hier als ideal dargestellt, sie müssen jedoch nicht isoliert oder in einer vorgeschriebenen Weise ablaufen. Wie bei uns kann es auch bei dir vorkommen, dass du eine Phase zu spät beginnst oder zwei Phasen parallel durchführst. Die Phasen sind lediglich eine Möglichkeit, sich die verschiedenen Zielgruppen vor Augen zu führen, und ein Vorschlag für die ungefähre Reihenfolge, in der sie in das Designsystem eingeführt werden sollten. Jede Phase sollte ein fortlaufender Prozess sein, und die vorangegangene Entwicklung sollte fortgesetzt werden, wenn du das Designsystem auf mehr Personengruppen ausweitest.

Das Ziel des Workday-Designteams ist es, allen Personen im Unternehmen zu ermöglichen, fantastische Erlebnisse innerhalb von Workday zu schaffen und gleichzeitig großartiges Design im Blick zu behalten. Angesichts der Größe von Workday kann diese Aufgabe manchmal überwältigend erscheinen. Die Unterteilung unserer Meilensteine in Phasen wie diese hat uns jedoch geholfen, Fortschritte zu erzielen. Unabhängig davon, wie groß dein Unternehmen ist, kommt es darauf an, die Einführung deines Designsystems in kleinere, leicht erreichbare Ziele zu unterteilen. Wenn du diesen Ansatz verfolgst, wirst du in kürzester Zeit unternehmensweite Unterstützung für ein funktionales, skalierbares Designsystem erhalten! Ich würde mich freuen, von deinen Erfahrungen zu hören, wenn du dein Designsystem aufbaust und es den oben genannten Zielgruppen zur Verfügung stellst.