Flower Shoppe
Flower Shoppe is a mobile app designed to offer the best of online and in-person bouquet selection processes. The goal was to provide a clear set of selection options to make finding the perfect bouquet efficient for a variety of users.
*this project was based on a generated prompt, my previous familiarity with the subject matter extended only to the flower display of my hometown grocery store
Project Overview
Role
UX Designer for the Flower Shoppe app and responsive website from conception to delivery
Responsibilities
User research, paper & digital wireframing, mockups, prototyping, conducting usability studies, accounting for accessibility, and iterating on designs
Client
Google x Coursera
Duration
August - November 2021
Problems
1. Floral companies with large selections end up listing dozens of options that look identical. They market their quantity as an impressive selling point, when customers report the quantity as overwhelming.
​
2. Shopping online doesn't provide the same selection overview as a walk through a store, but is feasibly the only option for many due to limitations of transportation, geography, health, and more.
​
3. Sneaky price ranges and add-on costs reflect a lack of transparency while some confusion about customization reflects a lack of clarity.
Goal
Create an app that will provide a manageable bouquet selection, upfront transparency of prices and delivery options, and varying options for assistance from build your own to the florist-selected deal of the day to get users to the checkout efficiently.
Product
The Flower Shoppe app highlights its store-like display and additional selection tools as well as overall transparency to make bouquet shopping a breeze for D.C. area shoppers.
Understanding the User
User Pain Points
Redundancy
Traditional floral sites provide seemingly endless options. Though it may seem beneficial to cover all bouquet bases, at a certain point it becomes overwhelming to the user.
Transparency
Knowing delivery date options and total pricing is vital to the user. When additional fees or crazy delivery timing show up on the checkout page the user feels blindsided.
Efficiency
Partially due to the expanse of bouquets, users are looking for more guidance to find a fitting floral faster.
Personas & Problem Statement
[personas generated from initial user interviews]
"As a proud community member with a (semi) disposable income, I want to find personalized bouquets from local florists so that I can make my friends feel special while supporting deserving small businesses."
"As a member of the military, a husband, and father of 2, I want to find the right bouquet in an efficient manner so that I can still send a thoughtful gift amongst the craziness of everyday life."
Problem Statement
User Journey Map
[based on initial user interviews to help empathize with users in the current undertaking of the flower buying process]
Summary
I conducted preliminary interviews and created empathy maps to better understand the target users and their needs. A primary user group identified through research was working adults who don’t want to spend much time on their search for florals.This user group found the expanse of bouquets on large floral sites to be overwhelming as well as lacking compared to the in-store display view.
Competitive Analysis
Takeaways
Clarity of presented information and foundational UI (including 60-30-10 color rule and legibility) were key in first impressions of these sites and therefore should be prioritized in the Flower Shoppe app. From there, thoughtful consistency and simplicity throughout a site like FTD made it both functionally and aesthetically one of the best UX/UI competitor sites.
Starting the Design
Storyboards
[sketches showing real world scenarios as well as in-app processes which would benefit from the Flower Shoppe app design]
Sitemap
Paper Wireframes
[click to enlarge]
Digital Wireframes/ Flow
Usability Study Findings
An unmoderated usability study of 4 users to test the purchase process for the shopping tools revealed:
Home Page Cues
Without full descriptions and images for the tools there was some confusion, look to utilize descriptive imagery to support textual descriptions of home page selection tools
Best Match
Users valued the efficiency of the best match tool but reactions suggested a possible adjustment of filter options
Build a Bouquet
Even in a simulation, users weren't fully comfortable selecting florals solely via name, visual selection options on build a bouquet tool would help users who don't know flowers by name
Refining
Before Usability Study
After Study
As the main selling point of the florist shop, the display bouquets are highlighted at the top, the other selection tools still take advantage of visuals to guide users to the proper bouquet in the way that best guides them
After feedback supported visual floral selections within the build a bouquet tool, both it and the best match tools were updated to include images for selecting individual flower types. Filter options were also adjusted within the best match tool to fit user needs and simple visuals were extended into the other filters such as color and price range.
Accessibility Considerations
Headings
careful consideration of typeface, font, and size create an organizational hierarchy intended for screen reader legibility
Info tags
"i" tags on the remade bouquets provide additional information on floral contents and colors, textual descriptions expand legibility to users with color blindness or a dependence on screen readers
Color
colors were selected not only based on brand identity, but were checked to pass WCAG AAA contrast standards
High-Fidelity Prototype
Going Forward
Takeaways
Impact
While the concept of a mobile app for a florist is by no means a new concept, I think the Flower Shoppe app has at least a couple distinguishing points from those on the market. The curated and sorted digital display may ease users' anxiety over searching through endless bouquets with seemingly endless filter options. The simple info cards aim to increase inclusivity by extending information to users with color blindness or those using screen readers, and the initial shopping options hope to guide users from the first click to a pain-free bouquet selection.
What I Learned
-
It will take several run throughs of a prototype, lo-fi or hi-fi, to catch all of your mistakes (constraints, connections, etc.)
-
Stick to wireframe norms, my initial paper wireframes quickly strayed from simplified elements to include sketches and copious notes
-
Design systems are huge time savers, make sure components are added as you as individual edits are tedious
-
Beyond UX, this project resulted in a growth in personal engagement (and knowledge) of florals--I now enjoy semi-regular trips for stems to arrange for myself
Next Steps
An additional usability study at this point would provide feedback on the success of the changes made, as well as guide further iterations. Additionally, establishing a Flower Shoppe design system would allow the store owners to create a site for alternate screen sizes while maintaining a consistent brand identity and functionality.