Chroma X

Designsysteme als Businessvorteil und Schlüssel für digitale Transformation

Der stetig wachsende Funktionsumfang und die gesteigerte Komplexität digitaler Produkte verlangen nach mehr Strukturierung und Verwaltung sämtlicher Produktbestandteile. Bei der Entwicklung rücken die effiziente und schnelle Umsetzung von Änderungen, sowie eine konsistente Nutzungserfahrung und klare Markenidentität immer mehr in den Fokus. Hier kommen die Vorteile eines Design Systems zum Tragen - denn es ist mehr als nur ein Buzzword, welches man in jedem zweiten Artikel lesen kann, der sich mit digitaler Produktentwicklung beschäftigt. Aber was ist ein Design System eigentlich genau? Woraus besteht es? Für welche Anwendungsfälle lohnt es sich, ein Design System zu etablieren und welche Probleme kann ein Design System lösen?

Nahaufnahme eines Bildschirms auf dem Bestandteile eines Designsystems dargestellt werden.

Definition eines Design Systems

Ein Design System ist der zentrale Ort, an dem alle verwendeten Visual Assets zusammengeführt und kuratiert werden, damit sie von Designerinnen und Engineers gleichermaßen genutzt werden können. Dies beinhaltet alle, für ein einheitliches Design relevanten Bestandteile wie beispielsweise Farbpaletten, Style Guides, Patterns und eine Komponentenbibliothek. Hier wird also nicht nur festgelegt, wie die finale Gestaltung auszusehen hat, sondern auch, nach welchen Prinzipien sie umgesetzt wird.

Therese Fessenden Nielsen Norman Group

A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.

Sinnvolle Verwendung und Eigenschaften eines Design Systems

Die erste Frage, die sich stellt: Ist für mein Unternehmen und mein Produkt (oder Produktpalette) das Etablieren eines Design Systems wirklich sinnvoll? Die Antwort lässt sich besonders an einem Faktor festmachen: Die Komplexität des Produktes. Handelt es sich um ein niederkomplexes Produkt, wie beispielsweise eine Website, die nur wenige Komponenten verwendet, die nicht an anderen Stellen wiederverwendet oder stetig angepasst werden müssen, ist ein Design System nicht unbedingt sinnvoll.
Grund hierfür sind die Ressourcen, die für die initiale Erstellung eines Design Systems benötigt werden. Denn ein System aufzubauen und alle Bestandteile so zu dokumentieren, dass es anschließend von Designerinnen und Engineers weiterverwendet und konsistent weiterentwickelt werden kann, benötigt Zeit, Know-How und somit auch finanzielle Ressourcen. Eine Investition, die sich nicht bei jedem Produkt auszahlt.
Sinnvoll ist die Nutzung eines Design Systems dann, wenn es sich um ein komplexes Produkt handelt bzw. komplexe Vorgänge abgebildet werden sollen, die viele unterschiedliche Komponenten benötigen. Die systematische Verwaltung und Erweiterung einer umfangreichen Komponentenbibliothek bietet besonders viele Vorteile für Produkte, die nach Lean Agile Methoden entstehen - also wenn bedarfsadaptive Änderungen schnell und unkompliziert am Produkt vorgenommen werden sollen. Ein Design System kann auch für mehrere Produkte gleichzeitig der zentrale Bezugspunkt – die „Single Source of Truth“ – sämtlicher Gestaltungselemente sein. So kann auch produktübergreifend eine für die Nutzerinnen konsistente Design- und Nutzungserfahrung geschaffen werden, die Produkt(en) und Unternehmen eine eigene visuelle Identität verleiht.

Effizienz eines Design Systems in Bezug auf Zeit und Aufwand
Effizienz eines Design Systems in Bezug auf Zeit und Aufwand

Realisierung der geschäftlichen Ziele

Nicht nur die Komplexität des Produktes kann eine entscheidende Rolle dabei spielen, ob ein Unternehmen ein Design System braucht oder nicht. Es gibt andere Herausforderungen, die durch die Implementierung eines Design Systems adressiert werden können:

  • Digitale Produkte problemlos erweitern & skalieren

  • Wiedererkennbarkeit schaffen und mehr Vertrauen in Produkte schaffen

  • Nutzerfreundlichkeit steigern

  • Effizienz steigern

  • Effektivität steigern

Die folgenden Eigenschaften geben dem Design System die Möglichkeit, die oben genannten Aspekte umzusetzen:

Einheitliches Design: Ein Design System bietet konsistente Designelemente wie Farben, Schriften, Icons und Layouts, um ein einheitliches Erscheinungsbild über alle Produkte hinweg sicherzustellen.

Modularität: Design Systeme werden modular aufgebaut. Sie bestehen aus wiederverwendbaren Komponenten, die einfach kombiniert und angepasst werden können, um verschiedene Anwendungen zu unterstützen.

