About Fleur Fresca
Fleur Fresca is a local floral shop located in the heart of Des Moines, Wa. Fleur Fresca sells bouquets and various gifts such as a box of chocolates, stuffed animals and balloons for every occasion. They also deliver these items to the surrounding areas of Des Moines such as Kent, Federal way and Auburn, Wa.
Device + Project Type :
Conceptual eCommerce Website Design
Duration:
This project was 2 weeks in Duration
Tools or Methods: Figma, Draw.io, Double Diamond Method,-Discover, Define, Design, Deliver.
Role + Responsibilities: Researching, Persona, Problem Statement, HMWs, Sketches and Wire-framing, Usability testing, Reflection
Lets Start the Flipping Process
What I Set Out to Find: Finding out why/ how people order flowers as well as find out any pain points that may arise when ordering flowers.
How I Did it: To find participants I made an announcement on my social media and my school channel. Four interviewees who have had to purchase flowers in the past six months were interviewed. After that, I found three common trends through the user interviews
4/4 users buy flowers as gifts for an event.
2/ 4 want affordability
3/ 4 users buy flowers for themselves.
Then usability tests were conducted on the same interviewee participants. Participants were told an User Scenario. Then participants were asked to please say out loud their process while navigating the website.
Giving Not Receiving
User Scenario- Your friend just got a new job promotion. You do not have time to go to the store. You want to order a bouquet of flowers online to congratulate them and have the flowers delivered to their workplace.
Common trends in usability testing were found-
4/4 Users searched by occasions
4/4 Users choose bouquets based on images.
2/4 Users mentioned they want affordability
4/4 Mentioned website was not visually appealing. Users said there was too much text and spacing.
Quality Over Quantity
I found out user’s wanted images that were clear and real life photos of the floral bouquets or items they were purchasing because they wanted to know the item in the photo is exactly what they are getting in real life. The original website has some real life photos but most of them were stock photos.
User’s Testimonies
“Unnecessary tabs” -Users 2 & 3
“There should be real life photos, not stock photos.”- All users
C&C Analysis
“ I want more product information”- Users 1, 2, & 4
“Spacing of pictures are too close together”- Users 2, 3 & 4
A C&C analysis was conducted. Multiple websites were chosen including popular websites such as 1800 flowers, costco floral and bloomsybox as well as local competitor CMS floral design. From Bloomsybox’s website there was an off white background with florals around the border that I really liked. From 1800 flowers there was a call to action (CTA) that geared user’s to order flowers with convenience. I liked both of the design choices due to the accessibility, the off white background of bloomsybox with black text and hierarchy will steer user’s where to go. The CTA for 1800 flowers is clean and simple and steers the user’s attention from left to right. Then I set out to find out how I can incorporate them in my designs. Please see the examples below.
Bloomsybox
1800Flowers
Let's Test it Out
Since user’s mentioned unnecessary tabs on Fleur Fresca’s website and having no clear sense of direction, a tree test was conducted to gain insights on user’s navigation of the website. When asking Users to search for a bouquet of flowers to give to their friend for their graduation. Some of the insights that were found was that the majority of users searched for flowers based on occasions. There were 2/11 users that decided to go to the best prices tab instead of searching by occasion, this gave me insights that some users may care about pricing and search by pricing first versus occasions . Since there were 11 users, sample size may be biased.
Since user’s interviews suggested that participants bought flowers for someone due to an occasion since they have little to no experience with flower types. I set out to help create a solution that will help users pick the right floral bouquet despite having little experience on flower types or user not knowing where to start by adding a CTA on the homepage or minimizing unnecessary tabs to improve their path of navigation through the website.
Choose your own options
Before
After/ Low-fi/ Prototype
Navigation bar is evenly spaced out. The Sympathy tab is now removed because the tab was also under locations . A CTA is on the front page to draw user’s to shop by occasions. A filter option was made to give user’s to narrow down decisions based on their needs. I gave users 2 paths to search by occasions because I wanted to give user’s a sense of intuitive navigation.
There is a filtering option for the products page including price flower type and colors. Product page can be favorited and if users need more information about the product they can click on image to read more. Pictures are evenly spaced out.
After usability testing was conducted. Results suggested that all of the 11 users went to the Occasion’s tab to search for flowers to congratulate their friend on the new job promotion. User’s were confused as to why there was a “choose your date” calendar on the homepage for the CTA and for the check out page.
Insights
Reflection
Hi-fi design/ After
The path of navigation was improved, the website has a cleaner feel with a more modern approach due to a C&C analysis and having empathy for the user's needs. After empathizing with participants via interview, the prototype includes an option to search by occasion and an option to filter for price. High fi prototype has a disclaimer that the flowers depicted in the pictures will look the same in real life. In the lo fi/ hi fi prototype there is a field where users are able to read reviews on the floral bouquets. The pink navigation bar came from the color palette of the homepage photo. I wanted a lighter background that matched with the floral picture instead of the original older green color. I chose typography Lato for the header and body font. This is a sans serif font that is easily readable than the old font. Can be used for header and body.
Moving Fleur- ward
Final Prototype
For my next steps, user’s had difficulty using the calendar. I will improve the calendar function if I had to redo it to make it more intuitive for the users to click on. Improving the calendar function then doing usability testing would be my biggest priority I would also create a footer, give users an option to skip filling out a card, just in case the user is buying and having flowers delivered for themselves. If this was the case then user’s may feel like there isn't a need to write themselves a message but more future research needs to be conducted. Next rounds of usability testing for my hi-fi prototype would be conducted with all the necessary changes made. Creating a hi-fi mobile version would also be next steps but that would be last once web design is concrete.
The original website had pictures that were close together. Some of the pictures were stock photos. Navigation bar were spaced apart. There was an unnecessary tab, “sympathy.” Font is hard to read and font size is small as well.
