Mobile App Design für eine schnellere Coffee-Ordering-Erfahrung
UI UX Designer
Min Bui
Inhaltsverzeichnis:
Projektübersicht
Project: UX/UI Case Study · Mobile App Design · Product Design · iOS & Android
Von der ersten Produktidee zu einer mobilen Bestell- und Loyalty-Erfahrung für den täglichen Kaffeekauf.
Leistungen: Research, UX-Strategie, UX/UI-Design, Mobile-App-Architektur, Produkt-Flow
Joe Coffee sollte nicht einfach eine weitere Coffee-App werden. Die zentrale Aufgabe war, eine digitale Erfahrung zu entwickeln, die sich im Alltag selbstverständlich anfühlt: Café auswählen, Getränk finden, Bestellung anpassen, bezahlen und später mit möglichst wenig Aufwand erneut bestellen.
UXphoria entwickelte dafür die mobile Produkterfahrung von Grund auf, von Research und User Flows über Informationsarchitektur und Wireframes bis zu UI Design und Prototyping.
Projektfokus
Mobile App UX/UI, Ordering Flow, Loyalty, Café-Auswahl, Produktindividualisierung, Informationsarchitektur und Interface Design.
Die im ursprünglichen Projektmaterial genannten Leistungs- und Ergebnisdaten sollten vor einer öffentlichen Veröffentlichung noch mit den jeweiligen Primärquellen abgeglichen werden.
Die Herausforderung: Eine App musste verständlich sein, bevor sie schnell sein konnte
Joe Coffee startete mit einer Produktidee, aber noch nicht mit einem ausgearbeiteten digitalen Produkt.
Es gab keine fertigen App-Flows, keine definierte Informationsarchitektur und kein bestehendes mobiles Interface-System. Gleichzeitig musste die App mehrere Aufgaben miteinander verbinden:
lokale Cafés entdecken
ein Café auswählen
Getränke und Speisen finden
Produkte individuell konfigurieren
Bestellung und Bezahlung durchführen
Bestellungen wiederholen
Loyalty-Vorteile verstehen
vergangene Bestellungen und Favoriten verwalten
Die Herausforderung lag deshalb nicht nur im visuellen Design.
Die gesamte Nutzung musste so strukturiert werden, dass Nutzer bereits beim ersten Öffnen verstehen, was sie tun können und warum sie es tun sollten.
Besonders wichtig war dabei der Nutzungskontext.
Ein Kaffee wird häufig nicht in einer ruhigen Situation bestellt. Die Nutzer können unterwegs sein, wenig Zeit haben oder dieselbe Bestellung regelmäßig wiederholen wollen. Genau deshalb durfte die App nicht wie ein umfangreicher Produktkatalog funktionieren.
Die zentrale Produktidee wurde entsprechend auf einen einfachen Kern reduziert:
Café finden → Produkt auswählen → anpassen → bezahlen → Bestellung verfolgen.
Research: Nicht nur Personas, sondern reale Nutzungssituationen
Bevor Screens gestaltet wurden, analysierte UXphoria die Marke, ihre Positionierung und ihre bestehende Kommunikation.
Parallel wurde betrachtet, wie unterschiedliche Nutzergruppen Kaffee-Apps tatsächlich verwenden.
Im Projektmaterial werden drei zentrale Nutzerarchetypen beschrieben:
Der zeitbewusste Berufstätige
Eine Bestellung muss schnell funktionieren. Relevant sind zuverlässige Cafés, wiederkehrende Bestellungen und ein möglichst kurzer Weg vom Öffnen der App bis zur fertigen Bestellung.
Der Student
Preis, Verfügbarkeit und ein einfacher Zugang zu Cafés spielen eine größere Rolle. Die App muss Informationen schnell zugänglich machen, ohne den Nutzer mit unnötigen Funktionen zu belasten.
Die Kaffee-Enthusiastin
Hier steht stärker die Entdeckung im Vordergrund. Neue Cafés, unterschiedliche Getränke und individuelle Anpassungen werden wichtiger.
Diese Archetypen zeigen, dass „schnell bestellen“ nicht für jeden Nutzer exakt dasselbe bedeutet.
Der eine möchte wiederholen.
Der andere möchte entdecken.
Der dritte möchte individualisieren.
Die UX musste deshalb unterschiedliche Bedürfnisse unterstützen, ohne drei voneinander getrennte Apps daraus zu machen.Brand Analysis
The UXphoria team conducted an in-depth analysis of Joe Coffee's brand identity, mission, and values. This included reviewing their brand guidelines, website, and social media presence. We aimed to understand the essence of their brand and how it resonated with their target audience – an important foundation for creating a consistent digital experience.
Von Research zu einer klaren User Journey
Aus der Analyse entstand ein zentraler mobiler Nutzungspfad:
01 · Café finden
Welche Cafés sind in meiner Nähe und welches möchte ich auswählen?
02 · Produkt verstehen
Welche Getränke und Speisen gibt es?
03 · Bestellung anpassen
Welche Größe, Milch, Extras oder individuellen Optionen brauche ich?
04 · Bestellung abschließen
Was kostet sie und wie kann ich bezahlen?
05 · Bestellung verfolgen
Wo befindet sich meine Bestellung und wann kann ich sie abholen?
06 · Wiederbestellen
Wie kann ich eine bekannte Bestellung beim nächsten Mal schneller ausführen?
Diese letzte Ebene war besonders wichtig.
Eine Coffee-App wird nicht nur einmal verwendet. Wenn sie Teil einer täglichen Routine werden soll, muss die zweite und dritte Bestellung einfacher werden als die erste.
Deshalb wurden unter anderem Recent Orders, Favorites und Loyalty als wichtige Elemente der mobilen Produkterfahrung berücksichtigt.
Die Informationsarchitektur: Weniger Entscheidungen, bessere Prioritäten
Eine frühe Analyse zeigte mehrere typische Reibungspunkte:
Produkte waren teilweise schwer auffindbar.
Navigation und Button-Positionen waren nicht immer konsistent.
Bestellstatus waren nicht ausreichend sichtbar.
Loyalty-Informationen konnten überladen wirken.
Individualisierung konnte unnötig komplex werden.
Fehlermeldungen erklärten nicht immer den nächsten sinnvollen Schritt.
Einige wichtige Funktionen waren zu tief verborgen.
Das Problem war also nicht einfach „zu viele Screens“.
Das eigentliche Problem war Priorisierung.
Eine mobile App kann sehr viele Funktionen besitzen und trotzdem einfach wirken, wenn Nutzer jederzeit wissen:
Wo bin ich?
Was kann ich hier tun?
Was ist der nächste Schritt?
Die Informationsarchitektur wurde deshalb nicht nur nach Funktionsumfang, sondern nach Nutzungssituation organisiert.
Home Screen: Das Wichtigste zuerst
Die Startseite wurde nicht als Übersicht über sämtliche Funktionen verstanden.
Stattdessen sollte sie die Aktionen hervorheben, die für eine wiederkehrende Coffee-Routine am relevantesten sind:
Cafés in der Nähe
letzte Bestellungen
Favoriten
beliebte Produkte
Loyalty-Status
Damit bekommt der Nutzer nach dem Öffnen nicht erst eine Navigation erklärt.
Er bekommt direkt einen möglichen nächsten Schritt.
Das ist ein entscheidender Unterschied zwischen einer App, die Funktionen präsentiert, und einer App, die eine Aufgabe unterstützt.
Ordering UX: Geschwindigkeit ohne Informationsverlust
Der Bestellprozess musste zwei scheinbar gegensätzliche Anforderungen erfüllen:
schnell sein und gleichzeitig genug Kontrolle bieten.
Ein Kaffee kann schließlich individuell bestellt werden. Größe, Milch, Extras und weitere Optionen dürfen nicht einfach verschwinden, nur damit weniger Screens entstehen.
Die Lösung lag deshalb nicht darin, Individualisierung komplett zu reduzieren.
Stattdessen wurde sie strukturiert.
Informationen sollten dort erscheinen, wo sie für die aktuelle Entscheidung relevant sind. Touch-Ziele wurden für die mobile Nutzung berücksichtigt und die visuelle Hierarchie so aufgebaut, dass wichtige Aktionen schnell erkannt werden können.
Loyalty wurde Teil der Produkterfahrung
Loyalty sollte nicht wie ein nachträglich hinzugefügtes Bonusprogramm wirken.
Die Nutzer mussten verstehen:
welchen Status sie haben
welche Vorteile verfügbar sind
wie Punkte oder Rewards funktionieren
was sie als Nächstes tun können
Im Projekt zeigte sich dabei ein konkretes Bedürfnis:
Der Loyalty-Fortschritt musste visueller und schneller erfassbar werden.
Dadurch wurde Loyalty nicht nur zu einer Informationsseite, sondern zu einem Bestandteil der täglichen Motivation, wiederzukommen.
UI Design: Premium, aber nicht kompliziert
Die visuelle Richtung sollte zwei Dinge gleichzeitig leisten.
Die App musste zur Coffee-Marke passen und hochwertig wirken.
Gleichzeitig durfte die Gestaltung niemals den Bestellprozess verlangsamen.
Deshalb wurden unter anderem:
gut lesbare mobile Typografie
klare Abstände
intuitive Iconografie
thumb-freundliche Interaktionen
eine warme Coffee-inspirierte Farbwelt
konsistente UI-Patterns
miteinander verbunden.
Das Ziel war kein spektakuläres Interface um seiner selbst willen.
Die Oberfläche sollte sich vertraut genug anfühlen, damit Nutzer die Bedienung nicht erst lernen müssen.
Wireframes vor visueller Verfeinerung
Bevor das finale UI-System ausgearbeitet wurde, wurden die zentralen Flows zunächst strukturell betrachtet.
Das ermöglichte es, Fragen unabhängig von Farben, Bildern und visueller Ästhetik zu beantworten:
Ist die nächste Aktion eindeutig?
Ist die Navigation nachvollziehbar?
Sind wichtige Informationen früh genug sichtbar?
Kann eine Bestellung verändert werden?
Ist der aktuelle Status verständlich?
Gibt es unnötige Schritte?
Was passiert bei Fehlern oder fehlenden Zuständen?
Diese Trennung zwischen Interaktionsarchitektur und visueller Gestaltung ist besonders bei komplexeren digitalen Produkten entscheidend.
Ein schöner Screen kann einen schlechten Flow nicht reparieren.
Testing: Die ersten Screens waren nicht das Endprodukt
Nach den ersten Prototypen wurde die Nutzung erneut überprüft.
Dabei kristallisierten sich mehrere konkrete Verbesserungen heraus:
01 · Schnellere Wiederbestellung
Nutzer wollten eine bekannte Bestellung schneller erneut ausführen können.
02 · Verständlicherer Loyalty-Status
Der Fortschritt sollte unmittelbarer erkennbar sein.
03 · Sichtbarere Kategorien
Produkte und Kategorien mussten schneller gefunden werden.
04 · Weniger Taps
Einige Abläufe konnten weiter verkürzt werden.
Diese Erkenntnisse wurden anschließend in die nächste Designrunde übertragen.
Das Entscheidende daran:
Testing wurde nicht als abschließende Prüfung behandelt.
Es wurde genutzt, um die Produktarchitektur weiterzuentwickeln.
Das Ergebnis: Ein vollständiges mobiles Produktsystem
Aus der ursprünglichen Produktidee entstand eine umfassende mobile Produkterfahrung für die zentralen Coffee-Ordering-Situationen.
Dazu gehören unter anderem:
Discovery
Cafés in der Umgebung entdecken und auswählen.
Ordering
Produkte finden, konfigurieren und bestellen.
Favorites
Häufig verwendete Produkte schneller wiederfinden.
Recent Orders
Bekannte Bestellungen ohne erneute Suche wiederholen.
Loyalty
Rewards und Fortschritt verständlich darstellen.
Wallet & Cart
Zahlung und aktuelle Bestellung übersichtlich verwalten.
Pickup
Bestellstatus und Abholung nachvollziehbar machen.
Die Arbeit verband damit nicht nur einzelne Screens, sondern eine zusammenhängende Produktlogik.
Ergebnisse
Diese Zahlen stammen aus dem vorhandenen Projektmaterial und sollten vor der Veröffentlichung mit den jeweiligen Analytics-, Store- oder Produktdaten verifiziert werden. Insbesondere müssen bei Prozentwerten Zeitraum, Baseline und Messdefinition dokumentiert sein.
Für die Case Study ist das wichtig, weil „40 % schneller“ beispielsweise genau definiert werden sollte: gemessene Zeit, Anzahl der Schritte, Task Completion oder eine andere Metrik.
Die Zahl allein ist weniger überzeugend als die Erklärung, was tatsächlich gemessen wurde.
Was wir aus dem Projekt gelernt haben
01. Geschwindigkeit beginnt mit Informationsarchitektur
Ein schneller Checkout entsteht nicht erst durch einen kleineren Button oder eine bessere Animation.
Wenn Nutzer nicht wissen, welches Café, welches Produkt oder welche Option sie auswählen sollen, hilft auch ein technisch schneller Prozess wenig.
02. Wiederkehrende Nutzung braucht eine andere UX als einmalige Nutzung
Bei einer Coffee-App ist die erste Bestellung nur ein Teil der Experience.
Favorites, Recent Orders und Loyalty werden wichtig, weil die eigentliche Produktqualität langfristig daran gemessen wird, wie leicht sich eine vertraute Aufgabe wiederholen lässt.
03. Individualisierung muss kontrolliert werden
Ein guter Bestellprozess entfernt nicht jede Auswahl.
Er macht die richtige Auswahl zum richtigen Zeitpunkt sichtbar.
04. UI sollte Verhalten unterstützen
Typografie, Abstände, Icons, Farben und Komponenten sind keine rein visuellen Entscheidungen.
Sie bestimmen mit, wie schnell Nutzer Informationen erkennen, welche Aktion sie als Nächstes wählen und wie sicher sich die Interaktion anfühlt.
05. Ein digitales Produkt ist mehr als seine Screens
Die wichtigste Erkenntnis aus Joe Coffee ist deshalb nicht ein bestimmter Screen.
Es ist die Verbindung zwischen:
Produktidee → Nutzerbedürfnis → User Flow → Informationsarchitektur → Interface → Testing → Iteration.
Genau dort entsteht aus UI Design tatsächlich Product UX.
Von der Idee zum digitalen Produkt
Joe Coffee zeigt, was passiert, wenn Mobile App Design nicht bei der Oberfläche beginnt.
Die Aufgabe bestand zunächst darin, eine Produktidee zu strukturieren: unterschiedliche Nutzer, lokale Cafés, Bestellungen, Individualisierung, Loyalty und wiederkehrende Nutzung mussten in ein verständliches System übersetzt werden.
Erst daraus konnten die konkreten Screens entstehen.
Das Ergebnis ist deshalb nicht nur eine Sammlung von App-Interfaces.
Es ist eine mobile Produkterfahrung, die auf einen sehr einfachen Alltag reduziert wurde:
Kaffee finden.
Bestellen.
Abholen.
Wiederkommen.
UXphoria für App-, UI/UX- und Web-App Design
UXphoria verbindet UX-Strategie, Informationsarchitektur und UI Design, um digitale Produkte verständlicher und konsistenter zu machen.
Der Ansatz eignet sich besonders für:
Mobile Apps
Web Apps
SaaS-Produkte
Dashboards
komplexe digitale Workflows
Designsysteme
digitale Produkte mit vielen Nutzerrollen und Zuständen
Dabei beginnt die Arbeit nicht zwangsläufig mit dem visuellen Interface. Die UXphoria-Architektur definiert Produktauftrag, Nutzerrollen, Aufgabenfolgen, Informationsmodell, Interface-Prioritäten, Zustände und Systembausteine, bevor diese in ein skalierbares UI übersetzt werden.
