La Bohème
A Flower Arrangement Customization Flow For Trendy Florist
Project Overview
La Bohème, NYC's chic florist, aims to enhance its website by introducing a streamlined customization flow. The project focuses on providing customers a seamless online journey to personalize bouquets effortlessly, bringing La Bohème's unique in-store charm into the digital realm.
Project duration: 2 months
The Problem and Goal:
Problem:
-
Lack of a user-friendly customization flow for customers to easily create or select optimal flower options.
-
Absence of real pictures of ordered bouquets, diminishing the visual experience for customers.
Goal:
-
Create a distinctive web page setting it apart from competitors.
-
Establish a web page that stands out in the market with a distinctive online customization flow.
-
Include real images of ordered bouquets to enhance user confidence.
-
Cultivate a sense of community by making users feel intimately connected to the La Bohème experience.
My Role and Responsibilities
As a UX designer, I designed the app from conception to delivery. From performing interviews, I created both paper and digital wireframes, developed low-fidelity and high-fidelity prototypes, carried out usability testing, and ensured accessibility to final revising of the design. In the scheme below, I provided the list of the jobs I did for this project, and I will discuss the main points briefly in this presentation.
Target Audience and Research Results
I conducted research to determine the target market of our audience. They are people from the upper middle class between 18-75 years old who use online florist services at least a few times a year. After that, I conducted interviews
and created empathy maps, that clearly showed what our users need. Customers need customization
options to create special bouquets and need professionals’ help. They also want to see the real picture of the
bouquet before the delivery. Also, customers want to be remembered and have saved their information, including billing and past deliveries, to make the process faster and easier.
Persona: David
“Very busy to go shopping, need a fast and easy way to buy the flowers.”
Age:
Education:
Hometown:
Family:
Occupation:
45
Bachelor Degree
NYC, NY
Married, two kids
Finance
David is 45 years old and works in a financial firm in NYC. He is very busy and needs a fast and easy way to order flowers, mostly for her wife and family members, for a birthday, anniversaries, and other holidays.
Problem statement:
David is a busy professional looking for a trendy florist that can help him quickly and easily order the perfect flowers for any occasion. He needs a website that is easy to navigate with large, clear pictures, as he has vision problems that make it difficult to view small images. He also needs the ability to track his order and receive updates on delivery times, so he knows exactly when to expect the flowers. With a user-friendly website and reliable customer service, David can quickly and easily order the right flowers for any occasion.
Goals
●To have a fast and easy ordering process
●On time delivery
●“I have a vision problem, so I need the option to zoom in and see all the details.”
Frustrations
●“Always orders flowers but struggling if the billing info is not saved.”
●Feels frustrated if he can’t see the picture clearly or can’t order same-day delivery service
Persona: Samantha
“I want to make sure my order will look the same as in the picture in real life.”
Age:
Education:
Hometown:
Family:
Occupation:
30
Master Degree
NYC, NY
Married, one kid
Lawyer
Samanta is a lawyer in NYC; she is very busy and often sends flowers for her friends, especially when she can’t attend events such as birthdays, weddings, holidays, etc…
She is a perfectionist and wants to ensure the bouquet is perfect and delivered on time.
Problem statement:
Samantha's problem is that she can't find a florist in NYC that offers unique, high-quality bouquets with fast delivery. She needs a florist who can meet her expectations and give her the perfect gift for her special someone. That's why she needs a trendy florist with the perfect selection of flowers that can be delivered quickly and reliably. With a trendy florist, Samantha can find the perfect bouquet for her special someone and be sure that it will arrive on time and in pristine condition.
Goals
●Receive some help to create the perfect bouquet.
●Send me a notice by e-mail or phone if something is unavailable, and share the final look before sending it out.
●I wish the store could also deliver the order on the same day on holidays.
Frustrations
●Needs to schedule delivery a few days before to be delivered on time.
●Pictures are unrealistic, and on delivery, it doesn’t look like the one I ordered.
User Research: Main Pain Points
Delivery:
Same-day delivery service was available even on big holidays.
Customization:
Customization flows to be easy and gives options to create or offer something specifically for you.
Accessibility:
To have a great zoom to see everything clearly, also different languages from foreigners.
Final look:
Option to be able to see real pictures of the bouquet before it is delivered.
Paper Wireframes
After conducting interviews, extensive user research, and competitive analysis, create a paper wireframe with exceptional services in the market. Our unique offerings range from customized flower bouquets to subscription and membership options, all designed to cater to our customer's specific needs and preferences. We aim to provide an exceptional experience that exceeds expectations and makes our customers feel valued and satisfied.
I created three different sizes of paper wireframes for desktops, tablets, and phones. You can see the final wireframes in the picture below.
Digital Wireframes
I wanted to ensure that my design was user-friendly and easy to navigate. To achieve this, I put the customization button front and center to make it easy for everyone to find. This way, no one would miss out on this important feature, and they would be able to personalize their experience to their liking.
I have successfully enhanced our user experience by developing a unique customization flow with manual and automatic processes. I aimed to create a more personalized experience for our users while ensuring the process was easy to navigate. These two approaches have created an efficient and effective flow that will ultimately increase user satisfaction.
Low-fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was the Home page. The prototype is now ready to be used in a usability study.
Lo-Fi Prototype Here
Usability Study:
Research goals
The study aimed to measure the usability of the La Bohème website to check how easy and comfortable it was for users to use the page.
-
Determine if the user can complete the core task on the La Boehme web page without any issues.
-
Determine if features like customization and ordering of the flowers are easy to use.
-
Determine if the website has all the necessary information and it’s easy to navigate and use.
Participants
-
Participants are all individuals with online buying tendencies who like to buy flowers online at least a few times a year.
-
Two males, and 3 females between the ages of 25-60. One participant is a person with a visual impairment.
Methodology:
-
Unmoderated usability study
-
Location: United States, remote
-
Time: Sessions will take place May 17, during normal business hours
-
Length: 15-20 minutes
Key Performance Indicators (KPIs):
-
Drop-off rates
-
Time on task
-
Conversion rates
-
System Usability Scale (SUS)
Usability study: findings
Each participant provided valuable feedback that helped me better understand the user experience and identify areas for improvement. Through rigorous testing and user feedback, we gained valuable insights that have helped enhance the app's design and overall usability.
Round 1 findings
1. Put the Home button on the menu bar.
2. All occasions are put under the occasion button.
3. Occasions have a drop-down menu for more comfort.
Round 2 findings
1. In automatic customization flow, to put questions “to whom” and “from whom,” get rid of “Status.”
2. Put ribbon selection in the manual customization flow.
3. Button sizes are bigger and more accessible.
The usability study showed that organizing all occasions under one button would be more helpful. It would be helpful for the website to navigate it easier. Additionally, a drop-down menu would be an excellent way for the users to access all the different occasions quickly and efficiently.
We discovered through a usability study that the logo as the home page button confused our users. To make it easier for everyone, we have added a separate home button on the menu tab to improve user experience on our website.
High-Fidelity Prototype
The hi-fi prototype presents user flow for the login and checkout system, membership, and subscriptions. Also, there are Three different types of customization flow and ready flower bouquets. Option to add exclusive gifts to any bouquet. Flower designing services for different events, and many more.
Hi-Fi Prototype Here
Mockups
Summary
Accessibility Considerations
-
Colors on the app are accessible.
-
The app has a zoom-in function for people with vision disabilities. Also, more significant icons have been used for easier navigation.
-
There are different languages for customers from different countries.
What I learned
During the initial stages of the project, I came up with several ideas for the web that I thought would work well. However, as the project progressed, I realized that many of these ideas needed to be adjusted or scrapped altogether. This was a valuable lesson for me because it taught me the importance of flexibility and adaptability in UX design.
Impact
I simplify the app and make it easy for every customer to use. Now, the ordering process is streamlined and straightforward, making it easier for customers to complete their purchase. My UX design solutions make the app more effective and user-friendly for everyone.
Next Step
-
Integrate analytics and reporting tools to measure user engagement and identify areas for improvement.
-
Deploy the app and monitor usage to ensure it meets user needs.
-
Test the app on multiple devices and platforms to ensure compatibility.
-
Continue to optimize the app for improved performance and user experience.