Flower Shop App UX Design

Hero Image, Flower Shop App, UX Design
Innovative Design Concept
Next Level
Started as a study project, I further developed  the concept of the initial task of this study project further, so that it not only benefits a single store, but is THE one app for all florists and flower lovers. This concept had been nominated for the 
Red Dot Award: Design Concept.
Concept Video:
But here we go with the in-depth UX design case study of the initial study project:
1. Project Overview
2. Empathize & Define
3. Ideate & Design
4. Finalizing Design
5. Going Forward
1. Project Overview
Task: 
Design a flower catalogue app for a trendy florist

Product: 
BelFlori is a local trend florist. Through their flower catalog app, they offer on-trend bouquets and flower subscriptions for locals to pick up themselves as well as local, trash-free delivery. BelFlori app targets environmentally and trend conscious local flower lovers and givers with busy schedules.

Problem: 
Busy flower lovers and givers lack the time to take care of their flower errands. BelFlori wants to increase sales and build more regular customers.

Goal: 
Create a simple, clear, user-friendly, and accessible app that showcases the floral offerings. The app is meant to allow customers to pre-order for quick self-pickup and order for local, zero-waste delivery. Customers shall have the option of a one-time purchase and subscription for both types.
Mockup: Home Screen
My role:
UX designer & researcher

Responsibilities:
- Conducting interviews
- Paper and digital wireframing
- Low and high-fidelity prototyping
- Conducting usability studies
- Accounting for accessibility
- Iterating on designs

