Bokay is a new brand from an established nationwide florist. Their aim is to reach a younger, more internet-savvy demographic by offering user-customized bouquets arranged online and fulfilled by their brick and mortar shops across the country. Although this was a project started as my team's bootcamp final, we worked with the stakeholder for some time after bootcamp finished.
The key objective for my team was to design the online flower arrangement tool and Bokay website. The tool must accomplish the following:
Be friendly and easy to use
Avoid decision paralysis by limiting options for each step
Have filters easily accessible
Showcase the user's custom arrangement at each step
We worked directly with the stakeholder throughout the design process to ensure we were meeting their needs.
A "bokay" in progress
Getting Started
Synthesizing research to begin the design
I conducted user research through surveys and interviews to determine the reasons people buy flower arrangements and how they choose which one they purchase.
Responses were split up and my team used card sorting to categorize the answers in to a manageable data set. At a glance it let us see quickly that people wanted customization, but often lacked knowledge or the ability to customize their bouquets.
After comparing our results with the stakeholder's input, we worked on our first wireframes.
It was important that we visualize the structure of the tool early on. I took inspiration from auto websites that allow users to customize their vehicle before purchase. My team looked at Nike's shoe builder for inspiration as well.
Our wireframes were prototyped in to a rough version of the tool and given to a handful of users for testing.
you a pic of the final
product b4 shipment
“Everyone has vases.”
Will only choose vessel if it’s a gift basket.
Wants more size options.
Would like more control over the decorative leaves.
Would like option to swap certain flowers.
Recipient & Occasion
1.Mom/Dad day
2. Bday & Consolation Tie
3. Anniversary
Custom for people he’s close with.
wants to impress?
push ads for v-day.
53% Buy premade
47% - Custom
82% - Premade
18% - Custom
Card sorting was used to prioritize needs and features
Testing and Iteration
Combating feature bloat and overwhelming the users
From our early prototype we were able to see that users could identify the steps needed to complete their arrangement, but had a difficult time seeing how to navigate between them. Some users commented that areas of the screen felt "cluttered".
Early version used for testing
Our early concept had stepwise breadcrumbs on the left. Each step displayed a running total. This competed visually with the selection carousel at the bottom of the screen and confused our testers.
After reviewing feedback, my team and I constructed a somewhat simplified user-flow and implemented a short tutorial for the tool to familiarize our users before letting them loose to arrange their bouquets.
The Website and Final Version
Showcasing the product
I led the overall design of the UI for this project. The stakeholder suggested bright colors and a fun, friendly feel. Through typography, we invite the user to learn more with headings that are seemingly handwritten, as a message on a card attached to a bouquet may be.
I chose colors that can be found on many types of flowers. CTAs are pink and green with strong saturation to be more visible. Yellows and blues are used to define sections alongside alternating white to avoid eye strain.
Aesthetically, I suggested to our team and stakeholder the idea of a paint metaphor. The product is ultimately user-created from a wide range of shapes, textures, and colors found in the flowers. I added a slightly embossed logo to the background of the pages to suggest texture, and the sections are divided by "painted" areas.
The tool, by necessity, needed to be cleaner in its appearance. We did not employ the embossed background. We kept the painterly touch to the user's selections.
The structure of the site is simple. The landing gives a brief overview of the steps. It also shows user photos from Instagrammed that are tagged #bokay.
Style guide
Takeaways
Tending to the garden
My team concluded our work with the stakeholder with one final round of testing. We found that:
Users enjoyed seeing their Bokay update with their selections
They were able to quickly grasp their tasks
The tutorial was deemed helpful by everyone who read through it, but some users closed it immediately
We had a 100% success rate for users arranging a Bokay and reaching the checkout phase.
Despite the overall improvement in user feedback, our data showed:
Pricing visibility should be more prominent
The placement of the previous/next step buttons was unintuitive
Users had difficulty understanding the need to deselect an unwanted item, some were looking for an X or - button
Future iterations would find solutions for continued simplicity of the process. I would focus on visibility of interactive items and reducing the need for eye travel across the tool. For the website, I would like to show photos of the final product in the hero section. While our tagline is strong, I feel the hero doesn't convey exactly what the product is.
