Der Prozess

1. UX Audit Status Quo 
- 2. User Flow Chart 
- 3. Best Practice Exploration anderer Mobilitätsanbieter 
- 4. Redesign auf Basis eines einheitlichen Design Systems



Zunächst wurde mittels einer heuristischen Evaluation (auch UX Audit) das aktuelle Design des DB Ticketbuchungsflows auf Basis der Usability Heurisitken von Jacob Nielsen analysiert und bewertet. Erkannte Probleme wurden zu Themenfeldern geclustert: 1. Informationsüberflutung und fehlende Informationen, 2. Inkonsistentes Design, 3. Fehlende Flexibilität. Diese wurden in die drei Opportunity Areas „Strukturierung von Informationen“, „Konsistentes Design“ und „Flexibilität“ übersetzt.
Mit Hilfe einer User Flow Chart konnte der Weg der Bahn-Kund*innen durch den Buchungsprozess nachvollzogen werden und Doppelungen sowie Verirrungen aufgedeckt werden.

Die Opportunity Areas und die User Flow Chart bildeten die Grundlage für das darauffolgende Redesign. Dieses folgt einem konsistentem Design System, welches während des Prozesses stetig erweitert wurde.

Das Konzept

Die DB Website ist der meistgenutze Touchpoint zur Ticket-Buchung. Die Bahn-Kund*innen bilden dabei eine heterogene Gruppe von Berufs-Pendelnden bis zu Urlaubs-Reisenden mit unterschiedlicher Online-Affinität.


Der UX Audit hat gezeigt: Die aktuelle Ticketbuchung über die DB Website ist höchstgradig verwirrend, zeitraubend und frustrierend. Wichtige Daten wie die Ankunftszeit oder das Reisedatum sind zeitweise nicht aufzufinden, doppelte Überprüfungsseiten überfluten mit Informationen und der Versuch, eine kleine Änderung der Sucheingabe zu tätigen, führt zu einer neuen, riesigen Eingabemaske. Wegen mangelnder Filter bleibt einem nicht anderes übrig, als 40 Suchergebnisse selbst zu durchforsten. 



Das Redesign der Ticketbuchung soll Abhilfe schaffen, indem ein strukturierteres, konsistentes und flexibles Interface geschaffen wird, dass die Ticketbuchung für unterschiedliche Nutzerperspektiven zu einer leichtgängigen Aufgabe macht.

Die Umsetzung

Verschiedene Einstiegspunkte


Das Kernelement der Ticketbuchung ist die Verbindungssuche. Verschiedene Einstiegspunkte in die Ticketsuche von der Startseite aus ermöglichen das Abholen unterschiedlicher Nutzergruppen, wie z.B. Pendler oder Urlaubsreisende.



Filteroptionen

Im redesignten Ticketflow gibt es ausreichend Filteroptionen, welche sich an realen Nutzer-Perspektiven orientieren. Damit wird eine erheblich schnellere Verbindungsauswahl ermöglicht. Die drei häufigsten Suchziele „günstigste (und schnellste) Verbindung an einem festgelegtem Tag“ „schnellste Verbindung zu fixer Ankunftszeit“ und „günstigster Tag für geplante Reise“ können über die Suchfilter, den Kalender mit Preisansicht und die Preistrends erreicht werden.

Mentale Stützen

Im oberen Bereich der Seite befindet sich konsistent ein Panel zur Anzeige der getätigten Suche („Ihre Suche“), welches sich nach der Verbindungswahl in eine Zusammenfassung der Reisedaten verwandelt („Ihre Reise“). Hier finden sich konsistent alle Informationen auf einem Blick. Ein Überprüfungs-Screen kann dadurch eingespart werden.



Strukturierung

An verschiedenen Stellen wurden Informationen strukturiert, wie z.B. bei der Ticketwahl. Dadurch wird Verwirrung reduziert und Entscheidungen werden unterstützt. Durch die Reduzierung von Doppelungen oder nicht notwendigen Informationen konnte der Flow um einiges verkürzt werden.

Design System

Das Design System orientiert sich an den moderneren Web-Angeboten der DB, wie dem ICE Portal. Großzügige Paddings, mehr Weißraum und eine klare Schrift-Hierarchie sorgen für eine bessere Strukturierung der Informationen. Die Marken-Farben Rot, Schwarz und Grau, ebenso wie die DB Hausschrift wurden übernommen. Durch den Verzicht auf Outlines und dem Einsatz von dezenten Schlagschatten wird eine Leichtigkeit geschaffen, welche die neu gewonnene Flexibilität der Interaktion visuell unterstreicht.

Reflektion

Dieser Kurs hat mir sehr gut gefallen. Ich habe gelernt, wie man parallel zum Design-Prozess ein Design System erstellt und welchen Mehrwert dieses für komplexe Projekte mit sich bringt. Dieses Wissen wird mir für zukünftliche Projekte sicher sehr hilfreich sein. Da ich kaum Vorerfahrung mit Figma hatte, war der Kurs teilweise sehr herausfordernd, gleichzeitig hatte ich einen riesigen Lernfortschritt und bin begeistert von den Möglichkeiten, die Figma bietet (Autolayout, interaktive Komponenten…). Auch das spezifische Behandeln von Komponenten und die Referate zu Design Patterns waren sehr spannend und ein toller Wissens-Input parallel zur eigenen Projektentwicklung.