Duration: August 2022 to September 2022
Role: UX&UI design
01 Project overview
Flower happiness is website for ordering bouquets by local florists. The typical user 20-60 years old, and most users are adults and career professionals. Flower happiness goal is to make ordering of bouquet enjoyable, quick and simple.
Available websites for ordering bouquets have cluttered designs, inefficient systems for browsing through products and complicated checkout process.
Design a Flower happiness website to be a user friendly by providing simple navigation and offering clear ordering process with special delivery options of one or multiple orderings.
02 Understanding the user
I conduct user interviews, which I turned in empathy maps to better understand target user and their needs. I discovered that many users would use website for ordering bouquets because they are busy and don’t have a time to buy it personally. Usually they buy bouquets for special occasions but most times they buy bouquet as gift for the birthday. However, many website for ordering bouquets are overwhelming, includes dark patterns, don’t include bouquet customization, flexible delivery and are confusing to navigate which frustrated many target users.
Persona 1: Sarah
Problem statement: Sarah is 32-years-old layer who has a busy lifestyle and needs efficient and simple way to order bouquets for her friends.
User journey map
I created a usery journey of Sarah’s experience of online ordering to help identify possible pain points and improvement opportunities.
03 Starting design
Difficulty with website navigation was a primary pain point for users,
so I used that knowledge to create a sitemap.
My goal here was to create a strategic information architecture decisions to improve overall website navigation. The hierarchical structure I chose was designed to make things easy and simple.
visual guide wireframe
Next I sketched out paper wireframes for each screen,
keeping the user pain points about navigation, browsing
and check out flow in mind.
The home screen paper wireframe variations to the right focuses on optimizing browsing experience for the user.
Stars were used to mark the elements that would be used in the initial digital wireframes.
To create a low-fidelity prototype, I connected all
of the screens involved in the primary user flow of
adding an item to the cart and checking out. Here I also used
component with multiple states for customization page.
At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Usability study: parameters
Usability study: findings
04 Refining the design
Based on the insights from the usability study, I made changes to improve the site’s browsing. One of the changes I made was adding the option to check the availability of the bouquet. This allowed users to know whether they don’t need to wait and can get the bouquet immediately.
To make the bouquet customization easier for users, I added a card with quantity box and price that allowed users to control the quantity of flowers and the price of bouquet.
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
05 Persponsive design
Mockups: screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users order bouquets from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
06 Going Forward
Our target users shared that the design for bouquet customization
was enjoyable, intuitive to navigate through, more engaging with the
images, and demonstrated a clear visual hierarchy.
What I learned
Even though I dive deep in secondary research and conduct some interviews before first wireframes I have learned that usability test is one of the most important step that enable to see real pain points for a specific product.