Cody Quest
UI, UX, Interaction Designer

San Francisco, CA

Cody Quest
UI, UX, Interaction Designer

San Francisco, CA

Cody Quest
UI, UX, Interaction Designer

San Francisco, CA




Research, wireframes, UI




Research, wireframes, UI




Research, wireframes, UI

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.

Online vs in-Person
When customizing a blazer it was hard to be confident in the final look and fit of the product using just pictures.
I enjoy building my own arrangements in person
Only buys flowers online for other people. Doesn’t see why he should buy flowers online for himself when he can get them from the grocery store.
“You don’t really know what they’re going to look like unless the person who gets them sends you a picture.”

Idea: Florist texts/emails
you a pic of the final
product b4 shipment
Frequently seeks out online stores with customization options
Customizing products online is overall a positive experience
Enjoys playing with customizing tools just for fun (recently did so with a wetsuit from billabong and phone cases)
Buys flowers in person when not for an occasion
When picking flowers in person: “I see whats available then choose what I like and let the florist build around that”
Sometimes I pick vases. I like the creative ones like wicker baskets or pails or seasonal designs
I don’t buy add-ons with the flowers. I feel like if i go to a flower website i’m going there for a specific thing.
Add-ons (bears, champagne, etc.) usually lack quality.
Will pass on a vase because of the extra $$.

“Everyone has vases.”

Will only choose vessel if it’s a gift basket.
Prefers not to buy a vase with arrangements, says the cost is too high (“ridiculous”)
Does not purchase any accessories with flowers, buys just the bouquet
Not interested in vases
Doesn’t get or care about add ons (champagne/teddy bear)
leaves are important and different than decoration (which is not important)
The customization tool i used for a West Point blazer was kind of buggy - if you select one thing, it’ll select/deselect other settings. It was really not intuitive.
I wish it would show me what combo of options were realistic or not. Whenever I got really excited about a certain combination of designs it wasn’t available.
Online florists:
Wants more size options.
Would like more control over the decorative leaves.
Would like option to swap certain flowers.
Believes balance is key to number of customization options--too many is overhelming and too few is restrictive
Will select 4-6 flowers for a bouquet if doing a custom arrangement
Finds that limited options leads to easier decision making, removes guesswork
Wants to be able to control distribution of flowers in the arrangement (e.g. 10% roses, 15% lillies, 15% carnations, etc)
Many options make it more difficult to choose but that is also the fun of it
Wished she had more control over in certain areas (not just using pattern of the shoe / go over seams etc)

Recipient & Occasion

Buys for himself, mother, and friends
1.Mom/Dad day
2. Bday & Consolation Tie
3. Anniversary
Flower occasions: Mother’s day, birthdays, valentine’s day, anniversaries

I buy flowers for my mom, my girlfriend, and my girlfriend’s mom.

I buy flowers for my mom, my girlfriend, and my girlfriend’s mom.

I only buy flowers for others
Buys flowers for birthdays (of people he doesnt know that well) and valentine’s day
Mostly buys flowers for his own decor
Will buy flowers for others around holidays, birthdays, parties
Only buys flowers online for occasions / if far away
Premade vs Custom
I like a lot of options as long as they’re well organized.
I like to pick each stem in person usually
More Options = Better
Premade for people he’s not close to.

Custom for people he’s close with.

Or more likely for people he
wants to impress?
push ads for v-day.
Has never seen a customizable online florist. But finds the idea interesting only if the UI is easy to use and provides you with adequate pictures of the final product.
Does not necessarily try to make a unique arrangement unless he things the pre-selected ones are “lackluster” (did not clarify what consituted lackluster)
usually does not choose premade bouquets unless she has to
53% Buy premade
47% - Custom
82% - Premade
18% - Custom
Prefers to see flowers in-person, unless there’s no other choice.
Likes seeing photographs of the product he’s choosing
She really liked that the website offered natural-looking pictures
She liked that the images had a hand holding flowers for size comparison

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


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.