The Product:
Flower Bee is a florist shop that offers different varieties of flowers. The typical users are all who loves sending flowers to friends and family. Flower Bee's goal is to make sending flowers more fun, fast, and easy for all types of users.
Project duration:
July 2021 to August 2021
The Problem:
The available website does not have attractive bouquets. It needs thorough research to get one and sometimes not even one. There is no option to customize the bouquet.
The Goal:
Design a website to be user friendly by providing clear navigation and offering a fast checkout process.
The website will have the feature of categories with basic, designer and custom made bouquets. It will also have a filter of flowers and colors which will save a lot of time and energy and give the user a wonderful experience of sending bouquets.
My role:
UI/UX designer, UX Research
Responsibilities:
1. Conducting interviews,
2. Paper and digital wireframing,
3. Low and high-fidelity prototyping,
4. Conducting usability studies,
5. Accounting for accessibility,
6. Iterating on designs and
7. Responsive design.
Understanding the user
User research: Summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users who send bouquets always look for the perfect one for the occasion but it takes a lot of time and energy. Because, many other websites are overwhelming and confusing to navigate, which frustrated many target users. This caused a normally enjoyable experience to become challenging for them. They would love to have the app which will have an option for custom made bouquets along with designer and basics.
User research: Pain Points
Persona: Arish
Problem statement:
Arish is a software developer who needs to send a customized bouquet to his friend because he wants to make his best friend’s birthday more special.
User journey map
I created a user journey map of Arish’s experience using the site to help identify possible pain points and improvement opportunities.
Starting the design
Sitemap
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 make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper wireframe screen size variations
Because Flowerbee’s customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Digital wireframe screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow from browsing the item adding an item to the cart and checking out.
At this point, I had received feedback on my designs 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
These were the main findings uncovered by the usability study:
Refining the design
Website Mockups
Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was putting icons instead of images to be more precise and also giving the category a horizontal scroll which will make it easy for the users to select any category without getting confused.
Mockups: Original screen size
Mockups: Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile so users have the smoothest experience possible.
High-fidelity prototype
FlowerBee's hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.
View the FlowerBee high-fidelity prototype
Style Guide
Accessibility Considerations
Takeaways
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Final Product
