Bei DataCamp ist unsere Mission, Data-Science-Bildung für alle zu demokratisieren – und mit über 2 Millionen Lernenden weltweit machen wir große Fortschritte. Dieses Wachstumstempo verlangt dem ganzen Unternehmen viel ab und bringt spannende neue Herausforderungen mit sich.
Für das Designteam heißt das: weg vom Seiten-zu-Seite-Design, hin zu einem skalierbaren Designansatz. Bestehende Komponenten wiederverwenden, Entwicklungszeit reduzieren, Usability verbessern und Barrierefreiheit erhöhen – all das wird immer wichtiger.
In diesem Artikel beschreiben wir, wie wir unser Designsystem schrittweise greifbar machen.
Was ist ein Designsystem?
Ein Designsystem bündelt alle Bausteine, die nötig sind, um eine Designlösung zu verteilen und zu reproduzieren. Das ist nichts Neues und nicht exklusiv für digitale Produkte – Beispiele finden sich reichlich in der Geschichte.
Im ersten chinesischen Kaiserreich konnten Bogenschützen beispielsweise die Pfeile ihrer Kameraden nicht nutzen. Jeder Pfeil war für einen bestimmten Bogen gemacht und passte sonst nicht. Der erste chinesische Kaiser, Ying Zheng, standardisierte das Pfeildesign – mit enormen Auswirkungen auf die militärischen Erfolge.
In den 50ern hatte jede Station des New Yorker U-Bahn-Systems eigene Beschilderungen. Das sorgte für Verwirrung, weil die Navigation überall anders funktionierte. Viele Menschen mieden das System, weil sie nicht verstanden, wie es funktioniert. Massimo Vignelli und Bob Noorda entwickelten das NYC Transit Authority – Graphics Standards Manual, das dokumentierte, wie Schilder zu gestalten und in Stationen zu platzieren sind. Dieses System ist im Kern bis heute erhalten und wird immer noch aktiv genutzt.
Warum brauchen wir ein Designsystem?
Wenn jede Seite isoliert entworfen wird, entstehen viele doppelte oder sehr ähnliche Komponenten. Das macht ein digitales Produkt für Nutzer schwerer verständlich und für Engineering schwerer wartbar. Bei DataCamp haben wir über 20 verschiedene Buttons im Produkt entdeckt – alle mit Eigenheiten (andere Hover-Zustände, uneinheitliche Disabled-States usw.). In einem schnell wachsenden Produkt den Überblick zu behalten, wird so extrem schwierig. Genau hier hilft ein Designsystem.
Für ein digitales Produkt beschreibt ein Designsystem die User-Interface-Komponenten, mit denen sich Oberflächen erstellen lassen, die ein Problem lösen und den Nutzenden eine stimmige Erfahrung bieten.
Ein gut umgesetztes Designsystem löst einen Domino-Effekt aus, der …
- Missverständnisse reduziert
- Implementierungszeit verringert
- Wartungsaufwand senkt
- Fehler reduziert
- Support-Tickets verringert
- Qualität steigert
- Effizienz erhöht
- Lebensdauer verlängert
- Erlernbarkeit verbessert
- Benutzbarkeit erhöht
- Barrierefreiheit verbessert
- Innovation fördert
- Fokus stärkt
- Umsatz steigert
Es ist nicht einfach …
Ein Designsystem aufzubauen, zu pflegen und durchzusetzen erfordert viel Disziplin und kontinuierliche Arbeit aller Beteiligten. Es geht nicht nur um Design; auch Engineering und Produktmanagement sind zentrale Stakeholder. Alle sollten kritische Fragen stellen können: „Warum bauen wir das?“, „Können wir diese Komponente anderswo wiederverwenden?“, „Gibt es schon etwas Ähnliches?“, „Rechtfertigt diese Sonderlösung den zusätzlichen Aufwand?“.
Designsystem 101 bei DataCamp
1. Komponenten-Inventar erstellen
Ziel: Alle wissen, dass es eine Komponente gibt – und in welchem Zustand sie ist.
Als ich bei DataCamp startete, gab es eine Sketch-Datei mit Farben, Icons, Schriften und ein paar Basis-Komponenten. Weit entfernt von komplett, aber ein guter Anfang. Auch das Frontend hatte eine Sammlung von Komponenten, die projektübergreifend genutzt wurden.
Gemeinsam haben wir in Airtable ein Inventar der Komponenten aufgebaut, die in der Produktion im Einsatz sind. So bekam das Designteam einen Überblick über Bestehendes und vermied es, ungewollt Neues zu erfinden. Außerdem sahen wir, wie viele ähnliche Komponenten es gab – und wie groß das Problem wirklich war.
2. Einheitliche Benennung
Ziel: Missverständnisse zwischen Design und Engineering vermeiden.
Beim Abgleich der Komponenten merkten wir, dass Design und Engineering nicht dieselbe Sprache sprachen. So war die im Design definierte „Primärfarbe“ im Code als „Sekundärfarbe“ hinterlegt. Solche Abweichungen führen mit wachsendem Team schnell zu Verwirrung und Frust. Wir haben deshalb eine gemeinsame Terminologie verbindlich gemacht.
3. Design-Workflow optimieren
Ziel: Arbeit nicht verlieren und für Transparenz im Ablauf sorgen.
Zusammenarbeiten im Designteam bringt eigene Herausforderungen mit sich. Früher lagen Designs in Dropbox. Mit wachsendem Team stieg das Risiko von Arbeitsverlust und der Aufwand, Änderungen nachzuvollziehen, massiv an.
Unser Team war offen für einen neuen Workflow, und wir haben Abstract eingeführt. Damit versionieren wir unsere Designs sauber, arbeiten transparent und gewinnen Sicherheit im Prozess.
4. Bessere Dokumentation und Onboarding
Ziel: Schnelleres Onboarding und weniger Kommunikationsaufwand.
Wir dokumentieren unseren Prozess und das Designsystem mit Slite. Müssen wir etwas mehr als einmal erklären, wird es dokumentiert und mit dem Team geteilt. So sparen wir viele Rückfragen und verhindern, dass Wissen verloren geht.
5. Design-Reviews
Ziel: Erwartungen zwischen Design und Engineering klären.
Wichtig ist, dass Reviews in beide Richtungen stattfinden. Designer sollten Frontend prüfen können – und Frontend sollte Design prüfen können. Designer haben oft den Drang, etwas Cooles und Neues zu bauen. Engineers müssen kritische Fragen stellen können: „Warum bauen wir etwas Individuelles?“, „Können wir diese Komponente wiederverwenden?“, „Können wir sie verbessern?“, „Ist sie den Extra-Entwicklungsaufwand wert?“. Es geht darum, Entscheidungen zu begründen und Erwartungen abzustimmen.
Fazit
Wir haben gerade erst begonnen, unser Designsystem zusammenzusetzen, und arbeiten noch daran, die vielen Duplikate in unserem Produkt zu ordnen. Der Weg ist lang, aber mit jeder Komponente, die wir anfassen, entsteht für unsere Kundinnen und Kunden ein besseres, konsistenteres und leichter erlernbares Produkt.
Uns interessiert, wie andere Organisationen ihr Designsystem strukturieren. Schreib mir gern eine E-Mail, wenn du deine Erfahrungen teilen möchtest.
Bei DataCamp sind wir immer auf der Suche nach talentierten Menschen. Interessiert? Sieh dir unsere offenen Stellen an.
