Florista
Florista is a premium online floral marketplace that provides a wide range of fresh flower bouquets that are perfect for any occasion. Florista platform allows customers to fully personalize their bouquets, offering them the unique opportunity to create a personalized gift that truly reflects their feelings and emotions. Florista is proud of delivering the highest quality products and services to its customers, ensuring their complete satisfaction with every purchase.
Project Overview
Goal
The role of me as a UX designer in the Florista project is to ensure that the customization process for the flower bouquets is user-friendly, intuitive, and convenient for customers.
Challenges
Users who lack knowledge or experience with bouquet customization may feel frustrated while using the Florista platform. They may feel overwhelmed by the various customization options or unsure about how to create a visually appealing bouquet. Users may not know where to start or what to consider when customizing a bouquet. A lack of guidance or helpful suggestions may discourage some users from completing the process.
Summary
I did qualitative and quantitative research during the process to help me have design that fit the needs of target users, reduces risks and avoids biases. Based on the information, I identified pain points and my personas were created that help me recognize the patterns of users behavior. Then, I identified Florista key competitors. afterwards I made use of big-picture & close up storyboard to visualize the user experience. Moving forward, I created Lo-Fi sketches. I conducted several rounds of usability tests to avoid edge cases and guide users to a happy path. The last but not least, I designed the Hi-Fi clickable prototypes.
Let’s take an in-depth analysis of the process
Emphasize
User Understanding
I conducted a survey to know what the product is and who are the target users then carried out interviews to collect in-depth information on user’s thought, experiences and feeling with some. I need to know what parts of bouquet ordering users enjoy and what challenges, frustration and pain points they face while they are in the process of customization.
Pain Points
Technical difficulties
or issues with the app's usability or functionality
Difficulty in understanding the customization options and how they work
Users lacks knowledge with customization for different occasions
Limited selection of flowers or customization options
Define
Persona
Florista persona was born based on the user's pain points.
Problem Statement
I put Emily as a representation of my users, front and center and wrote a problem statement to stablish my goals and define deliverables.
Emily is a marketing manager who needs a way to surprise her family and friends with a personalized bouquet when she is far away because she wants to stay connected with them and show her gratitude and empathy.
Username
User Characteristic
User need
Insight
Story board
I tried to visually describe and explore my persona’s experience with the product.
In big picture story board, I mainly focus on on Emilys’ needs, context and why the product will be useful to her.
Emily is frustrated because
she can’t visit her mother on
her birthday since they are
far away from each other.
She searches for an app that
offers to personalize bouquets and great delivery service.
In the app, Emily can chose
or customized her order with
gift items on her specific day
to deliver. She could also see how the bouquet looks.
She completes her order &
receives a track and trace
link.
She receives the demo of her fresh bouquet before delivery.
Emily is very happy talking
to her surprised mother on
her birthday.
Journey Map
I tried to make use of journey mapping to help me create an obstacle free path. It will definitely reduced the impact of my biases and helped me to identified improvement opportunities.
Information Architecture
The purpose of information architecture is to arrange and organize content so that it can be easily understood by the user, as well as to ensure that it is functional.
Ideate
While designing, ideation took a significant amount of my time, I had also a lot of fun! I generated many possible solutions, and ended up using a few of my original ideas.
Competitive audit
Florista needs to stand out from its competitors so in this stage, I identified some key competitors and reviewed their products to identify gaps in the market and opportunities to improve the user experience. It is really important to understand the market landscape and how other similar platforms are solving similar problems.
​
My research consist of several aspect such as:
​
-
What other online florist services exist in the market?
-
What are the unique selling propositions of these services?
-
What is the user experience like on these services?
-
How is the ordering and customization process different from one service to another?
​
​
Goal Statement
After conducting a thorough competitive audit I tried to make use of goal statement to describe Florista and its benefits for the user which provided me ideal solution for my design challenge.
Florista app will let users have a convenient bouquet ordering which will affect users who are interested to order bouquets online by letting users customize their bouquets confidently.
how the action will positively affect them
Product
who the action will affect
perform specific action
Low-fidelity sketches
Next step, I draw paper wireframes to identify the contents to include in the app and catch problems early, then I refined it many times.
Low-fidelity wireframes
I followed up the sketches by creating mid-fidelity wireframes in Whimsical, translating the sketches to a digital form and preparing for usability testing. By building the wireframes in grayscale, I was able to focus on the functionality of the features.
The wireframes went through a couple of rounds of iteration before the final content was developed. The major parts of the design, which are the solutions to challenges and customers' need, are indicated on the wireframes.
Prototype
I followed up the sketches by creating mid-fidelity wireframes in Whimsical, translating the sketches to a digital form and preparing for usability testing. By building the wireframes in grayscale, I was able to focus on the functionality of the features and accessibility (color independency).
The wireframes went through a couple of rounds of iteration before the final content was developed. The major parts of the design, which are the solutions to challenges and customers' need, are indicated on the wireframes.
Usability study
In order to reveal possible usability problems and evaluate the design, I did two rounds of unmoderated testing on my prototype. The following tasks were developed.
Finding: Round 1:
-
Continue as a guest bottom in Landing page
-
Select date and postal code prior to staring customization
-
Need more audience in selecting the arrangement style.
-
Users need steppers in checkout process
Finding: Round 2:
-
Time and date shows slots available for the Florista
-
Writing a note to florist to share concerns
-
Use of more icons for accessibility
-
Using AI to create a customized bouquet preview
Affinity diagram
I organized ideas into their natural relationships through affinity diagram.
I selected the most important ones. Then I revised the mid-fidelity sketches and went through next stage.
Iterations
Let’s apply style guide and finalize the content.
Mood board
Color palette
Typography
* Colors are all evaluated by Web Content Accessibility Guidelines (WCAG)
Components
Iconography
Test
User Testing
In order to reveal possible usability problems and evaluate the design, I did a testing round of my prototype. The following tasks were developed.
Reflection
What I have learned from this project
While designing the Florista application, I was full of the joys of spring. The project had a lot for me to learn and reflect. I learned that the first ideas for a project are only the beginning of the process and they are not going to last long because it is constantly changing through the user's feedback.
Focusing on the UI kit and design system development, including components, helped me improve the design workflow and keep current and future designers on the same page. Although there was an appeal to approach users with a high-fidelity prototype and all the details for testing and an understanding of the design’s intuitiveness, I conducted some of my usability tests on medium-fidelity prototypes. Users were more confident to give highly-critical feedback on an incomplete prototype. The early feedback helped me avoid redesigning and wasting a lot of time down the road. Moreover, in this project I also focus on accessibility because it is an essential part of creating an inclusive and user-friendly product
Impact
The app makes users feel like Florista really thinks about how to meet their needs. They are very satisfied with the process.
One quote from user feedback :
" The app made it so comfortable and fun to design my own bouquet! I would definitely be a fan of this app as it makes my bouquet very personalized.”
What I can Do next?
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed .
Add more flows such as user’s profile and subscription option.
Thanks for scrolling!
If you have any feedback, want to collaborate, need to elaborate more or just want to say hello, let’s get in touch!
Other Projects
