Deutsch
Deutsch

Reiseplanungen vereinfachen
und den Urlaub genießen

Reiseplanungen vereinfachen
und den Urlaub genießen

Die nächste Reise steht an und natürlich möchte man das beste dabei raus holen. Was gibt es zu sehen? Wo kann man am besten essen? Wo hab ich nochmal das Ticket? Was ist, wenn…?
Es erfordert oft viel Planung und Recherchearbeit, bis man das richtige für sich rausgesucht hat. Und das oft zu Lasten der Zeit während des Urlaubs.

Zum Abschluss meiner Weiterbildung zur UX/UI Designerin, habe ich „VoyaJoy“ entwickelt. Mit Hilfe der App sollen Reiseplanungen deutlich vereinfacht werden und Unterlagen, Notizen etc. in einer Anwendung gebündelt werden.


Innerhalb von vier Wochen habe ich einen User Research mit Surveys und Interviews durchgeführt, die gewonnen Erkenntnisse in einen User Flow, User Journey Map und Personas verarbeitet und basierend darauf Wireframes erstellt, mit dessen Hilfe ich die finale App ausgestaltete.

Übersichtsscreen, in dem bereits angelegte Reisen aufgelistet sind
Übersichtsscreen, in dem bereits angelegte Reisen aufgelistet sind
Übersichtsscreen, in dem bereits angelegte Reisen aufgelistet sind
Übersichtsscreen der ausgewählten Reise mit verschiedenen Abschnitten zu Buchungen, Informationen etc.
Übersichtsscreen der ausgewählten Reise mit verschiedenen Abschnitten zu Buchungen, Informationen etc.
Übersichtsscreen der ausgewählten Reise mit verschiedenen Abschnitten zu Buchungen, Informationen etc.
Reiseplan mit anstehenden Akitivitäten und Kalender
Reiseplan mit anstehenden Akitivitäten und Kalender
Reiseplan mit anstehenden Akitivitäten und Kalender

Probleme erkennen

Ich selbst verreise gerne und recherchiere und plane dann schon im Vorfeld Aktivitäten oder auch mögliche Restaurantbesuche um die Zeit vor Ort möglichst sinnvoll zu nutzen. Dabei bin ich schon öfter auf Probleme gestoßen, die die Planung unnötig verkomplizieren.
Am meisten hat mich gestört, dass ich oft viele unterschiedliche Apps, wie z.B. zur Navigation, Informationsbeschaffung oder Tagesplanung nutzen musste. In Geprächen mit Freunden wurde deutlich, dass es vielen anderen ähnlich geht und man sich etwas Vereinfachung wünschen würde.

Ein besseres Verständnis für den User entwickeln

Um den potentiellen User und dessen Bedürfnisse besser zu verstehen, habe ich zunächst eine anonyme Umfrage durchgeführt, in der ich Aspekte zum Reiseverhalten und der Planung abgefragt habe. Hier kam bspw. heraus, dass 56% mehrere Stunden und 26% gleich mehrere Tage mit der Reiseplanung verbringen. Dabei nutzen 70% der Befragten zwei bis drei verschiedene Apps zur Recherche – darunter meist Google, Instagram bzw. Reiseblogs oder sie fragen Freunde und Familie nach Empfehlungen.

Umfrageergebnis zu der Frage wie viel Zeit für die Reiseplanung verbracht wird
Umfrageergebnis zu der Frage wie viel Zeit für die Reiseplanung verbracht wird
Umfrageergebnis zu der Frage wie viel Zeit für die Reiseplanung verbracht wird
Umfrageergebnis zu der Frage wie viele verschiedene Apps und Webseiten für die Planung genutzt werden.
Umfrageergebnis zu der Frage wie viele verschiedene Apps und Webseiten für die Planung genutzt werden.
Umfrageergebnis zu der Frage wie viele verschiedene Apps und Webseiten für die Planung genutzt werden.
Umfrageergebnis zu der Frage ob der User lieber allein oder mit weiteren Personen verreist.
Umfrageergebnis zu der Frage ob der User lieber allein oder mit weiteren Personen verreist.
Umfrageergebnis zu der Frage ob der User lieber allein oder mit weiteren Personen verreist.

