Nextbike iOS App Redesign

Navigation

Die Navigation der App läuft momentan sowohl über ein hamburger menu (links oben), als auch über ein slide-up modal (unten).

Die Navigation über das hamburger menu ist weder »intuitiv«, noch accessible, da 1. wichtige Informationen für den Benutzer nicht sichtbar sind, 2. mehr Interaktion benötig wird, um den Inhalt zu entdecken und 3. die Position auf dem Touchscreen weniger gut erreichbar ist.

Deshalb habe ich die Navigation über eine tab bar gelöst, da so eine schnelleres navigieren zwischen den verschieden Funktionen möglich ist und die Funktionen generell schneller auffindbar sind. Außerdem lässt sich so zu jedem Zeitpunkt nachvollziehen, wo sich der Nutzer innerhalb der App oder einer bestimmten Funktion befindet.

Die nun etwas zurückhaltendere Karte im Hintergrund unterstützt die Sichtbarkeit der Icons für Fahrräder und Scooter, sowie der teilweise vorhandenen farbigen Zonen.

Die gewählten Farben basieren auf den Branding-Farben von nextbike und TIER, da auch die Fahrräder und Scooter selbst diese Farben haben und sie aus diesem Grund einen hohen einen Wiedererkennungswert besitzen.

Filter

Eine Sache die es vorher noch nicht in Potsdam, aber schon in einigen anderen Orten gab, sind Filter. Diese werden je nach Verfügbarkeit in deiner Gegend angezeigt. Hierbei habe ich vor allem versucht, die geringe visuelle Unterscheidung des Filter-Icons bei aktiver Filterauswahl zu verbessern.

Filter (Stand Januar 2023)

Beim Gestalten des Filters habe ich mehrere Iterationen durchlaufen und mich schließlich dafür entschieden, dass die Auswahl fast identisch mit der aktuellen Version über ein Modal abläuft. Die aktive Auswahl wiederum wird nun über einen bzw. mehrere Chips dargestellt. So ist nicht nur ersichtlich, dass es einen aktiven Filter gibt, sondern auch, was genau dieser Filter bewirkt. Außerdem verschwinden die Standort-Markierungen von Fahrrädern/Scootern nicht vollständig von der Karte, sondern bleiben als kleine Punkte bestehen.

Rental

Über den »Scan to Rent«-Button kommt man zu einem QR Code Scanner mit dem die Fahrräder und Roller ausgeliehen werden können. Dieser hat nun einen neuen Titel, ein neues Icon und ist deutlich größer. Wurde ein QR-Code eingescannt, muss man die Ausleihe auf einem floating sheet bestätigen (vorher: slide-up).

Nach der Bestätigung ploppt eine card auf, die den momentanen Status der Ausleihe anzeigt. Hierbei gibt es drei verschiedene Zustände: während der Fahrt, im geparkten Zustand und nach der Abgabe. Diese können sowohl durch ihre Farbkodierung, als auch durch die Icons und die Beschriftung unterschieden werden. Vorher war das ganze über eine kleine Ampel innerhalb vom slide-up modal über eine Ampel-Anzeige gelöst.

Über einen Klick kommt man auf ein modal, welches weitere Informationen und Interaktionsmöglichkeiten zur momentanen Ausleihe bietet. Hierfür habe ich die Inhalte der originalen App neu strukturiert und konnte so den horizontalen Swipe loswerden.

Bei der gleichzeitigen Ausleihe mehrerer Fahrräder/Scooter, werden die Karten gestapelt, lassen sich aber durch einen Klick übereinander anzeigen und anschließend auswählen.

Rental History

Die Rental History ist aus dem hamburger menu in einen eigenen Tab gewandert. Hier sind nun auf den ersten Blick die wichtigsten Informationen der letzten Ausleihen erkennbar.

Klickt man auf eine der vergangenen Ausleihen, werden weitere Informationen angezeigt (drill-down). Dort lassen sich auch Probleme und kaputte Teile am Fahrrad melden. Die Kartenansicht und Informationen habe ich in der Detailansicht aus dem Original übernommen, die Informationen aber konsistent zum modal der aktuellen Ausleihe umsortiert.

Rental History Before/After

News

Die News waren vorher im swipe-up auf der Startseite enthalten. Jetzt haben sie einen eigenen Tab. User werden so öfter auf die News und die aktuellen Angebote aufmerksam. Dies war definitiv keine user-zentrierte Entscheidung, wäre vermutlich aber aus strategischen Gründen und Marketing Sicht in einem echten Projekt unumgänglich gewesen.

Dies wurde mir in einem Gespräch mit nextbike im Nachhinein auch bestätigt. Da nextbike seine Einnahmen hauptsächlich durch Kooperationen mit Städten und Universitäten, sowie Werbepartnern generiert, wird die News-Section in den unterschiedlichen Orten auf verschiedene Weisen genutzt und ist momentan ein existenzielles Feature der App.

News Before/After

Übersicht aller Tabs

Map ⸱ Rental History ⸱ News ⸱ Account