VBB Fahrinfo-Redesign

Dieses Projekt, welches im Wintersemester 20/21 im Rahmen des Kurses Apps & Details unter der Leitung von Frank Rausch entstand, beschäftigt sich mit dem Redesign der ÖPNV-App „VBB Fahrinfo“.

Ziel des Kurses war es, Funktionsweise und Design einer App mithilfe der Human Interface Guidelines zu überarbeiten. Dabei sollten mehrere Screens eines Redesigns entstehen, welche den Charakter der App nicht verändern, jedoch gestalterische Probleme lösen.

Navigation

Zu erst beschäftigte ich mich mit der User Experience in der App. Vor allem die Navigationsoptionen erschienen mir sehr umständlich und übertrieben.

Daraufhin startete ich eine Umfrage in meinem Bekanntenkreis und stellte schnell fest, dass viele Personen nur 1-2 Funktionen der überladenen Navigation nutzen.

Das bestärkte mich in meinem Vorhaben die Navigation von einem Hamburger-Menü mit 10 Optionen zu einer Bottom-Navigation zu reduzieren.

Fahrplan

Den ersten Screen, den ich überarbeitete, stellt die zentrale Funktion einer ÖPNV-App dar: die Fahrplaninformation.

Von Anfang an fiel mir auf, dass der Ursprungsscreen sehr farbig und vor allem rot erschien. Das führte zu einer starken visuellen Unruhe, die es zu entschärfen galt. So ging es in erster Linie darum, den Rotanteil auf dem Screen zu reduzieren, ohne das Branding der App zu verlieren. Das sorgt für ruhigeres Bild beim Benutzen der App.

Dabei taten sich mir direkt weitere Probleme auf. Ein großes Problem in der Verwendung von rot als Primärfarbe in einem Corporate Design ist, dass Buttons und Nachrichten in einem Rotton schnell als negativ oder Error aufgefasst werden können. Auch diese Problematik galt es zu lösen. Ich verwendete rot vorrangig als Umrandung und versuchte große Farbflächen zu vermeiden.

Ein weiteres Problem stellte die Navigation auf der Seite dar. Viele wichtige Funktionen sind nu rüber mehrere Clicks zu erreichen. Mein Ziel war es mit die Navigation auf der Seite durch z. B. einen neuen Time Picker zu erleichtern.

Gleichzeitig wirkten alle Informationen sehr gedrungen und gepresst. Um eine bessere Lesbarkeit zu gewährleisten erhöhte ich an einigen Stellen die Schriftgröße und verschaffte dem Text auf der Seite etwas mehr Platz.

Für eine bessere Übersicht verwendete ich außerdem das Color Coding der Deutschen Bahn. Das führt primär bei der Routendetailansicht zu einem klareren Erscheinungsbild.

Zuletzt passte ich mithilfe von Mapbox die integrierte Kartenfunktion an. Ich entfernte unnötige Informationen, veränderte die Farbigkeit und legte einen deutlicheren Fokus auf die Route.

Abfahrten

Das Redesign für den Abfahrten-Screen hatte viele Gemeinsamkeiten mit dem vorherigen Fahrplan-Screen.

Hier ging es auch in erster Linie darum, die fast erdrückende Menge an rot zu reduzieren. Außerdem brauchte die Schrift auch hier ein wenig mehr Platz, um gut lesbar zu sein. Das führte auch hier zu einer klareren Struktur und einem besseren Überblick.

Tickets

Das Hauptziel in der Neugestaltung der Ticketfunktion bestand hauptsächlich darin, die sehr umständliche Navigation bei einem Ticketkauf zu erleichtern. Anstelle von sechs einzelnen Seiten fasste ich die Kaufangaben auf einer Seite zusammen, um Zeit zu sparen.

Zusätzlich stellte ich fest, dass es momentan keine Funktion gibt, bereits gekaufte Tickets erneut anzuzeigen oder zu verwalten.

Einstellungen

Die Einstellungen waren in der Ursprungsversion der App schon einigermaßen gelungen.

Hier gings es darum Übersicht und Struktur zu schaffen und unnötige Screens loszuwerden. Ja/Nein-Optionen brauchen im Redesign kein extra Tab mehr, sondern können mit einem Switch kontrolliert werden.

Zusätzlich hat wurde auch die Schriftgröße und der Abstand zwischen einzelnen Objekten angepasst.