Design System – Warum jede Organisation ein Design System haben sollte

Es ist kein Geheimnis: Änderungen an Anforderungen steigen in jeder Phase des Lebenszyklus um den Faktor 10. Die Behebung eines Problems in der Entwicklungsphase ist 10-mal teurer als die Behebung desselben Problems in der Entwurfsphase. Außerdem ist es 100-mal teurer, ein Problem nach der Einführung zu beheben als in der Entwicklungsphase.¹

Was dabei helfen kann ist ein Design System.

Das Ziel eines Design Systems ist eine effiziente skalierbare Produkt- und Servicegestaltung. Der Kundschaft und den Usern wird ein einheitliches Aussehen und eine einheitliche Handhabung an allen Touchpoints geboten. Hinzu kommt, dass die gesamte Organisation von einem Design System profitiert.

Design mit System, was bedeutet das eigentlich? Ein Design System bedeutet strukturiert und organisiert die Berührungspunkte zur Kundschaft zu gestalten und vereinheitlichen. Durch die stetige und rasante Digitalisierung wird das Thema Design mittels eines Systems immer wichtiger, um die Skalierbarkeit zu gewähren und schnell auf die Bedürfnisse der Kundschaft und User reagieren zu können.

Häufig wird angenommen, dass es sich bei einem Design System nur um bspw. ein Styleguide oder eine Pattern Library handelt. Hinter einem Design System steckt jedoch wesentlich mehr. Im besten Fall spezifiziert ein Design System die gesamte Markenpräsentation, die Art und Weise wie die Kundschaft angesprochen wird – Voice und Tone, die Interaktionsmöglichkeiten und wiedererkennbare Farben, Texte, Formen und weitere Gestaltungselemente.

Ein Design System ist ein umfassender Leitfaden für die Produkt- und Servicegestaltung. Das Design System umfasst eine Sammlung von Regeln, Prinzipien, Einschränkungen und bewährten Verfahren.

Design System Beispiele (nach Alphabet):

• Adobe: https://spectrum.adobe.com/
• Atlassian: https://atlassian.design
• Audi: https://www.audi.com/ci/de/renewed-brand.html
• Google: https://material.io
• IBM: https://carbondesignsystem.com
• Lufthansa: https://frontify.lufthansa.com/hub/124
• Otto:  https://www.otto.de/design-system CI/Brand-Portal: https://bxp.otto.de

Vorteile eines Design Systems im Überblick

• Markenstärkung durch Wiedererkennung und Intuition – Die Marke kann stark profitieren und wachsen, da die Kundschaft durch das einheitliche „Look and Feel“, sowie „Voice and Tone“ etc. sich leichter an die Marke gewöhnen kann. Durch die kohärente Übertragbarkeit des Designs über alle Touchpoints hinweg, fühlen sich die Kunden und Kundinnen der Marke verbundener, da die Berührungspunkte vertraut sind.  (Beispiele: Apple Produkte, Adobe Software)
• Effiziente Entwicklung – Mittels organisierten und wiederverwendbaren Gestaltungslösungen für wiederkehrende Nutzungsprobleme (Pattern Library) wird viel Kommunikations- und Entwicklungsaufwand gespart und redundante Arbeit vermieden. Somit müssen sich Designer und Entwickler nicht immer mit den gleichen Problemen beschäftigen und können schnell Anpassungen an den zu entwickelnden Produkten, Services, Apps etc. vornehmen.
• Bessere und einfachere Kommunikation und Kollaboration – Durch eine vereinfachte Bereitstellung des Design Systems in der gesamten Organisation sind alle Stakeholder auf dem aktuellen Stand und können sich in eine Richtung orientieren. Alle denken und reden über das Gleiche. Sei es Marken-, UX-, Produkt- und Servicespezifikationen, Guidelines etc.
• Maximale Qualitätssicherung – Durch die effiziente Entwicklung bleibt bspw. auch mehr Zeit für Tests (wie z.B. Usability-, Frontend-, Penetration-Tests) und bereits validierte und bewährte Gestaltungslösungen können schnell wiederverwendet werden.
• Konsistenz und Skalierbarkeit – Durch die organisierte Struktur eines Design Systems sollte eine Widerspruchsfreiheit von Gestaltungselementen entstehen. Es gibt ein System und eine Logik wie wiederkehrende Probleme gelöst werden können. Je besser das System aufgebaut ist, desto schneller und einfacher können verschiedenen Touchpoints entstehen, wachsen und skalieren. Anforderungen können schneller umgesetzt werden und die Leistungsfähigkeit der Entwicklung steigen. Davon profitieren alle beteiligten wie bspw. Entwickler und Entwicklerinnen, Designer, Product Owner, Produktmanager etc.  

