The Flora Agora
The Flora Agora provides customers a new way to order flowers online where they can see all prices and fees upfront while having options to customize bouquets by price point.
Project Overview
The Problem:
Customers do not feel confident when ordering flowers online. They are often discouraged when the final price is much higher than originally advertised. This leads to some customers abandoning their cart for a cheaper florist or deciding against gifting flowers altogether.
The Goal:
Design a responsive website where customers can confidently order flowers by seeing all prices up front and have the ability to customize a bouquet by price point.
Project Duration:
December 2022 – January 2023
My Role:
UX researcher and designer from conception to delivery
Responsibilities:
- Conducting interviews
- Researching competitors
- Paper and digital wireframes
- Prototyping
- Conducting usability studies
- Iterating on designs
Tools:
- Adobe XD
- Zoom
- Trello
- Google Workspace
- Paper/Pencil
Understanding the User
I went into the research for this product with the following assumption from my own personal experience: customers are hesitant to order flowers online because what is ordered does not always match what the recipient receives. I wanted to know if this experience has been true for others and if there are any other pain points contributing to this lack of confidence.
After conducting interviews, I created empathy maps to better understand the users and their needs.
I found three primary pain points:
Persona:
Problem Statement:
David is a caring boyfriend on a budget who wants to order fresh quality flowers within a certain price point because he wants to surprise his girlfriend more often while remaining financially conscious.
User Journey:
Goal:
Have a way to customize a bouquet to fit into budget while providing price transparency.
Ideas:
- Ask for delivery destination first to automatically include in price shown
- Give option to build a bouquet to customize price
- Be transparent about number and price of each flower type
Starting the Design
Paper Wireframes:
I chose to design for the desktop layout first. This allowed me to think broadly in terms of possible features and solutions. Knowing I will need to scale down for the mobile layout, this approach also allowed me to critically think about the most important features.
I drafted five iterations of each screen on paper, keeping David’s problem statement in mind.
I used stars to note my favorite elements of each to take into the digital wireframe.
Digital Wireframes:
Usability Study (Round 1):
The digital wireframes were linked together into a low-fidelity prototype.
Five usability studies were conducted through a combination of moderated and unmoderated interviews where participants recorded themselves following a set of prompts.
Users found the need for several large changes requiring the need to iterate on a few wireframes.
Updated Digital Wireframes:
Usability Study (Round 2):
Because of the extent of the changes to the wireframes, a second round of testing was necessary.
The wireframes were linked together into a low-fidelity prototype.
Five additional usability studies were conducted through a combination of moderated and unmoderated interviews where participants recorded themselves following a set of prompts focusing on the changes.
Based on the study findings, I felt confident to move on to mockups.
Refining the Design
Mockups:
Color Palette Choices:
The overall color palette was chosen to give the website a bright and airy feeling fitting a flower shop. Color trends were looked at to aesthetically appeal to modern shoppers and give the company a “boutique” look.
Tea Green was chosen as the primary color with a lighter version used for overlays and notifications.
The Pantone 2023 color of the year, Viva Magenta, is used for the logo and additional details needing to catch users attention.
Dusty blue is used for all call to action buttons since it contrasts enough with the other colors to stand out, but is still complementary with the rest of the palette.
Typography Choices:
The Flora Agora logo, H1 and H2 headings are in Copperplate.
While doing competitor research, I found that many boutique florists use some form of script for their headings and logo, so Copperplate was found to stand out amongst companies and give off a feeling of professionalism.
All other text is in Roboto mostly in part to it being easy to read and popular across all platforms.
The body text size for this website is larger than average, at 24 px, due to the feedback from visually impaired users during testing. Since a large number of the target audience are older and require some sort of vision assistance, I decided to keep the text as large as possible without sacrificing layout and design.
Final Usability Study:
The mockups were linked together into the high-fidelity prototype above.
The third round of usability studies were conducted through a combination of moderated and unmoderated interviews where five participants recorded themselves testing the prototype by following a set of prompts related to the user flow and overall visual design of the site.
Achieving the Goal:
After this round of testing, I determined the original goal regarding price transparency was met and solved the first two pain points found in my exploratory research.
Accessibility considerations:
Responsive Design
Paper Wireframes:
According to Statista, at the end of 2022, nearly 60% of web traffic came from mobile devices.
With that in mind, I made sure to to plan this project with responsive design in mind.
I created quick side by side sketches of each screen for web, tablet, and mobile views to decide on how best to scale and arrange the information.
The goal is for a user trying to order flowers on their phone at a bus stop to have the same engaging experience as a user sitting on the couch with their laptop.
Once I decided on the layout, I was able to resize the components used in the web mockups to create the new views.
Tablet Screen:
Mobile Screen:
Impact
Impact:
At the beginning, most of those interviewed had stated they had abandoned a cart when trying to order flowers online due to the final cost at checkout not matching the price advertised.
During the final round of testing, 100% of users commented on their appreciation of the the price transparency built into the ordering process. Understanding the costs upfront and having the ability to customize their product to fit a price point will help to eliminate the abandoned cart issue for future purchases.
Users also stated they would choose to do business with this company over others due to the price transparency.
Kristin Lucas – Updated 2023