Barrierefreie Rheinbahn — App

Die Aufgabe:
Eine barrierefreie Rheinbahn App. Ein Usability- und Designkonzept sollte die Basis darstellen. Darauf aufbauend sollten die Funktionen deutlich einfacher und klarer als bisher werden. Wie kann ich einfacher ein Ticket kaufen? Wie finde ich schneller von A nach B? Welches Ticket ist das beste für mich? Die App sollte zu einem täglichen Begleiter der Fahrgäste werden und ihren Alltag vereinfachen.

Der Anfang:
Zunächst bin ich viel Bahn gefahren und habe mir zusammen mit dem Team der Rheinbahn überlegt wie man die gewünschten Features am besten für den Fahrgast aufbereiten kann. Daraus ist ein Designsystem entstanden, welches die Nutzung stark vereinfacht und Funktionen so darstellt wie der Nutzer sie erwarten würde. Ein Ticket z.B. muss man auf der Rolltreppe oder beim Einsteigen in die Bahn lösen können.

Vergleich der alten mit den neuen barrierefreien Rheinbahn App

Die Rheinbahn AG ist ein 1896 gegründetes Verkehrsunternehmen mit Sitz in Düsseldorf, welches dem Verkehrsverbund Rhein-Ruhr (VRR) angehört. Mit jährlich etwa 230 Millionen Fahrgästen auf einem Gebiet von 570 Quadratkilometern ist die Rheinbahn das fünftgrößte Nahverkehrsunternehmen Deutschlands und das größte im VRR.

Drei Mobiltelefone die unterschiedliche Ausschnitte des Dashboards der barrierefreien Rheinbahn App zeigen.

Drei der neuen Funktionen in der App. Links der Abfahrtsmonitor mit allen Linien die von einer bestimmten Haltestelle in der nahen Zukunft abfahren werden. In der Mitte das Dashboard mit allen Daten über bestimmte Haltestellen, Linien, das Wetter, den Verkehr in NRW, direkte Live-Fahrplanauskunft für festgelegete Strecken und vieles mehr. Rechts die Fahrtenübersicht nach einer Fahrplanauskunft. Von dort aus kommt man in die Detailansicht mit allen Stops, Umstiegen und Informationen zur Barierrefreiheit der Haltestellen.

Analyse von bestehendem Konzept

Als man mich ins Projekt holte gab es bereits einen Axure Clickdummy mit einigen Funktionen. Diesen haben wir nach einem UX-Audit an vielen Stellen nochmal gemeinsam abgeändert und Funktionen vereinfacht, oder einfacher zugänglich gemacht. Anschließend ging es darum die einzelnen Funktionen zu streamlinen und zu priorisieren. Parallel entwickelte ich ein Designsystem, welches flexibel prägnant und zugleich einfach ist; Wenige Hierarchie-Ebenen, Inhalte auf das wesentliche reduziert, nur zeigen was in dem jeweiligen Schritt für den Kunden sinnvoll ist. Jeder Moment der Irritation musste in einem iterativen Prozess aufgespürt und ausgebessert werden.

Abbildung von Userflows für eine Änderungsanforderung für das Frontend Team.

Logikplanung eines Change-Requests für das Frontend Team

Abbildung einzelner UI Elemente die das Erscheinungsbild der barrierefreien App bestimmen.

Content-Module aus dem entwickelten Design-System der Rheinbahn App

Schematische Darstellung aller Stationen an denen ich beteiligt war im Prozess der Erstellung der barrierefreien App und ihrer Umsysteme.

Projektplan

Parallel unterstütze ich die Rheinbahn bei dem Design des Single-Sign-On welches plattformübergreifend einen Login möglich macht. Der Aboshop wurde ebenfalls mit einer Abteilung inhaltlich und visuell überarbeitet und damit fit gemacht für die Nutzung in der nativen App.

Drei Mobiltelefone in denen der Ablauf des Ticketkaufs dargestellt wird.

