Unser Werkzeugkasten, um blitzschnell Produkte zu bauen
In der Produktentwicklung stehen wir ständig unter Strom: Neue Trends und Möglichkeiten entwickeln sich immer schneller und schneller – auch durch die jüngsten Entwicklungen im Bereich der Künstlichen Intelligenz. Ideen für Innovationen und Verbesserungen unserer Produkte entstehen täglich. Aber wie in jedem Unternehmen ist es eine Herausforderung, die vielen Bausteine zu einem großen Ganzen zusammenzusetzen.
Im letzten Jahr hatte das User Experience Team hinter Produkten wie MyWebsite Now das Gefühl: Es ist Zeit, an der Effizienzschraube zu drehen. Durch die vielen verschiedenen Teams wurden immer öfter Dinge doppelt gemacht oder waren visuell und funktional nicht konsistent. Natürlich gab es Styleguides und Vorlagen, aber meist nur für einzelne, klar definierte Produktbereiche. Und es gab kein dediziertes Team, bei dem alle Fäden zusammenliefen.
Das wollten wir ändern und ein Designsystem schaffen, das es allen Teams ermöglicht, schneller und effizienter einen Mehrwert für unsere Kunden zu schaffen. Mit hoher Qualität und konsistenten Ergebnissen. Ein Designsystem ist ein großer Werkzeugkasten mit Spezifikationen, Vorlagen und Beispielen. Definitionen von Farben, Schriften und Formen finden sich darin. Oder konkrete Beispiele als Basis für Neues.
Das Ziel ist es, konsistente Produkte mit wiederverwendbaren Komponenten und Mustern zu entwerfen – und dabei die spezifische Identität einer Marke über das gesamte Produkterlebnis hinweg zu bewahren. Letztlich profitiert jeder Schritt der Produktentwicklung: Blitzschnell erstellte Prototypen können sofort an Kundinnen und Kunden getestet werden. Ergebnisse können dann rasch eingearbeitet und schließlich mit den vorgefertigten Komponenten zeiteffizient programmiert werden.
Aber wo anfangen?
Zunächst einmal haben wir ein Meeting etabliert, das alle Kolleginnen und Kollegen unserer Standorte in Bukarest, Köln und Karlsruhe zusammenbringt: das Design & UX Chapter. Dieses fachübergreifende Meeting bringt Produktmanagement, Interface/User Experience Design und Entwicklung zusammen.
In mehreren, dedizierten Design-Workshops haben wir alle Herausforderungen identifiziert, die es zu bewältigen gilt. Und viele Ideen gesammelt, wie wir Dinge verbessern können.
Am Ende dieser Erkundungsphase gab es bereits erste Ergebnisse: Wir hatten eine erste Idee, wie wir die Farben strukturieren und welche Optionen für Schriftarten wir in das Designsystem integrieren wollen. Dabei haben wir nicht bei Null angefangen, sondern auf den von Google veröffentlichten Material Design Prinzipien aufgebaut, diese allerdings für unsere Anforderungen geändert und ergänzt.
Für die technisch Versierten: Für unsere Komponentenbibliothek nutzen wir das in React implementierte Base UI des Open-Source-Frameworks Material UI. Die Nutzung eines solchen Frameworks spart viel Zeit, liefert aber trotzdem hoch individuelle Ergebnisse.
Tiefer in die Materie eintauchen
Die Zeit nach den ersten Workshops war sehr arbeitsintensiv und auf unserem Weg zur Version 1.0 gab es noch so manche knifflige Hürden zu überwinden. Zum Glück liebt unser kleines Team aus einem Product Owner, einem User Experience Designer und zwei Entwicklern, Herausforderungen!
Und so sind im Laufe der Wochen drei Dinge entstanden: Ein Styleguide, der die Aspekte des Designsystems veranschaulicht und erläutert. Er ist eng mit einer Komponentenbibliothek verknüpft, mit der Designer Produktkonzepte in Figma erstellen können. Diese Konzepte sehen bereits professionell und ziemlich final aus. So können sie mit weiteren Stakeholdern diskutiert werden oder stehen zum Beispiel auch für Usertests bereit. Schließlich gibt es noch einen Showcase mit allen Komponenten, die wir bisher erstellt haben. Natürlich mit guter Dokumentation, so dass jeder Entwickler sofort mit der Verwendung von Elementen wie Buttons oder Textfeldern beginnen kann.
Generell war uns eines besonders wichtig: Flexibilität! So viel wie möglich sollte für unterschiedliche Bedürfnisse anpassbar sein. Zum Beispiel verwenden einige unserer Produkte einen Dark Mode (Dunkelmodus), bei dem hauptsächlich heller Text auf dunklem Hintergrund verwendet wird. Manchmal gibt es auch bestimmte Produktbereiche, die sich visuell abheben sollen, oder besondere Werbekampagnen. In der Vergangenheit war viel manuelle Arbeit erforderlich, um Farben und Formen zu individualisieren. In Zukunft werden wir in der Lage sein, diese Art von Flexibilität standardmäßig anzubieten.
Verbesserungen der Accessibility
An manchen Stellen ist das Konzept im Laufe des Arbeitsprozesses regelrecht explodiert: Waren es anfänglich nur 76 Variablen für Farben, stellen wir jetzt stolze 329 Farbwerte zur Individualisierung bereit. Nur so können wir sicherstellen, dass die Farben von Texten und Interaktionselementen einen hervorragenden Kontrast bieten und auf jedem Hintergrund gut lesbar sind. Was in der Vergangenheit oft manuell überprüft werden musste, wird nun automatisch von unserem Designsystem übernommen.
Der erste Meilenstein und weitere Schritte in die Zukunft
Im August 2024 haben wir die erste Version unseres Design Systems intern veröffentlicht. Unser langfristiges Ziel ist es, sowohl die Dokumentation als auch die Komponenten öffentlich zugänglich zu machen. Bis dahin bleiben noch ein paar wirklich spannende Details unter Verschluss. Aber vielleicht nicht mehr lange… Es lohnt sich, den IONOS Blog zu verfolgen!