Produkt-Design • UX/UI-Design • App • Figma • User Research • Wireframe • Mockup • Prototype • Storyboard • Usability Study • Interaction Design • Concept Design • Analyse • Strategie • Branding
Flower Shop App
– In-Depth UX-Design Case Study –
Google UX Design Professional Certification + Weiterentwicklung für Award-Einreichung

Nominiert für Red Dot Award: Design Concept
2023
Award Concept Overview & Video




In-Depth UX Design Case Study
1. Übersicht
2. Empathize & Define
3. Ideate & Design
4. Finalizing Design
5. Going Forward
Übersicht
Task
Gestalte eine Katalog-App für einen Trend-Floristen
Produkt
BelFlori ist ein lokaler Trend-Florist. Über ihre Katalog-App bieten sie trendige Blumensträuße und Abonnements, die von Locals selbst abgeholt, oder lokal geliefert werden können. Die BelFlori-App richtet sich an trend- und umweltbewusste lokale Blumenliebhaber und -schenker mit vollen Terminkalendern.
Problem
Vielbeschäftigten Blumenliebhabern und -schenkern fehlt die Zeit, sich um ihre floralen Besorgungen zu kümmern. BelFlori möchte den Umsatz steigern und mehr Stammkunden gewinnen.


Ziel
Erstelle eine klare, nutzerfreundliche und barrierefreie App, in der das Sortiment präsentiert wird und bestellt werden kann. Die App soll es den Kunden ermöglichen, Vorbestellungen für eine schnelle Selbstabholung und Bestellungen für eine lokale, umweltfreundliche Lieferung zu tätigen. Die Kunden sollen die Wahl zwischen Einzelkauf und Abo haben.
Meine Rolle
UX-Designer und -Researcher
Verantwortlichkeiten
-
Durchführung von Interviews
-
Papier- und digitales Wireframing
-
Low- und High-Fidelity-Prototyping
-
Durchführung von Usability-Studien
-
Berücksichtigung der Barrierefreiheit
-
Iteration von Entwürfen
Projektdauer
Nov '22 - Feb '23 (12 Wochen vertieftes Lernen)
Empathize & Define
„Wenn ich eine Stunde Zeit hätte, um den Planeten zu retten, würde ich 59 Minuten damit verbringen, das Problem zu definieren, und 1 Minute damit, es zu lösen.“
- Albert Einstein -

User Research: Pain Points

Personas

User Story: Leah
Als Ärztin mit anspruchsvollem Terminplan und unvorhersehbaren Schichten möchte ich meine Blumen vorbestellen und selbst abholen, so dass ich sie auf dem Heimweg abholen kann, wann immer ich bereit bin.
Als Ärztin mit Sehbehinderung möchte ich Apps verwenden, die für Screenreader optimiert sind, so dass ich diese leicht nutzen kann.


User Research: Zusammenfassung
Ich habe Interviews geführt und Empathie-Maps erstellt, um die Nutzer und ihre tatsächlichen Bedürfnisse zu verstehen. Eine Hauptnutzergruppe, die identifiziert wurde, sind berufstätige Erwachsene mit vollen Terminkalendern. Diese Gruppe bestätigte die ursprüngliche Annahme.
Die Recherche offenbarte auch andere Gründe, die potenzielle Kunden davon abhalten, Blumensträuße online zu kaufen. Hier wurden insbesondere relativ hohen Lieferkosten, hohes Abfallaufkommen durch Verpackung, komplizierte und veraltete Benutzeroberflächen und mangelnde Barrierefreiheit genannt.
Der Wunsch nach der Möglichkeit zur Selbstabholung und einem unkomplizierten Abo stand im Vordergrund.
Wettbewerbsanalyse
Ich habe mehrere potenzielle Konkurrenzunternehmen und deren Online-Bewertungen analysiert. Die meisten Funktionen der Mitbewerber waren sehr ähnlich, obwohl die Mehrheit die Vorteile einer App nicht nutzt.
Die größten CHANCEN für diese App auf dem aktuellen Markt sind:
-
Klare, einfache und intuitive Benutzeroberfläche
-
Barrierefreiheit
-
Lieferung mit umweltfreundlicher Verpackung
-
Selbstabholung
-
Persönlicher Service (wie beim Floristen)
-
Möglichkeit, durch den Kauf lokale Floristen zu unterstützen
Ideate & Design

Zielsetzung
Unsere Blumenkatalog-App wird es den Nutzern ermöglichen, Blumen für online für eine Lieferung zu oder eine flexible Selbstabholung zu bestellen, was Menschen mit unvorhersehbaren Arbeitszeiten zugute kommen wird, da die Blumen vorbereitet und reserviert werden können und sie sich nicht an eine bestimmte Abholzeit halten müssen.
Die Effektivität wird durch die Analyse der Anzahl der täglichen und wöchentlichen Einkäufe der jeweiligen Kaufoption gemessen.

User Journey Maps



Big-Picture & Close-Up Storyboards


Paper Wireframes
Ich nahm mir die Zeit, Iterationen für jeden App-Screen auf Papier zu entwerfen, um sicherzustellen, dass die Elemente, die es in die digitalen Wireframes schafften, gut geeignet waren, um die Probleme der Nutzer zu lösen.
Für den Bildschirm mit den Artikeldetails legte ich Wert auf einen schnellen und einfachen Bestellvorgang, damit die Nutzer Zeit sparen und die Möglichkeit haben, persönlichen Support in Anspruch zu nehmen.

