top of page

Design • Brand • Creative

Logo styleistheanswer.ME I Design by Miriam Elting

Product Design • UX/UI Design • App Design • Figma • User Research • Wireframing • Mockup • Prototyping • Storyboarding • Usability Studies • Interaction Design • Concept Design • Analysis • Strategy • 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
Nominated for Red Dot Award: Design Concept

2023

Award Concept Overview & Video

styleME_Hintergrund_Web.jpg
BelFlori App Concept Overview for Red Dot Design Award – page 2
BelFlori App Concept Overview for Red Dot Design Award – page 2

In-Depth UX Design Case Study

1. Overview
2. Empathize & Define
3. Ideate & Design
4. Finalizing Design
5. Going Forward

Overview

Task
Design a catalogue app for a trend florist
Product
BelFlori is a local trend-focused florist. Through their catalogue app, they offer stylish bouquets and subscription services that can either be collected by locals or delivered within the area. The BelFlori app is designed for trend- and eco-conscious flower lovers and gift-givers with busy schedules.
Problem
Time-pressed flower enthusiasts and gift-givers often struggle to manage their floral purchases. BelFlori’s goal is to boost sales and build a stronger base of returning customers.
Mockup: App Home Screen
Mockup: App Item Details Screen
Goal
Create a clear, user-friendly and accessible app that showcases the product range and allows customers to place orders. The app should enable users to pre-order for quick self-collection or order for local, eco-friendly delivery. Customers should be able to choose between one-time purchases and subscription options.
My Role
UX Designer and Researcher
Responsibilities
  • Conducting interviews
  • Paper and digital wireframing
  • Low- and high-fidelity prototyping
  • Conducting usability studies
  • Considering accessibility
  • Iterating on designs
Project duration
Nov '22 - Feb '23 (12 weeks in-depth learning)

Empathize & Define

„If I had an hour to save the planet, I would spend 59 minutes defining the problem and one minute solving it.“ 
- Albert Einstein -

Understanding the user: User research, Personas, Problem statements, User journey maps
User Research: Pain Points 
1. Time: Working adults often have limited time to organise or purchase flower bouquets. 2. Waste: Customers are concerned about the amount of packaging waste created by online flower deliveries. 3. Financial: Delivery costs are disproportionately high compared to the value of the product. 4. User Interface: Many florist apps and websites lack intuitive, user-centred design. 5. Accessibility: Online florist platforms are not optimised for assistive technologies, limiting accessibility.
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

As a doctor with a demanding schedule and unpredictable shifts, I want to pre-order my flowers and pick them up myself, so that I can collect them on my way home whenever I’m ready. 

​

As a doctor with a visual impairment, I want to use apps that are optimised for screen readers, so that I can use them easily.

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: Summary 
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.
Competitive Analysis

I analysed several potential competitors and their online reviews. Most of the competitors’ features were very similar, although the majority do not take full advantage of the benefits an app can offer.

The biggest OPPORTUNITIES for this app in the current market are:

  • Clear, simple, and intuitive user interface

  • Accessibility

  • Delivery with eco-friendly packaging

  • Self-pickup

  • Personalised service (as with a florist)

  • Opportunity to support local florists through purchases

Starting the design: Paper wireframes, digital wireframes, low-fidelity prototypes, usability studies
Objective
Our flower catalogue app will allow users to order flowers online for either delivery or flexible self-collection. This benefits people with unpredictable work schedules, as bouquets can be prepared and reserved in advance without requiring a fixed collection time.
​

The app’s effectiveness will be measured by analysing the number of daily and weekly purchases for each ordering option.

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 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

I took the time to sketch iterations for each app screen on paper to ensure that the elements carried forward into the digital wireframes were well-suited to solving the users’ problems.

​

For the item details screen, I focused on creating a quick and simple ordering process that allows users to save time while also having the option to access personal support.

Picture of paper wireframes

I marked the elements from each sketch that were intended for the first digital wireframe with asterisks.

Information Architectur / Sitemap

Based on the insights into user goals and an understanding of a basic user flow from start to finish, I was able to anticipate how users would interact with the app and created the sitemap accordingly.

Visualisation of the app’s sitemap and information architecture
Low-Fidelity (lo-fi) Prototyp

The low-fi prototype (created in Figma) combined the primary user flow of selecting a bouquet from the catalogue app and placing an order for local pick-up, allowing the prototype to be used in a usability study with users.

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

The initial drafts had a fairly uniform hierarchy. After the usability study, I clearly defined the hierarchy of elements to guide users’ attention more effectively.

​

Additionally, I added extra icons to improve accessibility.

Mockup, item details page, before and after usability study

The second usability study uncovered confusion within the ordering process. Fixed buttons at the bottom of the screen led users to miss scrollable content, while the button label in the shopping basket failed to clearly indicate the start of the checkout process.

​

To resolve this, I clarified the button label and integrated it into the scrollable area.

Mockup, shopping bag/cart, before and after usability study
26_Mockups3.jpg
Test the Hi-Fi-Prototyp in Figma:
Style Guide  /  Figma Sticker Sheet
Picture: Style Guide Overview
Accessibility Considerations

Accessible design is about making sure that all users have what they need to feel supported and confident throughout their journey.

​

A UX designer leaves no one behind — taking into account people with permanent, temporary, or situational impairments, such as having only one arm, a sprained wrist, or a newborn in one arm.

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

Going Forward

Going forward: Takeaways, Next steps, Unleashing the visionary
Test the Lo-Fi-Prototyp in Figma:
Next Steps
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

I hope reviewing this case study was as enjoyable for you as developing this project was for me.

While the proven design processes have fundamentally remained the same since my university days, I’ve still learned a great deal along the way.
​
If you have any questions or would like to discuss your own project, feel free to get in touch using the contact options provided on this website.
A heartfelt thank-you to Coursera for granting me the scholarship that allowed me to complete this course free of charge.
 
Same to Google for offering such an extensive and insightful UX Design training program. (Part 1 of 3)
​
​
Heart Icon (solid)
Impact

Navigating and browsing the app is very enjoyable for users, and the concept is highly engaging even for male test users who don’t typically buy flowers regularly.

​

Quotes from participants in the usability study:

​

'This is amazing! Finally, a trendy and modern flower shop. When is the app coming out? I want a subscription!'

​

'The app is really easy to use and looks awesome.'

What I have learned

Developing the app taught me that initial ideas are just the starting point. Each iteration of the design was shaped by usability studies and peer feedback.

​

The work dedicated to enhancing accessibility for users with disabilities ultimately improved usability and the overall experience for everyone.

High-Fidelity (hi-fi) Prototype

The final high-fidelity (Hi-Fi) prototype presented clear user flows for ordering bouquets, subscriptions, and the checkout process.

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