DB Navigator App

Die DB Navigator App von der Deutschen Bahn AG ist sehr nützlich auf Bahnreisen, um sein digitales Ticket stets parat zu haben und auch einen Überblick über den Reiseablauf zu bekommen. Leider ist die App durch verschiedene Gestaltungsentscheidungen und einer wirren Navigation sehr unübersichtlich, sodass die App auf jeden Fall ein Bedarf für ein Redesign mit sich bringt.

Überblick der aktuellen App

Auffälligkeiten und Schwierigkeiten der aktuellen App:

• verstecktes Hamburger Menu  

• sehr kleine zum Teil schlecht lesbare Typografie 

• undefinierbare Icons ohne Beschriftung, die zum Teil Buttons sind und wichtige Funktionen beinhalten 

• Wo bin ich? – unklares Navigationskonzept: Zurück-Buttons sind nicht beschriftet, Hinweis auf Sektion „meine Tickets“ fehlt 

• wichtige Ticketinformation, wie Gleis, Wagon, Sitzplatz, Reisedauer sind nur sehr versteckt aufzufinden

• hält sich nicht an die iOS Human Interface Guidelines

Redesign

Lösungsansätze Tabbar und Ticketgestaltung

Eine Tabbar, die mit drei Tabs die 8 Kategorien des Hamburger Menüs unterbringt, ist einfach bedienbar und übersichtlicher. Zudem gibt sie einem je nach roter Einfärbung genaue Auskunft, wo man sich befindet. 

Das Ticket ist an das ursprüngliche Ticket angepasst und soll auch visuell an ein analoges Ticket erinnern. Der QR-Code ist als kleine Abbildung sichtbar, um zu zeigen, dass dieser im Ticket auffindbar ist. Die wichtigsten Informationen wie Datum, Ort, Uhrzeit sind bei dem Redesign deutlicher hervorgehoben und zudem bekommt man anhand einer Grafik schon einen Überblick über die gesamte Fahrt und Gleisauskunft.

Lösungsansätze Ticketinformationen

Wenn man auf das Ticket klickt, kommt man durch einen Drill-down zu den Ticketdetails. Diese beinhalten den QR-Code und alle weiteren Ticketinformationen, die man für die Reise braucht. Für das Redesign habe ich allerdings die Wichtigen von nicht relevanten Informationen sortiert. So kommt man zu den weniger relevanten Informationen erst durch das Klicken auf „Weitere Ticketinformation“ und kann sich so den langen Text in sehr kleiner Schriftgröße sparen.

Beschriftungen von Icons und dem Back-Button helfen der Orientierung.

Anstatt über Klicken zum Fahrplan und der Zeitübersicht zu gelangen, gelangt man nun übers Scrollen zu den einzelnen Abschnitten.

Eine schnelle und übersichtliche Reiseauskunft, die mir sagt, wann ich wo hin muss, fehlt mir in der aktuellen App. So habe ich diese Funktion unter „Mein nächster Reiseabschnitt“ mit aufgenommen.

Lösungsansätze Übersicht-Reisedauer

Übers Scrollen kommt man nun zu der Reisedauerübersicht. Hier sieht man in welchem Zug man sich befindet, wann man Umsteigen muss und wann man ankommt. Diese Funktion wäre sehr praktisch, auch für den Sperrbildschirm aktivieren zu können. So muss man nicht extra immer erst die App öffnen.

Lösungsansätze Fahrplan

Übers Scrollen kommt man nun ebenfalls zum Fahrplan. Dieser ist ähnlich an die ursprüngliche Gestaltung angepasst, allerdings war es mir hier wichtig, alles gut lesbar zu gestalten und keine kleinen, uneindeutigen, unbeschrifteten Icons zu haben.

Screenübersicht & Prototyp

Ich habe die Screens der finalen Präsentation, noch einmal überarbeitet, da mir ein paar Kleinigkeiten nicht gefallen haben.

Das Ticket

- sieht eher aus wie eine DB Bahncard

- bei längeren Namen der Haltestationen würden diese nicht mehr in die obere Zeile passen

- es fehlt der Hinweis auf den QR-Code

Navigation

Ein Modal Overlay ergibt eigentlich keinen Sinn, da die Ticketdetails nicht zu bearbeiten sind und somit ein Drill Down mit Zurück-Button mehr Sinn ergibt.

Farben

Ausgegraute Icons und Schriften von Informationen haben mich irritiert, da diese aussahen, als ob sie nicht mehr aktuell sind. Ich habe nun alle wichtigen Informationen in dem DB-Dunkelblau gehalten.

Vorschau des Prototypings

Fazit

In diesem Kurs konnte ich mir viel neues Wissen aneignen. Ich fühle mich nun sicherer in der Gestaltung von Apps für iOS und habe ein Gefühl für sinnvolle Navigationskonzepte bekommen. Zuvor waren mir die verschiedenen Konzepte noch nicht bekannt. Auch konnte ich mich ein wenig mehr mit den Human Interface Guidelines vertraut machen, die einen guten Rahmen und Leitfaden bieten.

Die vielen Vorträge zu Themen wie Icon Design oder Color Management fand ich sehr abwechslungsreich und bereichernd. Die Aufgaben während des Semesters waren eine gute Vorbereitung auf das Redesign-Projekt und man konnte sein Auge schulen, wurde aber nie überfordert.

Bei meinem finalen Redesign Projekt konnte ich durch die wöchentlichen Feedbackrunden eine deutliche Verbesserung meines Designprozesses feststellen. Allerdings habe ich auch gemerkt, wie hochkomplex es ist, die vielen Funktionen der DB-App übersichtlich zu gestalten. In meinem Redesign fehlen auch einige Funktionen, denn eigentlich müsste man auch eine Anzeige für Verspätungen einbauen. Das habe ich aus Zeitgründen nicht geschafft. Weiterhin bin ich immer noch kein Fan des aktuellen App-Designs, habe aber nun auch ein wenig mehr Nachsicht, dass eine gute App nicht so einfach zu gestalten ist und man vieles beachten muss.

Allgemein hat mir die Atmosphäre im Kurs sehr gefallen, sodass man Spaß hatte und sich wohl gefühlt hat. Zudem konnte man auch ein paar Tipps für allgemeine Game-Changer mitnehmen :)