Ein Blick in die Zukunft des Designs bei Migros
Bist du bereit, in die faszinierende Welt eines Revolutionären Design-Systems einzutauchen? Die Migros Design Experience (MDX) hat das Spiel verändert und die Regeln für effizientes Design und nahtlose Entwicklung neu geschrieben.
Vergiss zeitraubende Doppelspurigkeiten zwischen Design und Entwicklung, endlose Abstimmungen zwischen verschiedenen Teams und ein uneinheitliches Erscheinungsbild. Mit MDX wird die gesamte Migros-Gruppe in Einklang gebracht, und zwar auf eindrucksvolle Weise.
Hintergrund
Bessere User Experience, schnellere Entwicklung, tiefere Kosten. Ein Multibrand Design System verspricht viel. Wichtig ist dabei eine gute Planung und Abstimmung. Bei der Konzeption, Umsetzung und Integration haben wir die Migros internen Teams unterstützt.
Mit der Migros Design Experience (MDX) werden Designs aus dem Figma automatisiert direkt in den Code und in die React und Web-Components übertragen - so schnell wurde noch kein Redesign oder neuer Brand erstellt.
Herausforderungen
Vor der Einführung von MDX war es schwierig, eine einheitliche Experience über alle Kanäle der Migros-Gruppe hinweg zu schaffen. Jedes Produkt hat seine eigenen unabhängigen Designs welche dem CI/CD angelehnt sind aber immer etwas anders interpretiert werden. Jedes Team entwickelt somit die Basis Komponenten von Grund auf neu. Dadurch entstehen Doppelspurigkeiten und Inkonsistenzen.
Die grosse Herausforderung ist die Designer, Entwickler und das Management zusammenzubringen. MDX bringt alle Beteiligten ins Boot. Ein klares Design System fördert die gemeinsame Ausrichtung von Business, Design- und Entwicklungs-Teams.
Effizienter Einsatz
... wie bringt man die teams dazu mdx zu verwenden? wie erreicht man die versprochene effizienzsteigerung?
Lösung
Zusammen mit der Migros haben wir die Migros Design Experience (MDX) aufgebaut. Wir unterstützen sie bei der Konzeption, Ausarbeitung, Umsetzung und Integration des Design Systems. MDX ist ein Multi-Brand Design System, basierend auf UI/UX Designs mit Design Tokens in Figma, verknüpft mit StencilJS Web Components und React Komponenten - alles automatisiert.
Mit MDX werden Änderungen an Designs in Figma direkt in React und StencilJS Web-Components abgebildet. Auch neue Brands und Themes lassen sich so mit minimalem Aufwand direkt vom UI/UX Team erstellen - und die synchronisierten React und Web Components sind sofort einsetzbar.
«Die agile Vorgehensweise lässt uns komplexe Projekte mit minimalem Overhead durchführen und fördert Offenheit und Transparenz.»
Benjamin, unser Scrum Master
Prozess
Die Designer erstellen ihre Designs in Figma und verwenden dort jeweils Design-Tokens als Variablen für die Angabe von Farben, Schriften, Abständen und so weiter. Automatisiert werden die Design Tokens aus Figma in den Code übernommen und als CSS Variablen fürs Styling der Webcomponents und als Figma Presets aufbereitet. Basierend auf den Tokens erstellt das Entwicklungsteam nun StencilJS Web Components. Dadurch werden die Komponenten im Code mit dem Design in Figma verknüpft.
Durch die Design-Tokens ist sichergestellt, dass Änderungen am Design in Figma direkt in die Komponenten im Code übernommen werden. Änderungen am Design und sogar die Erstellung neuer Themes oder Brands sind somit immer konsistent in Figma und im Code synchronisiert.
Ergebnisse
Dank dem Aufbau von MDX hat die Migros ein einheitliches, universell verwendbares und skalierbares Design-System erhalten. Von UX über Design bis hin zu fertigen, verwendbaren Web-Komponenten - der Prozess ist automatisiert und synchronisiert. Die Designer und Entwickler können nun schnell und einfach auf eine Bibliothek von Komponenten zugreifen, die auf der Basis eines einheitlichen Design-Systems erstellt wurden. Durch den Einsatz von Web Components sind die Komponenten auf praktisch allen Plattformen integrierbar.
Schneller
- Zeiteinsparung beim Design
- Reduzierung von Inkonsistenzen
- Höhere Skalierbarkeit für zukünftige Migros-Unternehmen
- Einfacher wartbar durch weniger Redundanz
Effizienter
- Erhöhung der Effizienz und Geschwindigkeit der Entwicklung
- Nachhaltige Kostensenkung durch gesteigerte Effizienz
- Verbesserung der User Experience durch ein einheitliches Design-System
Fazit
Das MDX Design-System hat die Design- und Entwicklungsteams näher zusammengebracht und die Zusammenarbeit erleichtert. Komponenten werden wiederverwendet anstatt neuentwickelt und dadurch massiv Kosten und Zeit gespart. Wir sind stolz darauf, ein Teil dieses Projekts zu sein und freuen uns darauf, zukünftig weiterhin eng mit der Migros zusammenzuarbeiten.