Erstellung eines Multi-Brand Design Systems

In enger Zusammenarbeit mit der Global Savings Group ist ein umfassendes Design System entstanden, wodurch Design-Komponenten über unterschiedliche Marken und Plattformen hinweg faktorisiert werden können. Folglich werden Aufwände in der Erstellung neuer Designs reduziert und eine konsistente User Experience gewährleistet. Dies stärkt den kundenzentrierten Ansatz der GSG und macht ihre Designprozesse zukunftsfähig, was eine reibungslose Integration neuer Partnerplattformen und eine schnelle Skalierung des Geschäftsmodells der GSG ermöglicht.

Die Herausforderung

Die Global Savings Group, Europas führendes Unternehmen im Bereich Shopping Rewards, bietet internationalen Kund:innen eine Webplattform für die Vermarktung von Coupon-Inhalten an. Die Besonderheit der Plattform ist, dass jede Marke das Produkt passend zu ihrem Brand-Design erhält – inklusive der Möglichkeit verschiedene Individualisierungen im Inhalt vorzunehmen. Um die konsistente Erstellung, Skalierung, Implementierung und Verwaltung von Designkomponenten zu gewährleisten, ist die Einführung einer umfassenden Designlogik erforderlich. Dazu muss ein komplexes Designsystem entwickelt werden, das sich fehlerfrei an eine große, wachsende Zahl von Marken anpassen und individualisieren lässt, aber dennoch auf wiederverwendbaren Designstandards basiert.

Das Ergebnis

In enger Zusammenarbeit mit der GSG entstand ein multi-brand Design System, das über 28 Marken mit ihren individuellen Styleguides und dazugehörigen Page-Templates umfasst, sowie eine zentrale Komponenten-Datenbank mit einer großen Auswahl an Kernkomponenten und jeweils zahlreichen Variationen. Diese Bibliothek an wiederverwendbaren Design Elementen führt zu mehr Effizienz, Konsistenz und Skalierbarkeit bei der Anbindung neuer Partner-Plattformen sowie bei der Anpassung bestehender Designs.

Zusätzlich zu den Design-Elementen wurden detaillierte Guidelines zur Erstellung und Nutzung des Design Systems erstellt. Diese helfen dem wachsenden Team an Designern und Entwicklern bei einem schnellen Onboarding und ermöglichen die Erweiterung und Pflege des Systems in der Zukunft.

Unser Ansatz

1. Audit des bestehenden Produkt-Designs:
Erfassung von bestehenden Design-Elementen und Entwicklung einer Logik zur Verwendung übergreifender Komponenten. Das grundsätzliche Design des Produktes war bereits vorhanden und wurde im Zuge des Projektes vereinheitlicht, erweitert und verbessert.

2. Konzeption der Design System Struktur:
Die außergewöhnliche hohe Komplexität eines Systems für viele unterschiedliche Marken erforderte eine Struktur, die im Vergleich zu typischen Design Systemen viel weiter unterteilt werden musste.

3. Definition einer Design-Sprache:
Festlegung von klaren Design-Prinzipien, welche wiederverwendbare Standards setzen.

4. Entwicklung einer Komponenten Bibliothek:
Erstellung einer Kollektion von wiederverwendbaren UI Komponenten und markenspezifischen Styleguides, sowie Seiten-Templates nach dem Atomic Design Prinzip.

5. Dokumentation:
Umfangreiche Onboarding Dokumente inklusive Training Videos, Check-Listen und How-Tos in Textform sowie über 8 Stunden Videomaterial.

6. Beratung im Design Prozess und bei der Implementierung des Design Systems:
Definition des Prozesses für die Design Entwicklung mit Hilfe des Design Systems. Ergänzend wurden allgemeine Standards für die Übergabe und Übernahme von Design in die Code Entwicklung erstellt (z.B. Naming, Versioning …).

7. Funktionsübergreifende Zusammenarbeit:
Das Designsystem wurde in enger Zusammenarbeit mit dem internen GSG-Team entwickelt, das aus Designern, Ingenieuren, Produktmanagern, Marketing- und SEO-Spezialisten besteht.