Einige Beispiele aus der durchgeführten Umfrage

In persönlichen Interviews bestätigte sich nochmal die Annahme, dass viel Zeit in Recherche und Planung investiert wird. Dabei war unerheblich, ob dies vor oder noch während der Reise passierte.
Ein weiterer Aspekt war die Reiseplanung mit Freunden oder Partnern. 60% der Befragten reisen min. zu zweit und treffen sich für die Planung persönlich mit den Mitreisenden um weitere Details zu besprechen. Auch hier wird schon allein für die Organisation eines Treffens oder Videocalls viel Zeit beansprucht, was vermeidbar wäre.

Pain Points und Key Features

Bei der Auswertung der Umfrage und Interviews konnte ich letztendlich drei häufig genannte Pain Points bzw. Wünsche herausfiltern:

  1. Schnelle Inspiration finden für Aktivitäten vor Ort

  1. Schnelle Inspiration finden für Aktivitäten vor Ort

  1. Schnelle Inspiration finden
    für Aktivitäten vor Ort

Inspiration für bestimmten Zeitrahmen zu finden ist schwer

haben manchmal ziellose Momente

nicht immer Lust während der Reise zu recherchieren

Empfehlungen für Aktivitäten in der Nähe wären hilfreich

  1. Informationen und Tickets bzw. Buchungen in einer App haben

  1. Schnelle Inspiration finden
    für Aktivitäten vor Ort

Infos und Dokumente sind über versch. Apps verteilt

Alle Dokumente an einen Ort ist besser als zwischen Apps zu wechseln

Buchungen
zu komplex/
unüber-
sichtlich

  1. Gemeinsames Planen mit mehreren Personen vereinfachen

  1. Schnelle Inspiration finden
    für Aktivitäten vor Ort

Planung mit einer oder mehreren Personen schwierig/
langwierig

Aufgaben/
Buchungen werden geteilt

Optionen werden besprochen und gemeinsam entschieden

verreist
oft mit
Freunden

Zusammen mit meinen vorherigen Überlegungen, was für Funktionen ich in die App mit aufnehmen möchte, habe ich mich für folgende Key-Features entschieden, die zu einer deutlichen Erleichterung der genannten Probleme führen sollten:

  • Eine Sammlung von Vorschlägen zu verschiedenen Aktivitäten oder Orte

  • Ein KI-Assistent, der nach Inspiration, Wegbeschreibungen etc. befragt werden kann

  • Ein Wallet, in der z.B. Flugtickets, Restaurantbuchungen oder Museumstickets hinterlegt werden können

Außerdem sollte es möglich sein, Reisen gemeinsam mit anderen Usern zu gestalten. Jeder, der die App installiert hat, kann unabhängig voneinander den Reiseplan einsehen und bearbeiten, was dann zu gegebener Zeit besprochen werden kann, ohne dass erst noch ein Treffen organisiert werden muss.

Wer sind meine User?

Basierend auf den Rechercheergebnissen habe ich drei Personas erstellt, die drei Typen von Reisenden abbilden: Alleinreisende, Gruppenreisende und Eltern mit Kind. Während der nachfolgenden Entwicklung habe ich mich vorrangig auf die Gruppenreisenden fokussiert, da sie die größte Zielgruppe abbilden.

Mit einer User Journey Map visualisierte ich verschiedene Berührungspunkte des Users mit der App und konnte so dessen Bedürfnisse besser verstehen.

Personatafel von alleinreisender Alina
Personatafel von alleinreisender Alina
Personatafel von alleinreisender Alina
Personatafel von Mutter Yvonne
Personatafel von Mutter Yvonne
Personatafel von Mutter Yvonne
Personatafel von Gruppenreisenden Robin
Personatafel von Gruppenreisenden Robin
Personatafel von Gruppenreisenden Robin
User Journey Map  basierend auf der Persona Robin
User Journey Map  basierend auf der Persona Robin
User Journey Map  basierend auf der Persona Robin

Ein User Flow half mir dabei, eine erste Struktur für die App herauszuarbeiten, mögliche Features zu gruppieren und unnötige Zwischenschritte zu entfernen.

User Flow mit verschiedenen Funktionen der App
User Flow mit verschiedenen Funktionen der App
User Flow mit verschiedenen Funktionen der App

Wireframes und Styling

Beim anschließenden Wireframing konnte ich ausprobieren, wie einzelne Screens am besten strukturiert sein sollten, welche Komponenten zur finalen Gestaltung nötig werden und sich wiederholen oder wie die optimalen Abstände einzelner Elemente zueinander sind.

Wireframe vom Login-Screen
Wireframe vom Login-Screen
Wireframe vom Login-Screen
Wireframe der leeren Reiseübersicht
Wireframe der leeren Reiseübersicht
Wireframe der leeren Reiseübersicht
Wireframe zur Erstellung einer Reise
Wireframe zur Erstellung einer Reise
Wireframe zur Erstellung einer Reise
Wireframe der gefüllten Reiseübersicht
Wireframe der gefüllten Reiseübersicht
Wireframe der gefüllten Reiseübersicht
Wireframe der erstellten Reise
Wireframe der erstellten Reise
Wireframe der erstellten Reise
Wireframe des Reiseplans
Wireframe des Reiseplans
Wireframe des Reiseplans
Wireframe mit Empfehlungen zu Restaurants
Wireframe mit Empfehlungen zu Restaurants
Wireframe mit Empfehlungen zu Restaurants
Wireframe der interaktiven Karte mit Vorschlägen
Wireframe der interaktiven Karte mit Vorschlägen
Wireframe der interaktiven Karte mit Vorschlägen
Wireframe des Wallets mit Tickets
Wireframe des Wallets mit Tickets
Wireframe des Wallets mit Tickets
Wireframe eines ausgewählten Tickets im Wallet
Wireframe eines ausgewählten Tickets im Wallet
Wireframe eines ausgewählten Tickets im Wallet
Wireframe zum KI-Assistenten
Wireframe zum KI-Assistenten
Wireframe zum KI-Assistenten

Bei der Farbgestaltung habe ich mich für zwei kontrastierende Farben entschieden, wobei ein gedecktes Violett einen ruhigen und organisierten Charakter vermitteln und den Content rahmen soll.
Ein kräftiges Orange soll dagegen herausstechen und den User zur Interaktion bewegen. Sie wird vor allem für CTAs und als Akzentfarbe genutzt.

Um eine optimale Lesbarkeit zu gewährleisten, habe ich mich für die weitverbreitete Inter entschieden, die speziell für die Darstellung von kleinen bis mittelgroßen Texten auf Displays entwickelt wurde. Dank der hohen x-Höhe wird die Lesbarkeit verbessert und die Augen ermüden beim lesen längerer Texte nicht ganz so schnell.

Stylesheet mit Textbeispiel, Primärfarben und Icons
Stylesheet mit Textbeispiel, Primärfarben und Icons
Stylesheet mit Textbeispiel, Primärfarben und Icons

Stylesheet mit einem Textbeispiel, den Primärfarben und Navigations-Icons

Die finale Gestaltung

Insgesamt wird der Blick des Users auf wesentliche Punkte gelenkt. Untermenüs sind schnell zu erfassen, Inhalte wurden auf wenige Teile reduziert, so dass der User nicht gleich von Informationen erschlagen wird und sich überfordert fühlt.

Der Header mit den Reisedaten, Mitreisenden und zum Reiseziel passenden Foto ist immer sichtbar, so dass keine Verwirrung entsteht, wenn man zwischen unterschiedlichen Reisen hin und her switcht.
Jeder Nutzer, der an einer Planung beteiligt ist, kann unabhängig von anderen Teilnehmern Inhalte hinzufügen oder entfernen. Die anderen Teilnehmer werden dann über die Änderung benachrichtigt.
So kann jeder sich die Zeit nehmen, die er gerade zur Verfügung hat und es muss nicht erst ein persönliches Treffen organisiert werden.

In der Bottom- bzw. Hauptnavigation befinden sich die Key-Features der App, die von jedem Screen aus erreicht werden können.

In der Übersichtsseite der Reise werden wichtige Buchungen und Reservierungen aufgelistet, die sich individuell um weitere Abschnitte erweitern lässt. Reisedetails und beteiligte User sind im Headerbereich einsehbar und editierter.

Über eine Tabnavigation direkt darunter bewegt man sich durch einzelne Menüpunkte durch, die die jeweilige Reise betreffen.

Unter „Reiseplan“ befindet sich eine Timeline, auf der verschiedene wichtige Zeitpunkte während der Reise, wie Tischreservierungen oder Checkin-Zeiten, als Meilensteine dargestellt werden. Daten hierfür werden entweder aus den in der Übersicht eingetragenen Buchungen übernommen oder können vom User selbstständig eingetragen werden.

Über den Tab „Entdecken“ werden Vorschläge zu verschiedenen beliebten Aktivitäten aufgezeigt. Diese sind in verschiedene Kategorien unterteilt, welche man über Filter auswählen kann. Die Relevanz der Vorschläge ermittelt sich aus einem Durchschnitt von gesammelten Rezensionen verschiedener Bewertungsportale. So erhält der User eine gut kuratierte Sammlung verschiedenster Aktivitäten und Orte die er sich auch in einer Favoritenliste abspeichern kann.

Unter dem Tab „Info“ lassen sich beispielsweise allgemeine Informationen oder grundlegende Vokabeln der landeseigenen Sprache nachlesen.

Screen zur interaktiven Karte
Screen zur interaktiven Karte
Screen zur interaktiven Karte
Screen zum Menüpunkt Info
Screen zum Menüpunkt Info
Screen zum Menüpunkt Info

Über den Hauptmenüpunkt „In der Nähe“ gelangt der User zu einer interaktiven Karte, in der verschiedene Orte, die sich in unmittelbarer Nähe des Users befinden, als Cards aufgelistet werden. Diese können je nach Bedarf durch vorgegebene Filter eingegrenzt werden.

Als „Reiseführer“ wird der KI-Assistent bezeichnet. Hier öffnet sich ein Chat-Interface in dem Prompts eingegeben werden. So kann man nach einer Wegbeschreibung oder Empfehlungen fragen, auf die der Reiseführer sofort Antworten gibt. Sollten die Antworten unzureichend ausfallen, kann der Prompt immer wieder verfeinert werden. Vorschläge können anschließend gespeichert werden.

Screen mit einem ausgwähltem Ticket aus dem Wallet
Screen mit einem ausgwähltem Ticket aus dem Wallet
Screen mit einem ausgwähltem Ticket aus dem Wallet
Screen des Wallets
Screen des Wallets
Screen des Wallets

Im „Wallet“ werden bspw. Flugbuchungen oder Tickets zu Museumsführungen abgespeichert. Diese werden als Tickets bzw. Karten abgebildet und haben je nach Kategorie des Tickets eine andere Farbgebung. Wird eine Karte ausgewählt, vergrößert sich diese und gibt alle relevanten Details preis.
Mittels eines FABs können Tickets hinzugefügt werden.

Meine Learnings

Auch wenn es herausfordernd war, allein eine komplette App zu entwickeln, hatte ich großen Spaß bei der Vorbereitung und Gestaltung. In den vier Wochen der App-Entwicklung konnte ich erfolgreich zuvor erlernte Methoden zu User Research und UI-Design anwenden und vertiefen.
Die Research-Phase hat mir nochmal deutlich gemacht, wie wichtig es ist, den User und seine Bedürfnisse von Anfang an miteinzubeziehen um ein sinnvolles und nutzerzentriertes Produkt zu entwickeln.
Zwar hatte ich im Vorfeld schon einige Ideen und Features im Kopf, konnte diese aber durch die Erkenntnisse aus den Interviews priorisieren und aufs wesentliche reduzieren.

Da die Zeit für aussagekräftige Testings nicht mehr gegeben war, möchte ich diese noch im Nachhinein durchführen und die App optimieren. So würde ich z.B. noch eine Messaging-Funktion einplanen, über die eine Gruppe innerhalb einer erstellten Reise unkompliziert kommunizieren kann.