Deliverable: Bouquet preview app | Duration: August to December 2022 | Role: UX designer designing an app from conception to delivery.
The problem
Busy professionals lack the time to create a custom, sentimental floral arrangement for family and friends.
The goal
Design an app that will help the user create and preview a bouquet with a personal touch before ordering.
Interviews were conducted and empathy maps were created to understand the users and their needs. A primary user group identified through research was busy professionals who don’t have time to go to the florist and browse through flowers to create a custom bouquet and see what it looks like before purchasing.
User research identified three main pain points:
Time. Working professionals are too busy to spend time browsing through flowers at the florist.
Visualization/Accessibility. Online ordering typically doesn’t provide visual opportunities to explore custom floral combinations to offer a personalized touch.
Information Architecture. The number of floral combinations can be overwhelming, difficult and tedious to navigate or explore.
User research
Taking the time to draft iterations of 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 initial search screen, I prioritized the exploration of multiple entry points to allow users the ability to either search or browse based on their personal preferences.
Paper wireframes
Digital wireframes
Easy navigation was a key user need to address. A variety of access points and methods to locate a primary flower of their choice makes the initial step quick and simple.
Highlighting professional recommendations allows users to quickly choose complementary flowers that are sure to please the recipient.
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow connected was to build and preview a custom bouquet so the prototype could be used in a usability study.
Low-fidelity prototype
Two rounds of usability studies were conducted.
Round 1: Users wanted to make a bouquet quickly, wanted more defined steps and more customization options. These findings helped guide the mockup designs.
Round 2: Users wanted more flexibility in flower pairing, and users wanted an enlarged flower thumbnail preview option. This study, which used a high-fidelity prototype, revealed what aspects of the mockups needed refining.
Usability study findings
On the bouquet preview page, users wanted more concise messaging to indicate what the action would do in this step of the user flow.
The next step was more clearly defined to add more customization to the bouquet with accessories before the add-to-cart action is confirmed.
Mockups
The high-fidelity prototype presented cleaner and more defined steps in the user flows for creating a custom bouquet and adding to the user’s shopping cart.
High-fidelity prototype
Used images and text to identify flowers within the app, with an option to enlarge image thumbnails for those with low vision.
Used icons to help make navigation easier.
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Accessibility considerations
Takeaways
Impact: The app makes users feel like Flo’s Flowers offers an easy and customizable solution to create a personal gift.
One quote from peer feedback:
“The app made it so easy to find a favorite flower and pair it with another to make a beautiful, elegant bouquet to brighten my loved one’s day!”
What I learned: While designing Flo’s Flowers bouquet preview app, I learned that usability studies and peer feedback made the initial concept better with every iteration. With more customizable actions, the app allows the user to create a truly personal and unique arrangement for their desired recipient.