Projektübersicht

Ich entschiede mich im Kontext des Semesterprojektes, mich mit dem öffentlichen Nahverkehr in Potsdam auseinanderzusetzen und fasste im Verlauf der Durchführung den Entschluss, eine App im Namen der Verkehrsbetriebe Potsdam (VIP) zu gestalten.

Im Verlauf des Projektes nutze ich folgenden Research Methoden:

1. Heuristische Evaluation 

2. Competition Research

3. Online Survey

4. Card Sorting

5. Paperprototyping

Auf Basis dieser Erfahrungswerte gestaltete ich zunächst Low Fidelity Wireframes, um daraufhin einen Mid Fidelity Prototyp in Figma zu entfernen, der alle relevanten Funktionen der App beinhaltet.

Research Phase (01)

Heuristische Evaluation

Da es speziell für den öffentlichen Nahverkehr in Potsdam keine vorhandene Anwendungssoftware gibt, nahm ich mir die App der Deutschen Bahn zur Hand, um diese in einer Heuristischen Evaluation genauer auf ihre Stärken und Schwächen zu analysieren. Der DB Navigator ist im App Store auf Platz 1 der Nah- und Fernverkehr Apps und damit eine gute Grundlage für die Recherche meines Projektes.

Die Evaluation nahm ich dabei nach den zehn Prinzipien von Jakob Nielsen vor. Die für mich relevantesten Erkenntnissen ergaben sich im Bereich der Navigation. Viele Informationen und Funktionen, die in ihrer Relevanz nicht unterschieden werden, führen zu Unübersichtlichkeit und einer komplizierten Navigation. Der Fokus der App, Verbindungen zu finden und Tickets zu buchen, verliert an Prägnanz. Zudem verlangsamt eine Menüführung die Handlungsabläufe.

Positiv vermerkte ich mir ein schlichtes und einheitliches Design sowie die Möglichkeit, zu jedem Zeitpunkt Prozesse abzubrechen oder innerhalb der Seiten zurückzugehen.

Competition Research

Im nächsten Schritt entschied ich mich dazu, direkte Konkurrenten im potsdamer öffentlichen Nahverkehr zu betrachten, und warf ein Blick auf die App der Berliner Verkehrsbetriebe (BVG Fahrinfo: ÖPNV Berlin) und des Verkehrsverbund Berlin (VBB Bus & Bahn: Routenplaner).

Wie ich direkt zu Beginn feststellen musste, sind beide Apps in ihrem Aufbau identisch und unterscheiden sich lediglich im Design, wobei jeweils die Markenfarben des jeweiligen Unternehmen zum Einsatz kommen.

Allgemein sind beide Apps mit vielen, teils überflüssigen Informationen überladen, worunter besonders die Navigation leidet. Die Elemente auf dem Bildschirm sind oft kleinteilig und mit keiner erkennbaren visuellen Hierarchie strukturiert, worunter die Bedienung besonders in hektischen Situation leidet.

Online Survey 

Meine vorangegangen Recherchen ergaben, dass ein übersichtliches Interface, das sich auf wesentliche Funktionen beschränkt, entscheidend für eine benutzerfreundliche Bedienung ist. Nun galt es herauszufinden, welche Funktionen jedoch für die User von hoher Relevanz sind. Dafür erstellte ich ein online Survey, um verschiedene Meinungen und Stimmungen unterschiedlicher Personengruppen zu erfassen.

Die Umfrage strukturierte ich wie folgt:

Nutzung von Öffentlichen Verkehrsmitteln

- Wie viele Kilometer legst du am Tag mit Verkehrsmitteln zurück?

- Wie oft nutzt du Öffentliche Verkehrsmittel?

Bewertung von Öffentlichen Verkehrsmitteln

- Wie bewertest du deine generelle Erfahrung mit dem ÖPNV?

- Gibt es ein Ereignis, dass deine eben abgegebene Meinung hervorruft?

Apps für den Öffentlichen Nahverkehr

- Verwendest du eine digitale Anwendung für den ÖPNV?

- Welche Funktionen wünscht du dir für eine ÖPNV App? (Card Sorting)

- Welche weitere Funktionen wünscht du dir?

Stress im Öffentlichen Nahverkehr

- Welche Situationen beim Nutzen des ÖPNV rufen bei dir Stress hervor?

- Wann empfindest du am meisten Stress?

Ergebnisse des Survey sind hier einsehbar:                                         https://fhp.incom.org/action/open-file/607023

Die Onlineumfrage war für mein Projekt ein entscheidendes und hilfreiches Tool. Es ermöglichte mir, einen Fokus für die App zu setzen, Funktionen zu filtern und Stimmungen einzufangen, die mir ein Einblick in die Wünsche und Bedürfnisse der User gaben. Ich analysierte die Ergebnisse und konnte mich auf entscheidende Funktionen meiner App festlegen.

Low Fidelity Wireframes (01)

