top of page

Design System

Multiplattform-, Multimarken- und tokenisiertes Designsystem

Herausforderungen

Elli, eine Marke des Volkswagen-Konzerns, die auf Energie- und Ladelösungen spezialisiert ist, stand vor der Herausforderung, mehrere Produkte auf verschiedenen Plattformen zu verwalten. Diese Herausforderung erforderte ein einheitliches Branding für verschiedene VW-Tochtergesellschaften, was zu Inkonsistenzen bei den Komponenten, Redundanz und Ineffizienzen bei der Projektentwicklung führte.

Implementierte Lösungen

Um dieses Problem zu lösen, begann Elli mit der Entwicklung eines multiplattform, multimarken, White-Label- und Token-Designsystems. Ziel des Designsystems war es, eine einzige zuverlässige Quelle für alle Komponenten, Farben, Abstände, Typografien, Symbole und andere Designelemente zu schaffen und so Konsistenz und Genauigkeit auf allen Elli-Plattformen sicherzustellen: Figma, Web, Android und iOS.

Durch die Prüfung von Designelementen, -stilen und -komponenten in jedem Elli-Produkt konnte das Designsystem-Team eine variable Architektur und globale Komponenten für alle Produkte erstellen, die genau auf die Bedürfnisse von Elli zugeschnitten sind. Dies betonte auch die Zusammenarbeit nicht nur zwischen Designern und Entwicklern, sondern auch über verschiedene Produkte, Plattformen und Marken hinweg

Beitrag von Reply

  • Erstellung und Pflege der Variablen/Token-Architektur

  • Synchronisierung aller Plattformen mit Variablen/Tokens über Style Dictionary

  • Durchführung von Audits von Komponenten über verschiedene Plattformen, Produkte und Marken hinweg

  • Design von Figma-Komponenten mit integrierten Variablen/Tokens

  • Implementierung von Web-Komponenten in Übereinstimmung mit dem Figma-Design (React, Style Dictionary, Storybook, MUI)

  • Erstellung und Verteilung von Icons über alle Plattformen hinweg

  • Umfassende Dokumentation von Komponenten und Variablen, einschließlich der Komponentenstruktur, Spezifikationen sowie Empfehlungen und Warnungen

  • Beratung in Design und Entwicklung

Hauptmerkmale

Synchronisierung aller Plattformen mit Hilfe von Variablen/Tokens, die über das Figma-Plugin „Token Stdio“, Figma-Variablen und das Style Dictionary

Eine Sammlung wiederverwendbarer Komponenten für die verschiedenen Plattformen, gestaltet mit diesen Variablen/Tokens

Sicherstellung der Konsistenz und Skalierbarkeit der Komponenten für einfache Änderung oder Hinzufügung von Marken und Themen, aber auch ausreichende Flexibilität an die Anforderungen verschiedener Plattformen

Erstellung von umfassenden Richtlinien für verschiedene Komponente, Variablen und Tokens

Impact

Durch die Standardisierung des Designsystems und die Bereitstellung wichtiger Services konnte Elli dank REPLY auf lange Sicht viel Zeit und Ressourcen einsparen. Das einheitliche Designsystem ermöglicht eine effiziente Zusammenarbeit, optimierte Entwicklung und sorgte für ein einheitliches Branding über verschiedene Plattformen und Produkte innerhalb des Volkswagen-Konzerns hinweg.

Methodology

Scrum, Design thinking

Technologies & Tools

Figma, Figma variables & modes, Token Studio, Style Dictionary, React, TypeScript, MUI, Azure DevOps, Asana

Sprich unseren Experten für die Verwaltung von Ladestationen an

Stefan_edited.jpg

Stefan

Software Engineer

  • LinkedIn
  • Youtube
  • Xing
  • Twitter
  • LinkedIn

Danke fürs Einsenden!

bottom of page