top of page
Logo styleistheanswer.ME  I  Design by Miriam Elting

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

Hero Image, Flower Shop App, UX Design
Nominiert für Red Dot Award: Design Concept

2023

Award Concept Overview & Video

styleME_Hintergrund_Web.jpg
BelFlori App Concept-Übersicht für Red Dot Design Award – Seite 2
BelFlori App Concept-Übersicht für Red Dot Design Award – Seite 2

In-Depth UX Design Case Study

Ü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.
Mockup: App Home Screen
Mockup: App Item Details Screen
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 -

Understanding the user: User research, Personas, Problem statements, User journey maps
User Research: Pain Points 
1. Time: Working adults are too busy to spend much time with organizing flower bouquets.; 2. Waste: Working adults are too busy to spend much time with organizing flower bouquets.; 3. Financial: Delivery costs are disproportionately high.; 4. User Interface: The UI of florist apps and websites isn't well thought out and intuitive.; 5. Accessibility: Online florist platforms are not equipped with assistive technologies.
Personas
Persona: Leah; Age: 42, Education: Doctor of Medicine (MD), Hometown: Newport - Rhode Island, Family: Single, lives alone, Occupation: Doctor, Tech-savvy: Yes; Problem statement: Leah is a doctor with a busy and unpredictable schedule and visual impairment who needs a flexible flower self-pickup service and apps and websites to be simply designed and optimized for screen readers because she can't predict her shifts and often takes last-minute appointments and it difficult for her to use apps and websites without a screen reader.; Goals: Cares a lot about always being available for her patients. Finding easier and more efficient ways to get everyday things, like getting fresh flowers, done. Spending as much time as possible outside of work on her hobbies and personal life.; Frustrations: "Not all apps and websites are optimized for screen readers, and there's often no phone support either." "My schedule is unpredictable. That's why in my personal life, I often can't guarantee to meet ap
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.

Persona: Neelam; Age: 35, Education: Master’s degree, Education, Hometown: Champaign, Illinois, Family: Married, 1 young child, Occupation: Teacher, Tech-savvy: No; Problem Statement: Neelam is an established educator and is also raising a young child who needs a bouquet subscription service to deliver flowers to her home and leave them in the garage because she does not have time to take care of it herself on a weekly basis.; Goals: Needs a service that allows her to always have fresh flowers at home without having to take care of it herself. Wants to work as a teacher even though she has a young child, because her profession is her passion. Balance work and family and have a beautiful home with fresh flowers.; Frustration: "Sometimes I have trouble managing the stress of teaching and raising a young child at the same time." "I have limited time to grade papers and plan sylabi." "The delivery costs are out of proportion if I only order one or two bouquets." "I love fresh flowers, but
07_Eden-Persona3.jpg
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

Starting the design: Paper wireframes, digital wireframes, low-fidelity prototypes, usability studies
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 Flow, Persona: Leah; User task: Use the Eden app to order a bouquet of flowers for self-pickup at the local florist.
User Journey Maps
User Journey Map, Persona: Leah; Mapping Leah's user journey revealed how helpful it is for users to have the app screen reader optimized.  It is also very helpful for Leah AND the florist to have an option for individual notes. During the order process and also when notified when the order is ready for pick up.
User Journey Map, Persona: Neelam; Mapping Neelam's user journey revealed how helpful a subscription service can be for users. The delivery must certainly, even if she is not at home, be stored in a way that does not affect the quality.  This also shows that add-ons to the order, such as a vase, are useful.
10_Eden-UserJourneyMap3.jpg
Big-Picture & Close-Up Storyboards
Big-Picture Storyboard - Scenario: An app for self pick-up orders at the local florist, optimized for screen readers. Panel 1: Leah is working an unpredictable schedule and has a visual impairment. Panel 2: Leah finds the Eden app and opens it. Panel 3: She scrolls through the bouquets and selects her favorite one. Panel 4: Leah places her order with help of a screen reader and keeps on working. She receives a notification on her phone when her bouquet is ready with a link to a map. Panel 5: She picks up her order. Her way to the shop she found with the linked map through voice guidance on her headphones. The florist simply scans the QR code to match her quickly with her ordered bouquet. Panel 6: Leah is happy. Her flowers look and smell amazing and will make her appartment even more beautiful.
Close-Up Storyboard - Scenario: An app for self pick-up orders at the local florist, optimized for screen readers. Panel 1: Leah finds the Eden app and opens it. Panel 2:  She logs in, or creates an account, Panel 3: or directly starts browsing the bouquet options. She selects her favorite. Panel 4: Leah reviews her order with help of a screen reader and adds a note for the florist. Panel 5: She places her order through her account or as a guest. Panel 6: Leah receives a success message and that she will be notified as soon as her bouquet is ready. She can then pick it up whenever she is ready.
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.

Picture of paper wireframes

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.

Visualisierung der Sitemap/Informationsarchitekture für die App
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.

Low-fidelity (lo-fi) Figma screenshot
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.

Digital wireframes, item details page: Simply choose between self-pickup and florist delivery, as well as one-time purchase and subscription.; Extensive visual representation of the selected bouquet to give the user the best possible idea of the physical product.; Possibility to save personal favorites. These can then be compared in the favorites list to make the best possible purchase decision, or just saved for future purchase.

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.

Digital wireframes; Pickup details page: The entire app is designed simple and clear, and is equipped with assistive technology, optimized for screen readers, and gives the user haptic feedback.; The user has easy access to verbal and written personal support on all pages.
Usability Study
Usability study: Findings; I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.; Round 1 findings: 1. User need to be able to select pickup location/delivery address on the home page, in the beginning of the user flow.; 2. Users want diverse payment options.; 3. Users want filter and view/layout options fot the item overview to make their purchase decision easier.; 4. Users want the option to leave a personal note during the ordering process.; Round 2 findings: 1. Users miss content that scrolls because of the navigation buttons that are fixed at the bottom of the screen.; 2. The hierarchy of images in the shopping bag is confusing to users.; 3. Users are confused about whether the "Pickup/Delivery Details" button in the shopping bag leads to the ordering process.

Finalizing Design

Refining the design: Mockups, Hi-fidelity prototype, Accessibility
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.

Mockup, item details page, before and after usability study

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.

Mockup, shopping bag/cart, before and after usability study
26_Mockups3.jpg
Teste den Hi-Fi-Prototyp in Figma:
Style Guide  /  Figma Sticker Sheet
Picture: Style Guide Overview
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).

30_Accessibility.jpg
Hero Image, Flower Shop App, UX Design

Going Forward

Going forward: Takeaways, Next steps, Unleashing the visionary
Teste den Lo-Fi-Prototyp in Figma:
Nächste Schritte
Next steps: 1. Conduct another round of usability studies to validate wheter the pain points users experience have been effectively addressed.; 2. Provide feedback on every user action, such as button animation and haptic feedback.; 3. Involve a UX texter to optimize the usability of written text.; 4. Conduct more user research to determine any new areas of need.
styleME_Hintergrund_Web.jpg

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)
Herz Icon (solid)
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.

High-fidelity (hi-fi) Figma screenshot
bottom of page