Duration: 
Nov ‘22 - Feb ’23 (12 weeks, in depth learning)
Mockup: Item Details Screen
2. Empathize & Define
“If I were given one hour to save the planet, I would spend 59 minutes defining the problem, and 1 minute resolving it.” 
- Albert Einstein -
Understanding the user: User research, Personas, Problem statements, User journey maps
User Research: Summary 
I conducted interviews and created empathy maps to understand the users and their actual needs. A primary user group identified through research is working adults with busy schedules. This group confirmed initial assumptions.
The research also revealed other reasons that prevent potential customers from buying flower bouquets online.In particular, relatively high delivery costs, high waste generation due to packaging, unclear and non-intuitive user interfaces and lack of accessibility were mentioned here.
The desire for the possibility of self-pickup and an uncomplicated subscription stood out.
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.
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 appointment." "Sometimes the florist is busy with other customers, so I waste my precious time waiting."; Personal quote: ""For my patients, I give my all. I need services that are as flexible as l am."
User Story: Leah
As a doctor with a demanding schedule and unpredictable shifts
I want to pre-order and self pick-up my flowers
so that I am able to get them on the way home, whenever I am ready.
As a doctor with visual impairment 
I want to use apps that are optimized for screen readers
so that I can use them easily.
Persona: Elliot; Age:44; Education: Culinary school graduate, Hometown: Omaha, Nebraska, Family: Lives with partner, Occupation: Cook, Tech-savvy: Yes, very much; Problem statement: Elliot is a busy line cook and remote upskiller that enjoys expressing his love for his partner through flowers who needs to save the money on flower delivery and time during pickup because his online course is expensive and he is always short in time.; Goals: Learn new skills that attract new work opportunities. Balance work, study and quality time for hobbies and loved ones. Save money. Have a comfortable place to work that max. productivity.; Frustration: "I have a very busy schedule. It's hard to organize everything without neglecting my hobbies and loved ones." "I just don't have the nerve to dwell on buying flowers, but also want to show my partner that he is important to me." "The bootcamp is expensive, so I'm trying to save money where I can."; Personal Quote: "I want my partner to know how special he is to me, no matter how busy my life is."
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 I don't want to take the time to organize them myself each week."; Personal Quote: "I am so passionate about teaching and my family that the days are just way too short."
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: Elliot; Mapping Elliots's user journey revealed how helpful it is for users to make the selection and ordering process as simple and clear as possible and how helpful haptic responses are. It also showed the benefits of an integrated map with voice guidance.
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.
Competitive Analysis
I looked at several potential competing companies and their online reviews. The majority of the competitors' features were very similar, although the majority does not take advantage of the benefits of an app.
The biggest OPPORTUNITIES for this app in the current market are:
- Clear, simple and intuitive user interface
- Accessibility
- Delivery without packaging
- Self-pickup
- Personal service (like at the florist)
- Possibility to support a local florist through the purchase
3. Ideate & Design
Starting the design: Paper wireframes, digital wireframes, low-fidelity prototypes, usability studies
Goal Statement
Our flower catalogue app will let users order flowers for a flexible self pick-up, which will affect people with unpredictable shifts by having the flowers prepared and reserved, and not having to stick to a specific pick-up time.
We will measure effectiveness by analyzing the number of daily and weekly purchases/self pick-ups.
User Flow, Persona: Leah; User task: Use the Eden app to order a bouquet of flowers for self-pickup at the local florist.
Information architecture / Sitemap
Based on the insights of user goals and what a basic user flow looks like from start to finish, I was able to understand the ways users will interact with the app and created the sitemap based on these insights.
Big-Picture and 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
Taking the time to draft iterations for each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
For the item detail screen, I prioritized a quick and easy ordering process to help users save time with the option to easily receive personal support.
Picture paper wireframes

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframe.

Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
To meet the qualitative, financial and timely key user needs, I offer the possibility of pre-ordering for flexible self-pickup and delivery by the florist. Both options are combined with the possibility of a one-time purchase or subscription.
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.
In addition to the qualitative, financial and timely key user needs, the development focused on the key user needs of personal service and accessibility.
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.
Low-Fidelity (lo-fi) Prototype
The lo-fi prototype connected the primary user flow, of selecting a bouquet from the catalog app and ordering it for self pick-up from the local florist, so that the prototype could be used in a usability study with users.
Low-fidelity (lo-fi) Figma screenshot
Test the lo-fi prototype in Figma:
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.
4. Finalizing Design
Refining the design: Mockups, Hi-fidelity prototype, Accessibility
Mockups
Early designs had a rather uniform hierarchy. After the usability study, I clearly defined the hierarchy of elements to draw users' attention in a targeted way.
I also added additional icons to improve accessibility.
Mockup, item details page, before and after usability study
The second usability study revealed that users were confused about the ordering process. The fixed buttons at the bottom of the screen caused scrollable content to be overlooked, and the button label in the shopping bag did not clearly initiate the ordering process.
Therefore, I clearly defined the button label and placed the button at the end of the content.
Mockup, shopping bag/cart, before and after usability study
High-Fidelity (hi-fi) Prototype
The final high-fidelity (hi-fi) prototype presented cleaner user flows for ordering bouquets, subscription plans, and checkout process.
High-fidelity (hi-fi) Figma screenshot
​​​​​​​Test the functionality with the hi-fi prototype of the 2nd usability study in Figma:
Style Guide  /  Sticker Sheet
Picture: Style Guide
Accessibility Considerations
Accessible design means ensuring that all users have everything they need to feel comfortable on their user journey. A UX designer leaves no one behind, so we include everyone who has a permanent, temporary, or situational impairment. (e.g. only one arm OR sprained wrist OR a squalling newborn on one arm).
1. Provided access to users who are vision impared through adding alt text to images for screen readers.; 2. Used icons to help make navigation easier.; 3. Detailed images of the bouquets and clear hierarchy of the UI to help all users understand and navigate the design.; 4. Simple and on-point language to help everyone understand.
Hero Image, Flower Shop App, UX Design
5. Going forward
Going forward: Takeaways, Next steps, Unleashing the visionary
​​​​​​​Takeaways
Impact
Navigating and browsing the app is a very enjoyable experience for users, and the concept is of great interest even to male test users who do not typically buy flowers on a regular basis.
Quotes from usability study participants:
"That's awesome! Finally a hip and modern flower store. When is the app coming out? I definitely want a subscription!"
"The app is so easy to use and it's so much fun."
What I learned
While designing the Eden app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app's design. Work put into improving the accessibility for disabled people improved the usability and user experience for all users.
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.
Thank you for your time reviewing my work on this app!​​​​​​​
If you'd like to get in touch, feel free to use the contact form.

I would also like to thank Coursera for making it possible for me to take this course for free and Google for providing this extensive and intensive course. Despite my previous knowledge, I was able to expand my knowledge considerably.

Also check out the second project of this course: Responsive web design


You may also like

POSTERS + ILLUSTRATION + KALLIGRAPHY (gif)
2017
Responsive Website UX Design
2023
Editorial Design - Book
2014
Photography: Focal Length / Aperture Comparison
2015
VIDEO RECORDING + Explanatory EDITING + Icons
2022
Logo Design: Herzraum
2020
B2B Promotional Products Catalog
2023
Concept + Intro Video + Print & eBook
2022
Newspaper Info Graphic: PDF/A
2015
Artist Branding + Web Design with eCommerce
2022
↑Back to Top

We use necessary cookies to make our site work. We’d like to set additional cookies to understand site usage, make site improvements and remember your settings. View ourPrivacy Policy
Accept Decline