Mit Sternen wurden die Elemente jeder Skizze markiert, die im ersten digitalen Wireframe verwendet werden sollten.
Informationsarchitektur / Sitemap
Basierend auf den Erkenntnissen über die Ziele der Benutzer und wie ein grundlegender User Flow von Anfang bis Ende aussieht, war ich in der Lage, die Art und Weise zu verstehen, wie die Benutzer mit der App interagieren werden, und erstellte die Sitemap auf der Grundlage dieser Erkenntnisse.

Low-Fidelity (lo-fi) Prototyp
Der Low-Fi-Prototyp (erstellt in Figma) verband den primären User Flow der Auswahl eines Blumenstraußes aus der Katalog-App und der Bestellung zur Selbstabholung beim lokalen Floristen, so dass der Prototyp in einer Usability-Studie mit Nutzern eingesetzt werden konnte.

Digital Wireframes
Im weiteren Verlauf der ersten Designphase habe ich darauf geachtet, dass die Screendesigns auf dem Feedback und den Erkenntnissen der Nutzeranalyse basieren.
Um die qualitativen, finanziellen und zeitlichen Bedürfnisse der Nutzer zu erfüllen, biete ich die Möglichkeit der Vorbestellung für eine flexible Selbstabholung und Lieferung durch den Floristen. Beide Optionen werden mit der Möglichkeit eines einmaligen Kaufs oder eines Abonnements kombiniert.

Zusätzlich zu den qualitativen, finanziellen und zeitlichen Bedürfnissen der Nutzer konzentrierte sich die Entwicklung auf die Bedürfnisse der Nutzer nach persönlichem Service und Barrierefreiheit.

Usability Study

Finalizing Design

Mockups
Die ersten Entwürfe hatten eine recht einheitliche Hierarchie. Nach der Usability-Studie habe ich die Hierarchie der Elemente klar definiert, um die Aufmerksamkeit der Nutzer gezielt zu lenken.
Außerdem habe ich zusätzliche Icons hinzugefügt, um die Barrierefreiheit zu verbessern.

Die zweite Usability-Studie ergab, dass es Verwirrung im Bestellvorgang gab. Die fixierten Schaltflächen am unteren Rand des Bildschirms führten dazu, dass scrollbare Inhalte übersehen wurden und die Beschriftung des Buttons im Warenkorb leitete den Bestellvorgang nicht eindeutig ein.
Daher habe ich die Beschriftung des Buttons klar definiert und zum scrollbaren Inhalt hinzugefügt.


Teste den Hi-Fi-Prototyp in Figma:
Style Guide / Figma Sticker Sheet

Accessibility Considerations
Barrierefreies Design bedeutet sicherzustellen, dass alle Nutzer alles haben was sie brauchen, um sich auf ihrer User Journey wohl zu fühlen. Ein UX-Designer lässt niemanden zurück, bezieht also jeden ein, der eine dauerhafte, vorübergehende oder situationsbedingte Beeinträchtigung hat. (z. B. nur ein Arm ODER ein verstauchtes Handgelenk ODER ein schreiendes Neugeborenes auf einem Arm).


Going Forward

Teste den Lo-Fi-Prototyp in Figma:
Nächste Schritte


Ich hoffe das Analysieren dieser Case Study hat Ihnen so viel Spaß gemacht, wie ich mit der Durchführung dieses Projektes hatte!
Die bewährten Designprozesse haben sich seit meinen Studien-Zeiten zwar grundsätzlich nicht verändert, dennoch habe ich viel Neues gelernt.
Wenn Sie Fragen haben, oder Ihr eigenes Projekt besprechen möchten, nutzen Sie gerne die Kontaktmöglichkeiten auf dieser Website.
An dieser Stelle auch nochmal ein dickes DANKE an Coursera für das Stipendium für diesen Kurs und die Möglichkeit, diese Weiterbildung kostenfrei durchzuführen.
Gleichzeitig auch ein großes DANKESCHÖN an Google für die Bereitstellung dieser intensiven und ausführlichen UX-Design-Weiterbildungsmöglichkeit. (Teil 1 von 3)

Impact
Das Navigieren und Browsen durch die App bereitet den Nutzern viel Vergnügen und das Konzept ist selbst für männliche Testnutzer, die normalerweise nicht regelmäßig Blumen kaufen, von großem Interesse.
Zitate von Teilnehmern der Usability-Studie:
„Das ist großartig! Endlich ein trendiger und moderner Blumenshop. Wann kommt die App raus? Ich will ein Abo!“
„Die App ist echt einfach zu bedienen und sieht mega geil aus.“
Was ich gelernt habe
Bei der Entwicklung der App habe ich gelernt, dass die ersten Ideen für die App nur der Anfang des Prozesses sind. Usability-Studien und Peer-Feedback beeinflussten jede Iteration des App-Designs.
Die Arbeit, die in die Verbesserung der Barrierefreiheit für Menschen mit Behinderungen gesteckt wurde, verbesserte die Nutzerfreundlichkeit und das Nutzererlebnis für alle Nutzer erheblich.
High-Fidelity (hi-fi) Prototype
Der finale High-Fidelity-Prototyp (Hi-Fi) präsentierte klare User Flows für die Bestellung von Blumensträußen, Abonnements und den Checkout-Prozess.
