top of page
TBB Web Header

OVERVIEW

The Bloom Bunch icon colour_edited.png

The Bloom Bunch Site

The Bloom Bunch a Toronto-based florist shop that offers delivery services throughout southern Ontario. The storefront website aims to offer floral arrangements for occasions of all kinds, including weddings, anniversaries and corporate events.

My Role

UI/UX Designer

Project

Personal

Timeline

October 2023 - November 2023

Tools Used

Figma, Adobe Photoshop

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting a usability study, accounting for accessibility and iterating on designs.

The Problem

Online florist shops are hard to navigate, have inefficient browsing systems, offer little to none customizable options, and unappealing designs.

The Goal

Design a responsive website for The Bloom Bunch that allows users to browse, order and pick up or get flowers delivered.

Design Process

Design System

PROBLEM

Online florist shops are hard to navigate, have inefficient browsing systems and offer little to no customizable options.

THE SOLUTION(S)

Browse through categories to find pre-made, ready-to-go florals!
  • Browse and filter through florals by colour, size, occasion etc.

  • Pre-made florals take the guesswork out of the decision process

  • Update new categories according to the season and holidays

Customize your own floral arrangements.
  • Flowers can be selected and unselected to one's liking

  • Add on your vase

  • Multiple bouquets can be added to the cart

Pick-up and delivery options to fit busy schedules. 
  • Bouquets can be delivered right to the recipient

  • Schedule and track florals from the app

  • Set and forget repeat deliveries to always have fresh flowers at hand.

Web Desktop Custom Bouquet
Web Mobile Custom Bouquet
Web Desktop Calendar
Web Mobile Order Details
Web Desktop Item View
Web Mobile Browse

USER RESEARCH

walking with flowers.png

Research Goals

  • Analyze the challenges people go through in ordering a bouquet under time constraints 

  • Identify what frustrations come with ordering bouquets online

  • Discover what kind of visuals are used for both products and services

  • Identify the strengths/potential of current web systems 

  • Discover how existing florist shops entice customers to choose them

Target Users

  • Event businesses, wedding planners/party's, city/ town folk, once in a while buyers, flower lovers

Research Methods

  • Online survey (Google form)

  • In-person interviews 

  • Online Research

To build off of what I worked on creating the app version, I went online looking on florist websites to see what services and products were offered and how they categorized, filtered and presented florals.

WHITE PAPER RESEARCH

Online plant shopping is convenient and entertaining.


I wanted to figure out the goals and motivations of plant owners, so I went through articles and papers like this one from IOPScience to figure out that plant owners: 

"surround themselves with natural elements such as ornamental plants in hopes of lessening the effects of mental stress... also saw their interest as either a main or an alternative source of income... (and plant owners) seek information and knowledge about plant care to maintain their interest and have their plants thrive within their homes."*

* S Reyes and N Navarra 2022 IOP Conf. Ser.: Earth Environ. Sci.  

COMPETITIVE ANALYSIS

The way the competition presents information can be confusing or overwhelming.
TBB Competitive Analysis

FINDINGS

Creating empathy maps and conducting interviews (from the last project and this one) allowed me to understand users' wants and needs concerning visual design, products and services. A primary user group I identified through my research was business owners looking for online delivery services for floral arrangements. 

I found that users wanted more custom bouquet options, subscription/ repeating delivery services and smooth navigation to browse through a shop's catalogue, all in one website.

USER INTERVIEW

UX Interview_edited.png

I conducted a usability study with 5 bouquet buyers to discuss their goals and pain points when shopping for florals online. The interview covered the entire user journey of buying a product.

Research questions:
  • Is the payment process easy and simple to use?

  • How long does it take for a user to find the right arrangement?

  • Is the information too deep within the website's architecture?

  • What elements should be adjusted or removed entirely across different devices?

  • What can we learn from the process users went through to order florals?

  • Are there any parts of the process to order an arrangement where users get stuck?

Some user feedback included:

"The text is kinda small in sections and some of it is difficult to read."

"Some of the buttons kinda look out of place, they don't really fit each other."

"I feel like there are pictures and text placed too close to each other."

With the research for the app, I synthesized the information into two behavioural archetypes (a bridal store owner and a young adult looking to send a gift back home) and an empathy map. I asked a few "How Might We" questions to figure out what direction to take The Bloom Bunch.

  • How might we organize and categorize pre-made arrangements?

  • How can we effectively communicate and display all our available delivery options, particularly to our repeat customers?

  • How might we present large sections of information across responsive websites?

  • How can we provide a seamless user experience and ensure users can easily navigate our platform across devices?

  • How can we create a cohesive design that can translate over multiple devices?

THE MAIN INSIGHT

Prioritizing consistency across design, clear interactions and avoiding too deep of navigation will allow for responsive compatibility across devices.

After analyzing the feedback through affinity mapping and referring back to the research, its evident that users require easy navigation and adjustments to spacing and sizing, whether it be textual or visual.

PAIN POINTS

1

Overlays

Overlays with buttons didn't fit the screen correctly and the frames for the buttons were not lining up properly

2

Font

Some font sizes were too small, making it difficult for users to read.

3

Spacing

Some elements need more room around them to be easier on the eyes and allow for easy navigation.

STARTING THE DESIGN: PAPER WIREFRAMES

I created paper wireframes for the desktop size first and then moved on to the mobile size. I wanted to figure out how to properly format everything across the sizes.

web paperwireframes
responsive paper wireframes

DIGITAL WIREFRAMES

I polished and improved my paper concepts into digital wireframes. Digital wireframes allowed me to have a more accurate representation of how the website would look and function on different devices. 

Web Homepage Digital Wireframes.png

USABILITY FINDINGS

I designed a high-fidelity prototype after conducting a usability study using the low-fidelity prototype with 5 users. To ensure a solid final prototype, I gathered and assessed feedback from the usability study. The aim was to evaluate the user experience while navigating pre-made florals, customizing arrangements, adding items to the wishlist and cart, and completing purchases.

Font Sizes

Adjusted the font sizes and text styles to be more legible to be read on-screen readers.

 

I added more options to login into existing accounts below for easier login.

 

Lastly, I adjusted icon sizes in the navigation bar to look less cluttered and more in line with the menu.

Icon Sizes.png

Again, I adjusted the text sizes and buttons to be bigger for better legibility so they would be easier to click on no matter the device.

THE FINAL PROTOTYPE

CONCLUSION + WHAT I LEARNED

  1. Understand what and who you are designing for - That means listening to people and keeping your sights on your audience. I found that referring back to the research I collected and the interviews I conducted guided me through the decision-making process.

  2. I'm never gonna get it 100% right - UX is not linear, there are multiple solutions to problems. Focusing on doing the best for who you need to serve is the key.

  3. Don’t rush the process - Transferring the designs from the app to website was not the straightforward process I thought it would be. I soon realized that several areas required improvement, which made the process more challenging than I anticipated. I took things one step at a time, going back and forth to avoid frustration until completion. 

Thank you for viewing!

bottom of page