Nach dem online Survey begab ich mich in voller Motivation an die Entwicklung von Low Fidelity Wireframes in Figma, welche die grobe Struktur der App widerspiegeln sollte. Zum damaligen Zeitpunkt war ich mit der Ausarbeitung dieser Wireframes zufrieden, übersah jedoch, dass wichtige Funktionen keinen Platz gefunden haben und ich entscheidende Navigationen im Interface vernachlässigt habe. Diese Vorgehensweise würde sich später noch rechen ...

Mid Fidelity Prototyp (01)

Doch vor dieser Erkenntnis beschäftigte ich mich zunächst mit der Designsprache meiner App. Wie zu Beginn angekündigt, entschied ich mich dazu, mein Projekt im Namen der Verkehrsbetriebe Potsdam (VIP) zu erarbeiten. Dementsprechend setzte ich mich mit deren Website auseinander, um basierend darauf insbesondere das Farbschema anzupassen und dem Branding der VIP gerecht zu werden.

Daraufhin begann ich auch schon den Mid Fidelity Prototyp, der das finale Ergebnis meines Projektes darstellen sollte, zu entwickeln. Währenddessen zu Beginn noch alles gut schien, musste ich aber schnell feststellen, dass meine Wireframes nahezu nichtsaussagend waren und ich viele Entscheidungen hinsichtlich des Aufbau und der Navigation noch gar nicht getroffen hatte. Zu diesem Zeitpunkt meines Projektes war an einen Mid Fidelity Prototyp noch gar nicht zu denken.

Diese Realisation war zunächst hart, aber auch ein großes Learning meinerseits und veranlass mich dazu, zunächst zwei Schritte zurückzugehen und neue Research Methoden anzuwenden, die mir bei der Festlegung des Aufbaus und der Navigation unterstützen sollten.

Research Phase (02)

Card Sorting

Das Card Sorting empfand ich als optimale Methode, um mein Dilemma zu lösen. Die gefilterten Funktionen aus dem online Survey notierte ich dieses Mal auf digitale Karten in Miro, um im Rahmen eines Card Sorting, eine für den User schlüssige Navigation im Interface festzulegen. Das Card Sorting, führte ich online via Zoom mit drei Testpersonen durch. Ich erklärte Ihnen kurz den Ablauf und überreichte Ihnen damit die Verantwortung, alle auf dem Board vorhandenen Karten mit den von mir notierten Funktionen den Oberbegriffen zuzuordnen. Diese Oberbegriffe orientierten sich am User Flow der App und beschrieben damit die verschiedenen Screens, wie: „Startseite“, „Suchen Screen“ und „Routen Screen“. Im Verlauf des Card Sorting entschieden wir gemeinsam noch einen vierten Screen „Navigation“ zu ergänzen. 

Das Sorting lief recht frei ab, meine Aufgabe lag darin, das Gespräch zu leiten und mir vor allem Notizen zu machen und damit noch mehr Einblicke in das Nutzerverhalten zu bekommen.

Interessant war, dass manche Funktionen doppelt zugeordnet wurden, um im Prozess immer alle notwendigen Informationen bereit zu haben. Zudem konnte ich Übereinstimmungen zwischen den Ergebnissen aus dem Survey und dem Card Sorting erkennen. So wurde die Funktion „Routen einspeichern“ mit der höchsten Relevanz bewertet und im Card Sorting auch auf die Startseite gelegt. Erkenntnisse wie diese bestätigten mein Vorgehen und die Qualität meiner Ergebnisse.

Paperprototyping

Das finale Ergebnisse des Card Sorting diente mir damit als Vorlage für die zweiten low fidelity Wireframes, welche ich dieses mal auf Papier skizzierte, um gestalterische Details zunächst außen vor zu lassen und mich ausschließlich auf die Navigation im Interface zu fokussieren.

Mid Fidelity Prototyp (02)

Insgesamt fühlte ich mich in meinem Vorgehen viel sicherer. Das Card Sorting & Paperprototyping gaben mir eine klare Struktur im Interface, die ich argumentativ begründen kann. Somit setzte ich mich erneut an den Mid Fidelity Prototyp in Figma und damit dem finalen Design der App.

Finales Design: ÖPNV App der VIP

Homescreen

Der Homescreen ist aufs Wesentlichste reduziert. Im Vordergrund steht die Karte mit der eigenen, aktuellen Position. Die Karte ermöglicht es einem, sich zu orientieren und über den „Bus Button“ oben rechts auch die näheste Linie/Haltestelle zu finden. Der „Standort Button“ direkt darunter, bringt einen immer zu seiner aktuellen Position zurück, sollte man die Karte verschieben.

Am unteren Bildschirmrand befinden sich die eigens angelegten Favoriten, welche viel besuchte Standorte speichern und diese schnell zugänglich machen. Mit einem Wisch nach rechts taucht der „Hinzufügen Button“ auf, mit dessen Betätigung man zu einem neuen Screen gelangt.

Favoriten hinzufügen