Konsistente Markenidentität: Ein Design System hilft dabei, eine konsistente Markenidentität zu wahren, indem es Designrichtlinien und -standards bereitstellt, die sicherstellen, dass das Erscheinungsbild und die Sprache der Marke in allen Anwendungen eingehalten werden.

Skalierbarkeit: Ein Design System ist skalierbar und kann mit dem Wachstum eines Unternehmens oder einer Produktreihe wachsen, indem es neue Komponenten und Richtlinien hinzufügt und vorhandene aktualisiert.

Effizienz: Durch die Wiederverwendung von Designelementen und -standards kann ein Design System die Effizienz im Designprozess steigern, indem es die Zeit für die Entwicklung neuer Produkte verkürzt und die Notwendigkeit redundanter Arbeit reduziert.

Dokumentation und Schulung: Ein Design System umfasst in der Regel eine ausführliche Dokumentation und Schulungsmaterialien, die Designer*innen und Engineers helfen, das System zu verstehen und effektiv damit zu arbeiten.

Flexibilität und Anpassbarkeit: Obwohl ein Design System konsistente Richtlinien bietet, ermöglicht es auch Flexibilität und Anpassung, um den spezifischen Anforderungen verschiedener Produkte und Anwendungsfälle gerecht zu werden.

Kollaboration: Ein Design System fördert die Zusammenarbeit zwischen verschiedenen Teams, indem es eine gemeinsame Design-Sprache und - Infrastruktur bereitstellt, die es den Teams ermöglicht, effizient zusammenzuarbeiten und Ressourcen zu teilen.

Wie können Design Systeme helfen digitale Produkte zu erweitern?

Die "Erweiterung eines digitalen Produktes" bezieht sich auf die Entwicklung oder Integration neuer Funktionen, Module oder Komponenten in ein bestehendes digitales Produkt. Diese Erweiterungen können dazu dienen, die Funktionalität des Produktes zu verbessern, neue Nutzungsanforderungen zu erfüllen, die Nutzererfahrung zu optimieren oder das Produkt an sich ändernde Marktanforderungen anzupassen.

Warum es wichtig ist, die Erweiterung effizient zu handhaben

Eine effiziente Erweiterung ermöglicht es, Entwicklungszeit und Ressourcen zu sparen, da sie eine schnellere Implementierung neuer Funktionen oder Verbesserungen mit sich bringt. So ist es einfacher, das digitale Produkt im Laufe der Zeit zu skalieren und an sich ändernde Nutzeranforderungen anzupassen, ohne dass dabei die Stabilität oder Leistung beeinträchtigt werden. Durch die schnelle Einführung neuer Funktionen oder Verbesserungen können Unternehmen ihre Wettbewerbsfähigkeit steigern, indem sie ihren Kunden stets aktuelle und innovative Produkte bieten.

Welche Probleme kann eine ineffiziente Erweiterung verursachen?

Eine ineffiziente Erweiterung kann zu technischen Schulden führen, die langfristig die Entwicklung verlangsamen und die Wartbarkeit des Produktes beeinträchtigen können. Durch eine effiziente Handhabung können solche technischen Schulden vermieden oder minimiert werden.
Möchte man ohne einen zentralen Ort für alle visuellen Entscheidungen ein komplexes digitales Produkt erweitern oder Änderungen über mehrere Produkte hinweg realisieren, investiert man einen unverhätnismäßig großen Zeitaufwand in Kommunikation zwischen Designerinnen und Engineers. Alle getroffenen Gestaltungsentscheidungen müssen an jeder Stelle einzeln umgesetzt werden, viel Arbeit fließt in repetitive Arbeitsschritte, es kommt schnell zu Missverständnissen und zu viel ineffizient genutzter Arbeitszeit.

Design System als Lösung

Ein gut aufgebautes und konsistent gestaltetes Design System ermöglicht die zentrale Verwaltung aller designrelevanten Assets - und das simultan über mehrere Produkte hinweg. Produktübergreifende Änderungen können somit äußerst schnell und unkompliziert durchgeführt werden - und das mit geringem Personalaufwand. Bei der Erweiterung des Funktionsumfangs eines digitalen Produktes kann dadurch der Fokus des Produkt-Teams verstärkt auf der Discovery neuer Features und einer optimierten User Experience liegen und weniger auf der Entwicklung von Standardkomponenten. Das Rad muss also nicht ständig neu erfunden werden. Gleichzeitig reduziert sich durch ein Design System als „Single Source of Truth" der Übergabe-Aufwand in crossfunktionalen Teams zwischen Design und Engineering. Die Zeit für den üblichen Ablauf von Discovery - New Design / Change - Hand over - Implementation wird also maximal verkürzt und effektiv genutzt. Das Nutzen von Design Tokens wirkt hier als ein zusätzlicher Booster, da nur einzelne Werte verändert werden müssen, um Verbesserungen umzusetzen. Die Skalierung von Produkten, die über ein Design System verwaltet werden, ist somit problemlos möglich und kann auch auf White Label-Produktlösungen angewandt werden, bei denen flexibles Theming von Anfang an eingeplant ist.