Meine Rolle: UX Engineer | Technologien: React, HTML, CSS, Figma

94% positive Resonanz auf die Buchungsstrecke

Wireframe Mockup Booking — ↑ Abb. 1: Entwickeln des User-Flows für besonders leicht verständliche und schnelle Buchung der Suiten. Startseite mit Filter fürs schnelle Suchen (li.), Schnellsuche per Radius (mi.), Auswahl der Startzeit mit Flyout-Filter, damit der Kunde schnell noch was ändern kann (re.).

Booking Case Study Proto Persona — ↑ Abb. 2: Für die neue Buchungsstrecke und alle nachfolgenden Projekte habe ich eine Proto-Persona auf Basis von KI-Daten erstellt.

Pain Points Booking Case Study — ↑ Abb. 3: Ein halbes Jahr lang, habe ich zudem alle E-Mails gesammelt und bezüglich Probleme bei der Bedienung der alten Buchungsstrecke ausgewertet, um diese Pain-Points besonders zu beachten und nicht zu wiederholen.

Herausforderung

Die alte Buchungsstrecke war unübersichtlich, langsam und fehleranfällig. Kunden konnten ihre gewünschte Suite oft nicht erfolgreich buchen, da der Prozess bei Änderungen von vorne begann. Häufige Beschwerden belegten die Unzufriedenheit. Die Herausforderung bestand darin, eine neue Buchungsstrecke zu entwickeln, die intuitiv, schnell und änderungsfreundlich ist und die Kundenzufriedenheit deutlich steigert.

User-Research

Datenquellen:

Sammlung und Auswertung von Kundenfeedback und E-Mail-Korrespondenzen der letzten sechs Monate (Abb. 3).

Interviews:

Gespräche mit Service-Abteilungen und Kundenbetreuern, um zusätzliche Perspektiven auf häufige Probleme und Kundenbedürfnisse zu erhalten.

Pain Points:

Schwierige Auswahl der Startzeit führte oft zu fehlerhaften Buchungen und Abbrüchen.
Umständlicher Buchungsprozess ohne Zwischenspeicherung führte zu Frustration.

Forschungsfragen:

Wo brechen Nutzer die Buchung ab?
Welche Informationen fehlen oder sind unklar?
Wie wichtig ist eine flexible Änderungsmöglichkeit während des Buchungsprozesses?
Welche Erwartungen haben Nutzer an Geschwindigkeit und Übersichtlichkeit?

Konzeption und Umsetzung

Inhalte & Struktur:

Entwicklung einer Proto-Persona basierend auf KI-Analysen (Abb. 2), um Nutzerbedürfnisse klar zu definieren.
Erstellung erster Skizzen für den Buchungs-User-Flow, fokussiert auf einen minimalen Klickweg und maximale Transparenz.
Aufbau einer klaren Informationsarchitektur, die Änderungen während der Buchung einfach erlaubt.

Design & Entwicklung:

Ausarbeitung von Low-Fidelity Wireframes in Figma für eine frühe Abstimmung (Abb. 1).
Übergabe der Wireframes an die Designabteilung zur finalen visuellen Ausarbeitung.
Frontend-Entwicklung der Buchungsstrecke in React, HTML und CSS unter Berücksichtigung moderner UX-Patterns.
Enge Abstimmung mit dem Backend-Team zur Sicherstellung schneller Ladezeiten und reibungsloser Funktionalität.

Optimierung:

Fokus auf Pagespeed-Optimierung: Minimierung der Ladezeiten im Frontend und Backend.
Einführung von flexiblen Anpassungsmöglichkeiten während der Buchung, z.B. bei der Startzeitauswahl.

Test und Validierung

Iterative Evaluation der Seiten und Komponenten mittels heuristischer Evaluation und 5-Sekunden-Tests zur Optimierung der Verständlichkeit.
Durchführung von Usability-Tests sowohl intern als auch extern mit echten Kunden.
Kontinuierliche Validierung der Nutzerfreundlichkeit basierend auf direktem Feedback und Expertenreviews.

Ergebnis

94 % positive Kundenresonanz im Rahmen eines Live-Tests mit 468 Testkunden.
Deutlich weniger Beschwerden im Service-Center bezüglich der Buchung.
Schnellerer Buchungsprozess und höhere Abschlussraten.
Anerkennung durch die Unternehmensleitung: Verleihung eines internen Preises für außergewöhnlichen Einsatz und erfolgreiche Zusammenarbeit.