Dieser Screen zeigt eigentlich den gleichen Screen wie zuvor, lediglich mit neuen Elementen am unteren Bildschirmrand. An diesem beginnt eine kleine Abfolge an Informationseingaben, um einfach und schnell Favoriten zu ergänzen. Nach Abschluss wird man automatisch zum Homescreen geleitet, auf dem auch der neu angelegte Favorit erscheint.

Suchen Screen

Der Suchen Screen öffnet sich mit einem Overlay über den Homescreen, sobald man auf das „Wohin?“-Element tippt. Dieses Overlay gliedert sich hierarchisch von oben nach unten. Ganz oben befindet sich die Suchleiste, und direkt darunter bietet die App die Möglichkeit, Zielorte aus dem persönlichen Terminkalender zu erkennen und diese als Zieldestination aufzuführen. Alternativ befinden sich darunter auch noch die zuletzt gesuchten Ziele.

Über jeder dieser Elemente gelangt man auf den folgenden Screen, auf dem einem die drei nächsten Verbindungen von seinem eigenen Standort aus zum Zielort angezeigt werden. Die Auswahl wird bewusst auf drei reduziert, um einen Überfluss an Informationen zu vermeiden. Sie kann jedoch bei Bedarf erweitert werden. Um die Informationen schneller Lesen zu können, wurde jedem Transportmittel eine Farbe zugeordnet. Busse sind demnach Lila und die Tram Blau. Diese Farben habe ich ebenfalls von der Website der VIP übernommen. Unter den Verbindungen mit dem ÖPNV werden zudem alternative Verbindungen, die andere Mobilitätsanbieter einschließt, aufgeführt, um eine größere Flexibilität zu bieten.

Auch hier gelangt man über jedes dieser Elemente auf den folgenden Screen, der die ausgewählte Verbindung auf der Karte visualisiert. Einschließlich aller Haltestellen. Auch hier wird dem User die Möglichkeiten geboten, die Verbindungen zu vergleichen, indem dieser die Pfeile am schwebenden Element betätigt und damit die vorherige oder darauf folgende Verbindung einsehen kann.

Entscheidet sich der Nutzer für eine Verbindung, startet die Navigation.

Navigation

Auf diesem Screen liegt der Fokus darauf, dem Verwender zur Haltestelle zu navigieren und die Zeit im Blick zu halten. Neben der Info, wann der Bus an der Haltestelle eintrifft, sieht der Nutzer auch, wo der Bus sich auf der Karte befindet.

In dem Fall, dass die geplante Verbindung aufgrund von Verspätung länger dauert als geplant und eine schnellere Verbindung verfügbar ist, wird einem diese vorgeschlagen und kann mit einem Klick aktiviert werden. Eine neue Route wird dann berechnet und erscheint automatisch. Selbstverständlich kann die Navigation jederzeit beendet werden, wodurch man wieder auf den Homescreen gelangt.

Prototyp: https://bit.ly/3CIN9fJ

Fazit

Ich konnte aus dem Kurs viele neue theoretische Inhalte und Erfahrungen mitnehmen. Ich lernte viele verschiedene methodische Vorgehensweisen im Designprozess kennen und konnte diese im Rahmen des Kurses einsetzen.

Wie man beim Lesen der Dokumentation erfahren hat, befand ich mich an einer Stelle im Projekt, an dem ich kurz vor Semesterende demotiviert feststellen musste, entscheidende Schritte übersprungen zu haben, die dazu führten, das ich planlos vor meinem Prototypen saß. Die Möglichkeit, noch in der semesterfreien Zeit an unserem Projekt zu arbeiten, hat mir nicht nur jede Menge Stress erspart, sondern ermöglichte mir auch, mich intensiver mit den Inhalten aus den Vorlesungen zu beschaffen.

Ich musste herausfinden, wo ich falsch vorgegangen bin und wie ich den Bogen kriege. Und wer hätte es gedacht, es gelang mir mithilfe weiterer Research Methoden. Die Lehre, dass die Recherche Grundlage des Interfaces ist, bekam ich so knallhart zu spüren und bin dafür dankbar! Die „Aha-Momente“ nach dem Card Sorting und Paperprototyping, haben sich bei mir eingebrannt und haben in mir die Bedeutung einer guten Vorarbeit verinnerlicht.

Am Ende bin ich glücklich mit meinem Ergebnis. Ich konnte eine ÖPNV-App entwickeln, die neue Ansätze verfolgt und sich auf wesentliche Funktionen beschränkt. Selbstverständlich beinhaltet eine solche App in der Realität viele weitere Unterfunktionen, die zur vollständigen Nutzung der App nicht weniger wichtig sind, aber im Rahmen meines Projektes nicht im Fokus lagen. Stattdessen visualisierte ich die Key Funktionen und den Grundaufbau der App und konnte zu dessen Umsetzung viele unterschiedliche Research Methoden anwenden und deren Nutzen kennenlernen und bewerten.