Flower happiness

The product

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.

User research

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.

Pain points

Site map

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.

Digital wireframes

LO-FI prototype

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.

🖙 LO-FI prototype

Usability study: parameters

Usability study: findings

Mockups

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.

Final mockups

HI-FI prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.

🖙 HI-FI prototype

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.