Investment / Kosten

Um die Vielzahl der positiven Aspekte nutzen zu können, muss in ein Design System investiert werden:

• Aufbau und Team – Um das Design System aufbauen zu können, wird ein Team mit den entsprechenden Kompetenzen benötigt. Das Team sollte interdisziplinär aufgestellt sein. Dabei sollten Kompetenzen aus Marketing, Design, Entwicklung und je nach Branche und Organisation weitere passende Kompetenzen vertreten sein. Wichtig ist, dass diese Hand in Hand gehen und einfach kollaborativ arbeiten können. Ist dies nicht der Fall, können unnötige Kommunikationsaufwände entstehen und im schlimmsten Fall das Design System scheitern. Vor allem bei einer dezentralen Organisation des Design Systems kann es passieren, dass zu viele Patterns entstehen und der Überblick und die notwendige Struktur verloren geht.
• Verbreitung – Nach dem Aufbau sollte das Design System an die gesamte Organisation verbreitet werden. Jeder sollte Bescheid wissen, dass es das Design System gibt, wozu es gut ist und wie damit innerhalb der Organisation umgegangen wird, um aus den Vorteilen des Design Systems schöpfen zu können.
• Pflege und Wartung – Eine stetige Pflege und Wartung des Design Systems ist essenziell. Dazu sollten agile Prozesse entstehen, welche Veränderungen einfach ermöglichen. Die Gestaltungslösungen sollten in regelmäßigen Abständen überprüft und angepasst werden. Man sollte sich auch nicht davor scheuen Gestaltungslösungen zu verwerfen, wenn diese sich nicht mehr bewähren. Wird dieser Punkt vernachlässigt, kann Chaos innerhalb des Design Systems entstehen. Zudem können sich Kundenbedürfnisse und -Merkmale ändern, sodass auf diese reagiert und das Design System entsprechend angepasst werden sollte.

Zwei Beispiele aus der Praxis, bei denen große Erfolge mithilfe eines Design Systems entstehen konnten, auch wenn es sicher noch weitere Gründe dafür gab:

1. Airbnb kann mittels ihres Design Systems (https://airbnb.design) international und schnell skalieren.
   In nur 11 Jahren konnte sich Airbnb, zu einem 30-Milliarden-Dollar-Unternehmen entwickeln.³ Airbnb ist eine Plattform zur Buchung und Vermietung von Unterkünften, welche international erfolgreich ist. 2017 erklärte Karri Saarinen, der als Design Lead bei Airbnb in San Francisco das 2017 eingeführte Design Language System (DLS) verantwortet: „Im Laufe der Jahre sind wir stark gewachsen, unsere Designabteilung besteht inzwischen aus fast einem Dutzend Teams. Es wurde klar, dass wir systematischere Wege brauchen, um unsere Arbeit zu koordinieren.“⁴
2. Eine weitere Organisation, welche mittels eines Design Systems (https://spectrum.adobe.com)  nachhaltige Erfolge feiern kann, ist Adobe. Das breite Spektrum an Software, welches Adobe bietet, wird mithilfe eines Design Systems so entwickelt, dass häufig behauptet wird: „Kann man eine Software von Adobe, kann man alle.“ Zudem lassen sich mittels des Design Systems unterschiedliche Endgeräte, wie bspw. Tablets und Smartphones bedienen.⁵

Viele weitere Organisationen aus den unterschiedlichsten Branchen setzen auf ein Design System: Apple, Atlassian, Audi, Google, IBM, Lufthansa, Sipgate, Spiegel, u.v.m.

Deine Organisation oder die, in der du arbeitest möchte größere Erfolge feiern, schnell wachsen und glückliche Kunden und Kundinnen haben? Du denkst, dass ein Design System genau das richtige ist, was ihr braucht?

Suche dir Treiber oder ein Team und legt los. Starte jedoch nicht allein, denn ein Design System ist Teamwork 🙂 .

---

Quellen:

¹Chaione.com – https://www.chaione.com/blog/user-experience-research-user-centered-design
²Wolfram Nagel – https://wolframnagel.medium.com/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff
³The Guardian – https://www.theguardian.com/technology/2019/may/05/airbnb-homelessness-renting-housing-accommodation-social-policy-cities-travel-leisure
⁴Airbnb Design – https://airbnb.design/building-a-visual-language/
⁵Airbnb Design – https://airbnb.design/building-a-visual-language/ )

---

Beitragsbild: geralt | pixbay

---