Project type
UX Design App, Figma
Date
May 2023
Location
Louisville, KY
Role
UX Designer
Bouquet Builder App
Project Overview
The Product
Bouquet Builder is connects users to nearby florists whose flowers are locally sourced, and always changing throughout the seasons. The app targets customers that want a quick and easy way to create a personalized, beautiful gift that can be delivered right to the recipient’s door.
The Problem
Busy people and those wanting to give a personalized gift need a platform to be creative and deliver a gift quickly and efficiently.
The Goal
Our app will let users personalize and deliver flowers which will affect both busy workers and creative gift givers by conveniently and easily creating beautiful, personalized gifts to be delivered directly to recipients. We will measure effectiveness by tracking the number of orders placed.
My Role
UX designer and researcher designing an app for Bouquet Builder from conception to delivery.
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The User
User Research: Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to go gift shopping, or get creative and personal with gifts.
This user group confirmed initial assumptions that customers were most concerned with their time and the efficiency of making a purchase.
“Between work and being there for my family, I feel like I need two of me to get everything done!”
Problem Statement
Elise is a full-time mother and an RN at a hospital who needs a fast and convenient way to send a personalized gift because she has no down time, but wants to show her appreciation to her loved ones.
Goals
-
Accomplish personal goals in the day without feeling overwhelmed
-
Show appreciation and love to her loved ones that she doesn’t get to see very much
-
Be a great nurse that makes patients feel seen and cared for
Frustrations
-
“After 12 hour shifts, I barely have have energy for myself and family members.”
-
“It’s hard to find personalized and fast delivered gifts with online shopping.”
-
“I want all of those around me to feel special, and it’s hard to show that with my busy schedule.”
Wireframes and Prototypes
Ideas On Paper
The paper wireframe sketches were meant to quickly jot down my ideas for the layout of the beginning of the app’s main flow. I wanted to also brainstorm the more complicated pages in which the user creates their product in the app.
Go Digital
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Having all of the options for selection displayed in one screen helped to not overwhelm the user.
Low-Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was building and ordering a bouquet, so the prototype could be used in a usability study.
View the Bouquet Builder App’s
Usability Study Findings
Round 1:
Users want more direction for flower selection.
Users need more clearly labeled action buttons.
Users want an easy and straightforward creating and ordering process.
Round 2:
Users want clearer division within pages, and higher color contrast.
Users wanted more action buttons to return to previous page.
Users wanted to see separate screens for the Account Page and Menu.
Redefine the Design
Mockups
Usability Study 1
The usability study showed that users needed their eyes guided to begin the main user flow. The color palette and lack of clear division in the pages made it unclear where the user should start their journey. Another improvement shown after the second usability study was a change in font for easier reading.
Usability Study 2
The usability study showed that while moving through the prototype, users wanted to see more of what the app would look like. I added a Drop-Down Menu and the ability to access the Account Page from all of the app’s pages. In the second study, a separate page for the menu was created for better accessibility.
Usability Study 1-- Before and After
Usability Study 2-- Original, After Study 1, After Study 2
Main Flow mockup
High Fidelity Prototype
The final high fidelity prototype presents a clean user flow through either selection of Build Your Own, or Browse Bouquets from the homepage. It is short and sweet, and very efficient to go through either of the flower selection processes, and into the checkout process. This prototype also includes a Menu screen and an Account Page.
View the Bouquet Builder App’s
Accessibility Considerations
-
Color contrast was adjusted throughout the design process. More white space proved to be most beneficial to users.
-
Motions for gestures traveling to and back from pages of the app gave a clearer understanding of navigation to the user.
-
The same color was used for the buttons to progress through the app, as was the color for the buttons moving back through the steps.
Takeaways
Impact
The app makes users feel like they can accomplish a task without too much effort or energy, and feel great about the end result.
What I Learned
While designing the Bouquet Builder 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 designs that created an almost entirely new look.
Next Steps
-
Widen the availability of the app by taking it to more cities.
-
Find and partner with florists to participate in the app.