Ticketkauf mit eezy.nrw in einfachen Schritten. Man checkt an einer Starthaltestelle per GPS Koordinaten ein und startet die Fahrt. Während der Fahrt bekommt man ein Ticket ausgestellt, welches sich beim Kontrolleur vorzeigen lässt. Ist man an der Zielhaltestelle angekommen, checkt man einfach wieder aus und der Preis des Tickets wird nach Luftlinien Kilometern berechnet. Sollte man vergessen sich auszuchecken, wird man beim Entfernen von einer Route automatisch daran erinnert.

Darstellung des Dashboards in einer 3D gerenderten Variante. Es sieht aus als wäre der Screen ausgedruckt und würde Wellen werfen. Dient der Darstellung der Komplexität des Dashboards und dessen Funktionen.

Scrollansicht des Dashboards mit einigen der möglichen Funktionen.

Die barrierefreie Rheinbahn App in der Ansicht im Landscape Mode. Die Darstellung und vollständige Nutzung in dieser Ansicht muss nach WCAG 2.2 und BITV zu jeder Zeit möglich sein.

Da die App nach WCAG 2.2 und BITV barrierefrei ist gibt es natürlich auch die Adaption auf den Landscape Modus

Tram Icon Darstellung vorher und nachher. Die Icons wurden nach den Vorgabe für Barrierefreiheit nach Material 3 von google angepasst.

Barrierefreie Icons nach Material Design 3

Das Tram-Icon zeigt exemplarisch, worum es bei der Überarbeitung ging. Die ursprüngliche Version (links) war zeichnerisch detailliert: filigraner Stromabnehmer, dünne Fensterstege, schmale Konturen. Was in der Vektordatei sauber aussieht, verliert bei 24 px auf einem Smartphone-Display seine Lesbarkeit – feine Linien brechen weg, Binnenformen laufen zu.

Die Neuzeichnung (rechts) folgt dem Keyline-System von Material Design 3 für die barrierefreie Rheinbahn App. Alle Formen liegen auf einem 24-dp-Raster mit definierter Live Area; Kreis und Rechtecke geben die optischen Grenzen vor. Die Strichstärken sind auf mindestens 2 dp vereinheitlicht, Details wie Stromabnehmer und Fenstergliederung auf klare Flächen reduziert, die Radien an die Corner-Radius-Logik des Systems angeglichen. Das Icon füllt die Live Area gleichmäßiger aus und wirkt neben anderen Symbolen nicht mehr zu leicht.

Damit erfüllt es die Anforderungen der BITV 2.0, die für öffentliche Stellen und Verkehrsunternehmen verbindlich ist und über die EN 301 549 auf die WCAG-Kriterien verweist – insbesondere den geforderten Kontrast von 3:1 für grafische Bedienelemente. Das Ergebnis ist kein anderes Icon, sondern dasselbe Zeichen, nur so gebaut, dass es in jeder Größe und auf jedem Untergrund funktioniert.

Die Fahrplanübersicht der barrierefreien Rheinbahn App wird hier einmal im Light- und einmal im Darkmode angezeigt.

Ansicht Lightmode/Darkmode der Fahrplanauskunft in der Fahrtenübersicht

Light- und Darkmode der Fahrtwegsansicht auf der Karte in der barrierefreien Rheinbahn App.

Fahrtverlaufsansicht auf der Karte im Light-/und Darkmode

Darstellung der barrierefreien Rheinbahn App auf unterschiedlichen Displaygrößen.

Responsives Design skaliert je nach Displaygröße von sehr klein (z.B. iPhone 6) bis sehr groß (z.B. iPhone Pro Max)

Darstellung von Warenkorb der barrierefreien Rheinbahn App und dem Gültigkeitsbereich der Tickets auf unterschiedlichen Displaygrößen.

Ansicht von Warenkorb und Geltungsbereich auf der Karte in verschiedenen Displaygrößen

Detailansicht der Fahrplanauskunft der barrierefreien Rheinbahn App im Darkmode.

Fahrplanauskunft im Detail im Darkmode