Glo Florist is a trendy florist in Malaysia which offers flowers delivery nationwide. It has been featured on major newspapers and websites as the go-to place to pick flowers for special occasions.
I worked on this project from 12 Sep 2023 to 24 Sep 2023.
My Contributions
I am the lead UI/UX designer for the project from conception to delivery.
I conducted interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem
Working adults don’t have the time to make flower order in florist and pick up the order later
The Goal
Design a responsive website that allows customers to order flowers from Glo Florist and get it delivered.
Understanding the User
____
Interview
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to order flower and pick up from florists.
This user group confirmed initial assumptions about Glo Florist customers, but research also revealed that time was not the only factor limiting users from ordering and sending flowers. Other user problems included options availability, preferences, and finances.
Users' Pain Points
1
Time
Working adults are too busy to order flowers in person and then pick it up again later.
2
Little options
There are not much online florists available, and the flower arrangements are limited, only available in bouquets.
3
Customization
Customer wants to customize the bouquets, the wish notes, amd add-on gifts.
User Persona
Problem statement: Taylor is a marketing professional who wants to get flower delivered from florist that allows her to buy individual flowers and customize bouquets because she wants to decorate her house with flowers and surprise her loved ones with flower bouquets as gifts.
User Journey
Mapping Taylor’s user journey revealed how helpful for her to place flower order through website and get it delivered to friend’s house.
Sitemap
This is the sitemap to help users navigate through Glo Florist website pages.
Starting the Design
Paper wireframe
By drafting design on paper, it helped me visualize the user journey quickly. I prioritized features that help users find the bouquets they want and customize them..
Digital wireframe
I prioritized reviews and ratings, and FAQ to help users clear their doubts about Glo Florist and its products.
I introduced personalization feature so that users can customize their orders. There is a recommended products section to help users explore similar products based on their browsing data.
Digital wireframes creen size variations
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of searching for a flower bouquet, customize the order and checked out, so the prototype could be used in a usability study with users.View Glo Florist website low-fidelity prototype
Usability Study: Findings
These were the main findings uncovered by the usability study:
1
Customization
The layout of customization was confusing to some users.
2
Billing address
Most users have a different billing address than delivery address.
3
Order Summary
Users need an order summary screen before placing order
Refining the Design
____
Mockups
The usability study revealed users’ confusion with the order customization. To guide users better, I grouped them by categories.
Early design didn’t have billing address input and order summary screen. After usability study, I added them both to avoid users’ frustration.
