Für den GARDENA Digital Hub in Zürich habe ich ein Designsystem speziell für die GARDENA smart- und Bluetooth-App konzipiert und umgesetzt. Mein Ziel war es, ein System zu schaffen, das sowohl für Designer als auch für Entwickler gleichermaßen von Nutzen ist und beiden Zielgruppen langfristig die Arbeit erleichtert.
Die Abbildungen zeigen den aktuellen Stand der GARDENA smart- und Bluetooth-App nach Implementierung des neuen Designsystems.
Durch Interviews mit Designern und Entwicklern konnte ich ihre spezifischen Bedürfnisse und Herausforderungen erkennen. Daraufhin führte ich umfangreiche Recherchen durch und identifizierte innovative Werkzeuge zur Lösung der festgestellten Probleme.
Ich erreichte mein Ziel, indem ich eine neue Toolchain einführte und einen strategischen Plan zur Überarbeitung der App-Benutzeroberflächen umsetzte, ohne zusätzliche Ressourcen zu binden.
Nach einer gründlichen Analyse des aktuellen Standes des Design- und Entwicklungsprozesses identifizierte ich mehrere potenzielle Probleme. Eines davon war, dass jeder Designer eine lokale Pattern Library in Sketch nutzte, ohne koordinierende Meetings zur Abstimmung von Anpassungen. Dies führte zu Inkonsistenzen sowohl in den Designs als auch später in der App. Zusätzlich waren die Designs in den Sketch-Dateien nicht mit der live App synchronisiert, und es wurde häufig Custom Code eingesetzt, um spezifische Probleme zu lösen. Darüber hinaus waren die Komponenten in den lokalen Pattern Libraries nicht ansatzweise ausreichend dokumentiert oder spezifiziert, was die Entwicklung weiter verkomplizierte und eine klare Kommunikation zwischen den Teams erschwerte.
Der Fliesstext und die Beschriftungen waren schwer zu lesen. Nutzer hatten Schwierigkeiten zu erkennen, welche Elemente anklickbar waren und welche nicht.
Die Zugänglichkeit der App war aufgrund eines schlechten Kontrastverhältnisses und zu leichten Schriftschnitten schlecht. Zudem war die Designsprache der App nicht auf die GARDENA-Hardwareprodukte abgestimmt und das gesamte Design war veraltet.
Da keine zusätzlichen Ressourcen für die Implementierung des Designsystems in der App zur Verfügung standen, musste ich eine Strategie entwickeln, um dies umsetzbar zu machen.
Die Situation stellte für das gesamte Team eine Herausforderung dar und betonte die Wichtigkeit von synchronisierter Zusammenarbeit, einer klaren Designsprache zur Problemvermeidung und einer zentralen Informationsquelle (Single-Source-of-Truth).
Der optimale Ansatz für Designer und Entwickler wäre, mit den Komponenten des Designsystems zu arbeiten, ähnlich wie mit Lego-Bausteinen. Sie könnten dann untereinander kombiniert werden und sie würden perfekt ineinander passen. Dieser systematische Ansatz würde Zeit und Kosten sparen. Die Komponenten würden einmalig sowohl im Design als auch im Code erstellt werden und könnten anschließend von allen Teammitgliedern wiederverwendet werden.
Um dies effektiv umzusetzen, wäre es essenziell, dass jede Komponente mit einer umfassenden Dokumentation versehen ist. Diese Dokumentation sollte Details zum Verhalten der Komponente in unterschiedlichen Viewports, technischen Spezifikationen und den korrekten Abständen zu anderen Komponenten oder Parent-Elementen enthalten.
Auf meine Initiative hin haben wir von dem Design-Tool Sketch zu Figma gewechselt, einem cloud-basierten Tool, das den Einsatz lokaler Dateien überflüssig macht. Zusätzlich habe ich Storybook für die Darstellung von Live-Komponenten eingeführt.
Um eine zentrale Informationsquelle, also eine Single-Source-of-Truth, zu etablieren, nutzte ich Zeroheight. Hier werden Figma-Designs, Dokumentation und Storybook-Komponenten an einem Ort gebündelt und sind für alle zugänglich.
Regeln für Design-Reviews wurden eingeführt und offensichtliche Probleme, wie die Schriftstile in der App, wurden verbessert. Zudem habe ich die veralteten Komponenten aus der Sketch-Bibliothek zu Figma migriert, dort standardisiert und den Designern als Figma-Komponenten zur Verfügung gestellt.
Die Dokumentation jeder Komponente umfasst folgende Abschnitte: Definition, Anatomie, Verwendungshinweise, Beispiele, Dos and Don'ts, Spezifikationen sowie einen Bereich für ähnliche Komponenten.
Jede Seite ist in einen Überblicks-, einen Design- und einen Code-Bereich gegliedert.
Schließlich entwickelte ich eine Strategie zur Einführung des neuen Designsystems, ohne dafür zusätzliche Ressourcen zu benötigen. Durch die Implementierung dieser Massnahmen wurde eine optimierte Gestaltung und Entwicklung sowie eine konsistente Designsprache für beide Apps ermöglicht.
Ich bin mit dem Ergebnis sehr zufrieden. Es war mir wichtig, ein Designsystem zu entwickeln, das nicht nur in Figma existiert und von Designern genutzt wird, sondern auch einen positiven Einfluss auf die Entwicklung hat. Das Tulip Design System ist mittlerweile zu einem unverzichtbaren Werkzeug für alle Designer (UX, UI und Industrial), UX Copy Writer und Entwickler geworden.
Optimierte Produkt-Detailseite, die Komponenten des neuen Designsystems verwendet.
Durch die Einführung der komponentenbasierten Entwicklung konnten wir beim Redesign bestehender Seiten 80 % des Codes einsparen. Dies hat zu erheblichen Zeitersparnissen sowohl für Designer als auch Entwickler geführt, da Änderungen an Hauptkomponenten automatisch in ihren Instanzen übernommen werden.
Zusätzlich wurde der 'Tone of Voice' dem Designsystem hinzugefügt und ein Sprachleitfaden stellt sicher, dass Texte in beiden Apps konsistent verfasst werden.
Die vorgenommen Änderungen haben dazu beigetragen, den Design- und Entwicklungsprozess zu optimieren und eine konsistente Designsprache für beide Apps sicherzustellen, sowie Zeit und Kosten zu sparen in der Entwicklung und dem Design.
Ein Designsystem ist ein dynamisches Werkzeug, das kontinuierlich wächst, optimiert und angepasst wird. Es erreicht nie einen endgültigen Zustand, da stets neue Aspekte und Verbesserungen hinzukommen.
