Type: Case study - Mobile app
Duration: August 2022 to September 2022
Role: UX&UI design

Flower happiness

Adobe XD

01 Project overview

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.

The problem

Available websites for ordering bouquets have cluttered designs, inefficient systems for browsing through products and complicated checkout process.

The goal

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

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

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

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

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.

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

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.