User Research, UX-Konzeption und UI-Design für einen transparenteren digitalen Bestellprozess
Categories
UI/UX-Design Case Study
Client
Internes Rechercheprojekt
Project
UX-Optimierung für Mobile App Konzept (Android)
Services
Usability Evaluierung UI/UX-Design Wireframes, User Flows & Informationsarchitektur Prototyping & Konzeptvalidierung
Year
2026, 6 Wochen
Methodik
Human-Centered Design Prozess und Methoden (CPUX, ISO 9241-210)
Arbeitsergebnisse
Interviewtranskripte,
Ist-Szenarien, Personas, Aufgabenmodelle, User Journey Map, Informationsarchitektur, Nutzungsszenario und Storyboard, Wireframes, Prototyp
Tools
Figma, Google Material UI Kit
Bestellen funktioniert
- aber fühlt sich nicht kontrollierbar an
Ausgangslage
Die bekannten Lieferplattformen (z.B. Lieferando) lösen den grundlegenden Bestellprozess effizient.
In den Interviews zeigten sich dennoch mehrmals Unsicherheiten, Reibungspunkte und Zusatzaufwand.
In diesem Projekt wurde der digitale Bestell- und Lieferprozess von Pizzalieferdiensten aus Nutzerperspektive untersucht.
Auf Basis qualitativer Interviews und einer Ableitung von Nutzungsanforderungen nach CPUX-F wurde ein konzeptionelles mobile App UI-Design für eine fiktive Pizzeria mit Fokus auf Transparenz, Kontrolle und Nachhaltigkeit entwickelt.
Die Ausgansfrage war:
Wie kann ein Bestellprozess gestaltet werden, der Nutzende bei diesen Aufgaben gezielter unterstützt?
Nutzung verstehen
Um den Nutzungskontext zu analysieren wurden mit sieben repräsentativen Nutzenden (primäre Nutzende des geplanten Bestellsystems bzw. der App) Interviews durchgeführt.
Ziel war zu erfahren:
Wie sieht der typische Bestellprozess mit den aktuellen Systemen aus?
Nutzungskontext
Wer bestellt – und unter welchen Bedingungen?
Digitale Bestellprozesse finden nicht isoliert statt.
Soziale Situationen, Zeitdruck, Gruppendynamik und wirtschaftliche Rahmenbedingungen spielen eine Rolle und beeinflussen die Nutzenden.
Das führt zu unterschiedlichen Anforderungen and die App
Während alleine bestellt wird oder die selbe Pizzavariante gewählt wird, erwarten die Nutzenden Geschwindigkeit.
Bei Gruppenbestellungen werden Übersichtlichkeit und Transparenz erwartet.
Von Erkenntnissen zu Anforderungen
Was müssen Nutzende wissen, entscheiden und tun können?
Anforderungsdefinition
Die Interviews dienten nicht dazu, direkt Features zu sammeln. Daher wurde mit der Analyse der Erkenntnisse begonnen, um die relevanten Nutzungsanforderungen festlegen zu können.
Ein Ist-Aufgabenmodell zeigt, welche Handlungen Nutzende durchführen müssen, um ihr Hauptziel zu erreichen (Eine passende Pizza bestellen und rechtzeitig erhalten).
Es macht aber nicht sichtbar, welcher Bedarf nach Informationen und welche Entscheidungen hinter diesen Handlungen stehen.
Daher wurden aus dem gesamten Nutzungskontext Erfordernisse identifiziert, anschließend daraus konkrete und überprüfbare Nutzungsanforderungen als Grundlage für die Gestaltung der Pizzabestell-App abgeleitet:
Nach demselben Prinzip wurden weitere Anforderungen für Produktauswahl, wiederkehrende Bestellungen, Gruppenbestellungen und Auswahl von nachhaltigeren Verpackungsoptionen abgeleitet.
Aufgaben neu strukturieren
Nicht jeder bestehende Arbeitsschritt oder Aufgabe muss einfach digital nachgebaut werden.
Die Nutzungsanforderungen bilden die Basis für ein Soll-Aufgabenmodell.
Hier verschieben sich Aufgaben vom Nutzer zum System (werden automatisiert).
Kognitive Einschätzungen werden durch strukturierte Systemunterstützung ersetzt, Aufgaben entfallen oder werden zusammengelegt.
Weniger Denkaufwand und Unsicherheit
Weniger Koordinationsaufwand
Mehr Transparenz
Wiederkehr (erneute Bestellung) wird erleichtert
Informationsarchitektur & User Flow
Wie können die Nutzenden alle Informationen am besten finden und verstehen?
Angepasste Aufgabenstruktur als Grundlage für Informationsarchitektur, Navigationsstruktur und zentrale User Flows.
Die Informationsarchitektur wurde nach den zentralen Phasen im Bestellprozess strukturiert. Passend dazu wurde auch die Navigationsstruktur der Hauptebenen erstellt. Ziel: eine klare Trennung zwischen Produktsuche und -konfiguration, dem Warenkorb mit Checkoutprozess und der Verwaltung von Bestellungen und Favoriten.
Das beinhaltet z.B. die folgenden Punkte:
- Konfigurationsaufgaben (Anpassung einer Pizzavariante oder Konfiguration Wunschpizza):
Such- und Filtermöglichkeiten im Bereich “Menü”
- Aufgaben zum Abschließen der Bestellung:
Integration in mehrere Abfolgen einer Checkout-Struktur
- Aufgaben zur Organisation einer Gruppenbestellung und zum Nachvollziehen des Lieferstatus:
Zusammenfassung in Bereich “Meine Bestellungen”
Interaktionsdesign: Wireflows
Der Bestellablauf wurde in eine logische Abfolge von Interaktionsschritten aufgeteilt und mittels eines Wireflows visualisiert.
Die hier gezeigten Wireframes zeigen die Interaktionslogik bzw. den Interaktionsablauf für einige der Hauptaufgaben in den Bestellprozessphasen, mit Fokus auf kritische Momente bei z.B.:
- Pizza-Konfiguration (Such- und Filteroptionen für individuellere Anpassungen)
- Gruppenbestellung (Vereinfachung der Koordinierung und Bezahlung)
- Tracking der Bestellung und Lieferung (Reduktion von Unsicherheit)
Prototyping und Iteration
Ein interaktiver Low-Fidelity-Prototyp wurde erstellt um das Design, die Inhalte und den Interaktionsablauf erlebbar zu machem.
Dieser wurde früh anhand typischer Aufgaben mit Nutzenden erprobt:
- Wunschpizza konfigurieren
- Kompletten Bestellprozess durchführen
- Gruppenbestellung durchführen
Ziel war es zu verstehen, ob die Interaktionsschritte, die ausführbaren Funktionen und die Navigationsstruktur intuitiv verständlich sind und die Ziele erfüllt werden.
Mit den durch die Erprobung gefundenen Usability-Problemen als Basis wurden die Wireframes angepasst:
UI Design
High-Fidelity Wireframes
Im nächsten Schritt wurden die Wireframes detaillierter ausgestaltet.
Das beinhaltete die Auswahl und Kombination passender User Interface Elemente und deren Anordnung in den Screens. Dabei wurde auch berücksichtigt wie sich die Elemente zueinander verhalten und sich dadurch Inhalte verändern können.
Dafür wurden, aus Gründen der Zeitersparnis, der Bekanntheit bei Nutzenden und der vorhandenen Integration von Gestaltungsrichtlinien, User Interface Elemente und Farbpaletten des Google Material 3 Design UI Kits ausgewählt und teilweise angepasst.
Dadurch lag der Schwerpunkt des Projekts auf Interaktionslogik, Informationsstruktur und der konsistenten Umsetzung relevanter Zustände.
Ergebnis und Ausblick
Ergebnis
Konzeptioneller High-Fidelity-Prototyp eines mobilen Bestellprozesses, dessen Struktur und zentrale Funktionen aus untersuchten Nutzungssituationen und abgeleiteten Nutzungsanforderungen entwickelt wurden.
Was überprüft wurde
Das Low-Fidelity-Konzept (mit Wireframes ohne ausgearbeitetes UI-Design) wurde anhand typischer Aufgaben mit Nutzenden erprobt.
Was deutlich wurde
Dass diese Aspekte für die Gestaltung digitaler Bestellprozesse besonders relevant sind:
- Struktur schlägt Funktionsvielfalt
- Transparenz über z.B. Status, Inhaltsstoffe, Mindestbestellwert reduziert Unsicherheit
- Wiederkehrende Nutzung sollte unterstützt werden und kann den Bestellprozess deutlich effizienter machen
- Nutzungskontext beeinflusst Anforderungen der Einzel- oder Gruppenbestellung
Was offen bleibt
Die systematische Usability-Evaluierung des High-Fidelity-Prototyps mittels Usability-Tests, auch um herauszufinden ob die menschzentrierten Qualitätsziele des Projekts erreicht werden.
