← Home

Booking Flow Case Study

Dieses Projekt wurde im Rahmen eines Uxcel Design Briefs erstellt, bei dem es darum ging, einen interaktiven Prototypen für einen Booking Flow zu gestalten. Dieser sollte Teil eines digitalen Produkts sein, das es Nutzern ermöglicht, Veranstaltungen in ihrer Umgebung zu entdecken. Dafür sollte zunächst Recherche betrieben, anschließend ein Konzept für den User Flow und dann ein Prototyp in beliebiger Fidelity entworfen werden.

Ich entschied mich für eine mobile Buchungsplattform für Konzerttickets, für die ich den Namen ConcertNow wählte. Zunächst führte ich eine kurze Nutzerrecherche durch, deren Inhalt weiter unten zu finden ist. Anschließend entwickelte ich einen User Flow, der den gesamten Buchungsprozess abbildet. Danach erstellte ich ein Design System für die App und schließlich den finalen, interaktiven Prototyp. ⬇️

Ziele

Mein Hauptziel für dieses Projekt war es, eine einfache, unkomplizierte und reibungslose Buchungserfahrung zu schaffen. Um das zu erreichen, musste ich zunächst herausfinden, was das für potenzielle Nutzer bedeutet und wie ähnliche Plattformen dieses Problem lösen.

Da es sich hierbei um ein Übungsprojekt ohne Budget handelt, waren die Ressourcen für die Nutzerforschung begrenzt. Ich entschied mich dazu, eine User Persona für meine Konzertbuchungs-App auf Basis öffentlich verfügbarer Daten zu erstellen. Zusätzlich habe ich mir die Buchungsprozesse einiger Wettbewerber genauer angesehen.

Nutzerrecherche

Laut einer Statistik von Statista aus dem Jahr 2021 sind Menschen im Alter von 20 bis 29 Jahren unter denjenigen, die mindestens einmal im Monat ein Festival oder Konzert besuchen, stark überrepräsentiert. Personen ab 50 Jahren hingegen sind unterrepräsentiert. Die Zielgruppe für Konzerttickets beinhaltet also mehr junge Menschen als Menschen mittleren und fortgeschrittenen Alters.

Die Altersgruppe 20 bis 29 Jahre umfasst zudem viele Studierende. Laut dem Bundesministerium für Bildung und Forschung lag das durchschnittliche monatliche Einkommen von Studierenden im Jahr 2021 bei 876 €. Rund ein Viertel der Studierenden verdiente jedoch 1.300 € oder mehr pro Monat.

Im Jahr 2019 lebten fast 30 % der Studierenden in Deutschland in einer WG mit mindestens einer weiteren Person. Laut CHE sind die meisten Studierenden zudem auf öffentliche Verkehrsmittel angewiesen, anstatt ein eigenes Auto zu besitzen. Auf Basis dieser Datenpunkte und einiger Annahmen über Persönlichkeit und Interessen habe ich Paula, eine User Persona, erstellt. Sie diente als Grundlage für wichtige Designentscheidungen in diesem Projekt.

User Persona

Eine kurze Betrachtung der Konkurrenz

Hier gibt es keine vollständig ausgearbeitete Competitor Analysis, aber dafür einige wichtige Insights, die ich bei der Recherche von ähnlichen, real existierenden Angeboten gewonnen habe:

Insight 1: Die Buchungsprozesse sind oft überladen und kompliziert, was potenziell die Frustration der Nutzer fördert.

Insight 2: Manche der Plattformen haben ein visuell überkommenes Interface, was möglicherweise junge Nutzer abschreckt und das Unternehmen veraltet wirken lässt.

Insight 3: Search- und Homepages bieten eine wilde Mischung unterschiedlicher Veranstaltungen aus verschiedenen Kategorien an, von denen die meisten für einen individuellen Nutzer uninteressant sind. Nicht, dass ich das empirisch überprüft hätte, aber es gibt vermutlich nicht viele Menschen, die sich gleichermaßen für Helene Fischer, Heavy Metal, Stand-up Comedy und Billie Eilish interessieren.

Schlussfolgerungen

Ich wusste nun, was ich tun musste, um es Nutzern zu ermöglichen, einfach neue Konzerte in der Nähe des eigenen Wohnorts zu finden und einen reibungslosen Buchungsprozess zu gewährleisten:

Den Prozess einfach gestalten und unnötige Schritte vermeiden
Das UI sauber und modern halten
Das Gefühl von Kontrolle beim Nutzer aufrecht erhalten
Nutzer vorher gut über die Konsequenzen ihrer Handlungen und die nächsten Schritte informieren

User Flow

Auf Basis meiner Recherche entwarf ich den folgenden User Flow. Mit einem Klick auf das Bild lässt er sich direkt in Figma in seiner vollen Größe betrachten:

Design System

Das Design System hielt ich minimalistisch, um einen modernen Look zu erzeugen, und beschränkte mich auf die wesentlichen Komponenten des UIs:

Prototyp

Jetzt machte ich mich an die Gestaltung der tatsächlichen Wireframes für den Prototypen. Dabei halfen mir sowohl mein Mentor, als auch die Uxcel Community mit hilfreichem Feedback zu einzelnen Aspekten weiter.

#1 Search Tab

Der Search Tab ist der Ausgangspunkt des User Flows. Hier findet Paula auf den ersten Blick Vorschläge für Konzerte, die an ihre individuellen Präferenzen angepasst sind. Außerdem kann sie leicht erkennen, um welches Genre es sich jeweils handelt.

#2 Overlay

Wählt Paula nun eins der Konzerte an, das sie interessiert, öffnet sich ein Overlay mit weiteren Informationen. Der Buchungsprozess hat im engeren Sinne noch nicht begonnen und durch ein Tippen auf die Fläche oberhalb des Overlays wird es wieder geschlossen. Paula kann bei Interesse entweder die Veranstaltung für später speichern oder mittels des CTA-Buttons den Buchungsprozess starten.

#3 Ticket Selection

Auf diesem Tab kann Paula die Anzahl ihrer Tickets wählen. Sie bekommt außerdem immer eine entsprechende Auflistung inklusive aller Kosten angezeigt und kann nun entweder zurück zum Search Tab gehen, den Buchungsprozess fortsetzen oder die gewählten Tickets für später in ihren Bag legen.

An dieser Stelle hielt ich das Symbol einer Tasche für angemessener als das eines Einkaufswagens, weil es um Konzerttickets geht. Allerdings gibt es auch gute Argumente für das Symbol des Einkaufswagens, weil die allermeisten Shops es verwenden und es somit näher an den Nutzungskonventionen ist. Welches Symbol besser funktioniert, wäre im Zweifel mittels weiterer UX Research herauszufinden.

#4 Payment Method Selection

Hier kann Paula aus den angebotenen Zahlungsdienstleistern wählen oder ihre Kreditkartendaten eingeben, wenn sie mit Karte zahlen möchte. Dabei betont die App, dass die Zahlung im nächsten Schritt nicht direkt bestätigt wird, sondern dass Paula ihre Angaben noch einmal überprüfen kann.

#5 Order Review

Hier kann Paula ihre Bestellung und ihre Zahlungsmethode nochmal überprüfen, bevor sie die Zahlung bestätigt, zum letzten Schritt zurückgeht oder ihre Angaben nochmal bearbeitet. So behält sie immer die Kontrolle über den Vorgang.

#6 Success

Nachdem sie die Zahlung durchgeführt hat, wird Paula eine Bestätigung der Buchung angezeigt, zusammen mit der Information, wie sie auf ihre gebuchten Tickets zugreifen kann. Schließlich kann sie entweder zurück zum Home Tab gehen, oder direkt weitere Künstler erkunden, die sie vielleicht interessieren.

Insights: Was ich aus diesem Projekt gelernt habe

Es war sehr spannend und produktiv für mich, mich zum ersten Mal intensiver mit User Flows auseinanderzusetzen. Dabei waren folgende Lektionen besonders wichtig für mich:

Check your competition: Auch wenn ich keine vollständige Analyse gemacht habe, hat mir die Untersuchung von Wettbewerbern geholfen, Inspiration und eigene Verbesserungsmöglichkeiten zu finden.
Feedback is king: Die Uxcel Community und meinen Mentor in das Projekt miteinzubeziehen hat mir sehr geholfen. Ein wertvoller Vorschlag war zum Beispiel, die einzelnen Karten im Search Tab mit Angaben zum jeweiligen Genre zu versehen.
Software: Ich habe mehr über Prototyping und Overlays in Figma gelernt.

Direkt zum interaktiven Prototyp geht es hier: