Case Study:
Le Petit Bouquet
Project Overview
The Problem
Online flower shops do not offer users a way to customize bouquets and they do not provide the advice that
in-person flower shops offer.
My role
UX designer leading the responsive website design from conception to delivery
The goal
Provide an easy way for users to navigate through the website and find a flower arrangement they are happy with.
Responsibilities
Conducting research, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
The product
Autumn Bouquet delivers fresh flowers right to your door. Users also have the ability to have a selection of bouquets picked for their specific needs and users the ability to customize their own bouquets.
Project duration
September 2021
Understanding the user
I started by interviewing 5 individuals who order flowers 1+ times a year, which helped me determine a target market. Through my Interviews I learned that many users enjoy the in person experience and find it difficult to find the perfect flowers for each situation.
User pain points
Customization
Users would like to be able to find or make the perfect arrangement
In-Store Experience
Users enjoy shopping in the store because it is often easier.
Too Many Choices
Users were overwhelmed by the options but were still sometimes disappointed with the outcome
Persona & problem statement
Kara is a busy woman who needs a website she can trust to order flower arrangements, because she can’t find any flower arrangements in her hometown for her boyfriend.
Starting the design
Sitemap
Paper wireframes
I quickly sketched many variations of paper wireframes in order to come up with lots of ideas. My main focus was determining the best way to display all the information on the page so users can quickly navigate through the website to find the best flowers for them.
Digital wireframes
Moving from paper to digital wireframes helped me to understand the user pain points within the design to improve the user experience.
Usability study findings
I created a low fidelity prototype, which you can view here, in order to start user testing. The usability study consisted of 5 participants. Here were the main findings:
1. Homepage
Some users were unaware of the ability to scroll on the homepage.
2. Homepage buttons
Users were unsure which button to press on the homepage to get started.
3. Parts of the site
Users were confused about the difference between the customize option and the hand picked selection option
Refining the design
Mockups
Based on the insights from the usability study, I made a few key changes to the design. I extended the image on the homepage to the full length of the screen and added an automatic scroll button. This helps users in two ways: they are able to see that the screen scrolls and moving the second button below the fold helps cut down on the confusion of which button to press. I also reworded the button for the "hand picked selection" section and the "customize bouquet" section so the buttons were easier to understand.
Accessibility considerations
1. Buttons
Clear labels for interactive elements that can be read by screen readers.
2. Color
Colors were chosen to meet accessibility standards
Responsive web design
Digital wireframes
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 adding the option to edit the quantity of items in a user’s
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.
1.
Conduct research on how successful the website is in reaching the goal to purchase flowers.
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.
2.
Identify any other opportunities for improvement.