top of page

Flower Shoppe

FS BMheaderimage.png
FS worktile.png

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

Overview     |     Understanding the User     |     Competitive Analysis     |     Starting the Design     |     Refining     |     Final Design     |     Going Forward

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
problem statement.png
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

audit1.png
audit2.png
audit2.png
audit3.png
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]

storyboard big picture.png
storyboard closeup.png
Sitemap
FlowerShoppe Sitemap.png
Paper Wireframes

[click to enlarge]

FS wireframespaper1_edited.png
FS wireframespaper2_edited.jpg
Digital Wireframes/ Flow
FloristWireframesFlow.png
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
FlowerShoppe wireframe home.png

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

Usability3.png
FS buildbouquet.png

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 

FS iphone mockups.png
High-Fidelity Prototype
FS worktile.png

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.

bottom of page