Deutsche Bahn

Herausforderungen

Die digitalen Kernprodukte der Deutschen Bahn, bahn.de mit der zentralen Buchungsstrecke sowie die App DB Navigator, wurden über Jahre hinweg eigenständig entwickelt und in getrennten Sketch-Dateien gepflegt. Parallel arbeitete die Deutsche Bahn an einem unternehmensweiten, auf Figma basierenden Design System, das perspektivisch alle digitalen Kanäle konsolidieren soll.

Die Herausforderung bestand darin, die bestehenden Arbeitsdateien beider Produkte im laufenden agilen Betrieb von Sketch nach Figma zu überführen, ohne die kontinuierliche Feature-Entwicklung zu unterbrechen. Gleichzeitig sollten strukturelle und visuelle Inkonsistenzen zwischen bahn.de und DB Navigator identifiziert und schrittweise konsolidiert werden.

Eine zusätzliche Komplexität ergab sich aus der Umsetzung der Navigator App in Light Mode und Dark Mode, die sowohl gestalterische als auch systemische Anforderungen an das zukünftige Variablenmodell stellte.

Lösung

Die bestehenden Sketch-Dateien wurden in eine konsolidierte Figma-Struktur überführt und dort neu organisiert. Ziel war es, eine gemeinsame, zukunftsfähige Designbasis für beide Produkte zu schaffen und zugleich die spätere Integration in das übergeordnete DB Design System vorzubereiten.

Bestehende Sketch-Styles wurden in ein systematisches Variablenmodell überführt. Die Benennung der Variablen orientierte sich bereits an der Logik des unternehmensweiten Design System, während die visuellen Werte zunächst die aktuelle Produktgestaltung abbildeten. Deckungsgleiche Elemente wie Icons oder Farben wurden direkt mit dem übergreifenden Design System verknüpft. Dadurch entstand eine stabile Übergangsarchitektur, die sowohl den laufenden Betrieb sicherte als auch die spätere Migration erleichterte.

Parallel wurden gestalterische Abweichungen zwischen bahn.de und DB Navigator analysiert und gemeinsam mit den Produktteams konsolidiert. Für die Navigator App wurde innerhalb der neuen Figma-Struktur eine konsistente Logik für Light Mode und Dark Mode aufgebaut.

Meine Tätigkeit

Verantwortlich für die konzeptionelle und strukturelle Migration der Designsysteme sowie den Aufbau der Komponentenbibliothek in Figma:

• Planung und Umsetzung des Umzugs von Sketch nach Figma im laufenden agilen Betrieb
• Aufbau einer konsolidierten Figma-Struktur für bahn.de und DB Navigator
• Entwicklung eines Variablenmodells mit systematischer Benennung zur Vorbereitung der Integration in das DB Design System
• Konzeption und Umsetzung der Light Mode und Dark Mode Logik für die Navigator App
• Analyse und Harmonisierung bestehender Inkonsistenzen zwischen beiden Produkten
• Aufbau einer Figma-Komponentenbibliothek von grundlegenden UI-Komponenten bis hin zu komplexeren Feature-Modulen
• Schulung und Enablement der Produktteams zur eigenständigen Weiterentwicklung in Figma

Die Deutsche Bahn AG ist eines der größten Mobilitäts- und Logistikunternehmen Europas. Mit digitalen Angeboten wie bahn.de und der App DB Navigator stellt sie zentrale Services für Reiseplanung, Buchung und Information bereit. Die kontinuierliche Weiterentwicklung dieser Kanäle ist ein wesentlicher Bestandteil der digitalen Transformationsstrategie des Unternehmens.