Case Study:
Bloomy Beauties’ Website Design
Project overview
The problem:
Available online flower shopping websites don’t have customizing options. The available online flower shopping websites have cluttered designs, inefficient systems for browsing through products, and confusing checkout processes.
The goal:
A reliable website to customize the flower arrangement that provides safe and timely delivery of flowers.
The product:
Bloomy Beauties is a florist shop that offers Customization of flower arrangements. The typical user is between 19-30 years old and most users are college students and early career professionals. Bloomy Beauties’ goal is to make shopping for flowers fun, fast, and easy for all types of users.
My role:
UX designer leading the Bloomy Beauties’ website design
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
Project duration:
November 2021
Understanding the user
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that the target users customize their orders from shops. The users want to be able to customize the flower arrangements online and receive them on time and in a way that keeps their beauty and freshness pristine. Many treat online flower shopping as a fun activity, however, many flower shopping websites are overwhelming and confusing to navigate, which frustrated many target users. Most of the users were disappointed by the quality of flowers received from online shopping. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of relaxation.
User research: pain points
Navigation
Flower shopping website designs are often busy, which results in confusing navigation.
Quality of flowers
Online shopping websites don’t provide high-quality flowers.
Delivery
Needs timely delivery of flowers.
Experience
Online shopping websites don’t provide an engaging browsing experience.
Persona & problem statement
Zoya is a busy fine artist who needs intuitive website navigation and search filters because they want online shopping to be stress-free.
User journey map
I created a user journey map of Zoya’s experience using the site to help identify possible pain points and improvement opportunities.
Starting the 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 make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper wireframes
Wireframes
Next, I sketched out paper wireframes for each screen for my website, keeping the user's pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Screen size variations
Because Bloomy Beauties 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. 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.
Wireframes
Screen size variations
Usability study findings
To start testing the designs, I created a low-fidelity prototype which you can view here.
This prototype was used in an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study
1. Reviews
Users need to view reviews about Bloomy beauties as they land on the homepage.
2. Buttons
Users need a more intuitive way to access filters and sort by buttons.
3. Cart
At the checkout screen, users didn’t have a way to edit the number of items in the cart.
Refining the Design
Mockups
Based on the insights from the usability study, I added reviews about Bloomy beauties on the homepage. This allowed users to find necessary information about the website.
Based on the insights from the usability study, I placed the filter and sort by buttons on the left for easy access and added necessary information that allowed users to edit their customization of flower arrangement.
I made changes to improve the site’s checkout flow. I added the option to edit the number of items in a user’s cart using a simple “+” or “-” option. This allowed users more freedom to edit their cart to add or remove items.
Accessibility considerations
1. Headings
I used headings of different-sized text for a clear visual hierarchy.
2. User Flow
I used landmarks to help users navigate the site, including users who rely on assistive technologies
3. Screen readers
I designed the site with alt text available on each page for smooth screen reader access
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 and tablet so users have the smoothest experience possible.
High-fidelity 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, as well as several changes suggested by peers.
View the Bloomy Beauties’ high-fidelity prototype
Going forward
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.
Next steps
2. Ideation
Identify any additional areas of need and ideate on new features
1. Testing
Conduct follow-up usability testing on the new website.