Voith

Design System

Zusammenfassung
Für Voith wurden die digitalen Anforderungen aus Applikationen, Web, mobilen Anwendungen und  E-Learning in einem zentralen Design System gebündelt. Ziel war die Schaffung einer einheitlichen, skalierbaren Gestaltungsgrundlage für alle digitalen Produkte.
Jahr
2020 – 2023
Branche
Industrie
Tätigkeit
/
Design System
/
Design Operations
Dauer
138 Wochen – 394 Std.
Im Auftrag
Ray Sono
Voith Designsystem Anwendungsbeispiel 1
Voith Designsystem Anwendungsbeispiel 2
Voith Designsystem Anwendungsbeispiel 3
Ausgangslage und Umsetzung
Herausforderungen

Voith ist ein international agierendes Technologieunternehmen mit mehreren Unternehmensbereichen, darunter Voith Paper, Voith Hydro und Drive Technology. Die digitalen Produkte dieser Sparten unterscheiden sich in Funktion, Komplexität und Anwendungslogik deutlich.

Die Herausforderung bestand darin, ein zentrales Design System zu entwickeln, das sowohl die technischen Anforderungen aus Web, App, Applikationen und E-Learning abdeckt als auch die inhaltliche Differenzierung der einzelnen Geschäftsbereiche berücksichtigt.

Gleichzeitig musste das System in sehr unterschiedlichen Nutzungskontexten funktionieren, von Marketing-Websites über interne Tools und Service-Anwendungen bis hin zu komplexen Applikationen im industriellen Umfeld. Darüber hinaus sollte das Design System nicht isoliert als gestalterisches Regelwerk bestehen, sondern direkt in die technische Entwicklung überführt werden und als Single Source of Truth für bestehende und neue Produkte dienen.

Lösung

Entwickelt wurde ein zentrales, spartenübergreifendes Design System als verbindliche Grundlage für zahlreiche digitale Produkte. Das System umfasst Layout, Typografie, Farben, Icons und Effekte sowie eine umfassende Komponentenbibliothek. Diese beinhaltet sowohl grundlegende UI-Komponenten als auch komplexere funktionale Module wie unterschiedliche Navigationsstrukturen für Web, App und industrielle Applikationen. Das gesamte System wurde konsistent für Light Mode und Dark Mode konzipiert, um unterschiedlichen Nutzungskontexten gerecht zu werden.

Die strukturelle Basis bildet ein Variablen System in Figma, das als Single Source of Truth für Design und Entwicklung dient und systematisch in die technische Umsetzung überführt wird.

Im Projekt wurden Komponenten unter anderem als Web Components sowie auf Basis von Kendo UI technisch entwickelt. Dadurch entstand eine belastbare Verbindung zwischen Design und Entwicklung, die bestehende Voith Produkte ebenso wie zukünftige Anwendungen auf einer gemeinsamen Systemlogik zusammenführt.

Ergänzend wurde eine zentrale Dokumentation in Frontify aufgebaut, um Gestaltungsrichtlinien, Komponentenlogik und Anwendungsprinzipien transparent bereitzustellen.

Voith Design System Prozess

Meine Tätigkeit

Verantwortlich für die konzeptionelle und strukturelle Ausarbeitung des Design System sowie die Design Operations Beratung:

  • Beratung zur organisatorischen Verankerung des Design System im Unternehmen
  • Entwicklung eines systematischen Variablenmodells in Figma als technische und gestalterische Grundlage
  • Aufbau einer Komponentenbibliothek in enger Abstimmung mit der technischen Umsetzung
  • Konzeption der strukturellen Übergabe von Variablen und Komponenten in die Entwicklung
  • Definition von Prozessen für die kontinuierliche Erweiterung und Qualitätssicherung des Systems
  • Befähigung internationaler Voith Mitarbeiter*innen zur eigenständigen Pflege und Weiterentwicklung des Systems in verteilten Teams

Das Projekt wurde in einem interdisziplinären Team umgesetzt, bestehend aus zwei Designern, zwei Entwicklern und einer Projektleitung.

Voith Designsystem Abbildung Token Studio
Voith Designsystem Abbildung Token Studio
Über den Kunden

Voith ist ein weltweit tätiger Technologiekonzern mit Hauptsitz in Deutschland. Das Unternehmen ist in den Bereichen Voith Paper, Voith Hydro und Drive Technology aktiv und entwickelt industrielle Lösungen für Energie, Papierproduktion und Antriebssysteme. Die Digitalisierung der Geschäftsbereiche ist ein zentraler Bestandteil der strategischen Weiterentwicklung.