The Florist
UX/UI Design
.png)
The Product
The Florist is a flower shop that specialized in farm-fresh-cut flowers and handcrafted bouquets. The usual user is between the ages of 25 and 50, and the majority of users are flower enthusiasts who are working people looking for flowers for gift giving or décor. The florist's mission is to supply its customers with flowers of their choice and style in a timely and convenient manner.
Challenge
Available online websites include crowded designs, ineffective product browsing systems, inability to modify items, and perplexing checkout processes.
Role
UX designer designing a responsive website for The Florist Company.
Tools
Figma, Adobe Illustrator, Adobe Photoshop, Adobe XD
Solution
Create a user-friendly The Florist website by providing easy navigation, the ability to create your own bouquet, and a quick checkout process.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
Duration:
November 2021 -December 2021
Design Process:
Empathize
Define
Ideate
Prototype
Testing
Understanding The User:
-
User Research
-
Personas
-
Problem Statements
-
User Journey Maps
Research Goals
-
Understand current market trends.
-
Identify the demographics of florist services.
-
Determine competitors and their strengths/weaknesses.
-
Determine people’s motivation to go to the florist shop.
-
Determine people's motivation to buy flowers online.
Market Research
I began the project by conducting market research to have a better understanding of the florist services. For further information, I gathered key themes from a collection of facts and statistics linked to the research goals/topic:
-
Demographics - The majority of clients are busy working grownups and upper-class households who buy flowers and bouquets for home décor or present giving purposes (ages 25 to 65), and who are unable to visit a florist shop on a regular basis.
-
Demographics - The majority of clients are busy working grownups and upper-class households who buy flowers and bouquets for home décor or present giving purposes (ages 25 to 65), and who are unable to visit a florist shop on a regular basis.
-
People in their 30s and 40s buy books on a weekly or monthly basis at a higher rate than any other age group.
-
However, in terms of raw numbers, persons in their 30s constitute the majority of those who prefer to buy flowers on a monthly basis, closely followed by those in their 40s and 50s.
-
When asked where they get their flowers, 73.8 percent answered they go to a florist shop.
-
People in their twenties buy flowers mostly for the purpose of gift giving.
Summary
To better understand the target user and their needs, I conducted user interviews, which I subsequently transformed into empathy maps. I observed that many of my target customers desire to buy flowers in a more convenient and efficient manner, saving them time. They desire easy access to fresh flowers as well as customized flower options. Most customers seek flowers for home and workplace décor, as well as for gift giving; many users buy flowers from florists on a monthly and weekly basis.
Interview
I performed interviews with 5 different interview participants to assist me to learn more about the consumers and gaining a glimpse of their experiences when it comes to buying flowers or bouquets. In order to obtain insight into people's experiences with florist shops and online flower purchases, as well as what crucial variables inspire them, I asked questions like:
-
How many times in a month do they buy flowers, where do they get them, and why?
-
For what reason do they buy flowers?
-
Where do people prefer to buy flowers and bouquets online or at a florist store, and why?
-
What flowers do they purchase, and how do they select flowers?
-
What flowers do they purchase, and how do they select flowers? Do they always personalize their orders at the florist show?
Empathy Map
After conducting the interviews, I took the transcripts of the interview and transferred them to post-its, and organized them into thinking/feeling, doing/saying, hearing, seeing, pain, and gain categories that form my empathy map.
Pain Points
Customization
The website does not allow you to customize the flower.
Navigation
The design and style of a website are complex, which leads to difficult navigation.
The checkout procedure is lengthy, perplexing, and time-consuming.
Checkout Process
User Persona
Based on gathered research, combined with insights from an empathy map, I created a persona that represents The Florist audience segment.
User Journey Map
Mapping Riya’s user journey revealed how helpful it would be for users to have access to the dedicated The Florist website.
Problem Statement:
"Riya is a busy corporate lawyer who needs to buy fresh flowers online to save time and wants to have flowers of her own style on her work desk."
Competitive Audit
I examined the numerous online florist services sites that sell flowers online based on their strengths and flaws to gain an understanding of how these companies affect their customers.
Starting the Design:
-
Sitemap
-
Paper Wireframe
-
Digital Wireframe
-
Usability Studies
Sitemap
The inability to customize the product and website navigation was a major source of frustration for consumers, therefore I utilized that information to design a sitemap and incorporated it. My aim here was to offer a clear category for the user to create or personalize the bouquet they want, thus I included the category of construct your own bouquets and provided smart information architecture decisions that would enhance overall website navigation. The framework I picked was intended to make things simple and straightforward.
Paper Wireframes
Following that, I drew paper wireframes for each screen in my app, keeping in mind the customer pain points regarding customizing, browsing, and checkout flow. The home screen paper wireframe alternatives to the right are concerned with maximising the user's customizing and surfing experience.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Refined paper wireframe
Paper Wireframe Screen Size Variations
Because 'The Florist' clients use a number of various devices to access the site, I began working on designs for extra screen sizes to ensure the site was completely responsive.
Mobile
Tablet Screen
Digital Wireframes
The transition from paper to digital wireframes made it simple to see how the redesign may solve user pain points and improve the user experience. A crucial component of my strategy was prioritising relevant button positions and graphic element placement on the main page.
Digital Wireframe Screen Size Variations
Mobile Screen
Tablet Screen
Low-Fidelity Prototype
I integrated all of the screens involved in the major user flow of adding an item to the basket and checking out to build a low-fidelity prototype. At this stage, I had gotten comments on my designs from members of my team on issues such as button placement and page structure. I made a point of listening to their input and implementing various ideas that addressed user pain points.
Usability Study: Parameters
Moderated Usability Study
Study Type:
India, Remote
Location:
5 participants
Participants:
20-30 minutes
Length:
Usability Study: Findings
I carried out two rounds of usability testing. The initial study's findings aided in the design process, from wireframes to mockups. The second research made use of a high-fidelity prototype to indicate which areas of the mockups needed to be improved.
Round 1 Findings
Round 2 Findings
Users need better and clear clues to customize the bouquet.
Users need clear clues to recognize the given flower option.
Users need an intuitive way to add personalized messages for each cart item.
Users want a choice of size option for each selected flower.
Users need filters options to buy any particular product.
Mockups
Early designs allowed for limited modification, but after conducting usability tests, I introduced colour options with each flower, allowing users to select one or more colors for each bloom.
Earlier designs enabled customers to add a personalised greeting to the whole purchase; currently, users may add a personalised message to each item.
The second usability study revealed frustration with not recognizing the given flower option with their name, so I've added pictures of each flower and filler and the second user wanted a size option for each selected flower so I have included a size option for each selected flower.
Mockups: Original Screen Size
Mockups: Screen Size Variations
Based on my previous wireframes, I incorporated considerations for different screen sizes in my mockups. Because consumers shop on a number of devices, I believed it was critical to optimise the browsing experience for a variety of device sizes, such as mobile and tablet, to ensure users had the best possible experience.
Mobile Screen
Tablet Screen
High-Fidelity Prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and incorporated design modifications made during the usability research, as well as other adjustments proposed by members of my team.
Accessibility Considerations
Used larger size font which Provided access to users who are poor eyesight.
Used icons to
help make
navigation easier.
Used detailed
imagery for bouquets and flowers to
help all users
better understand
the designs.
Going Forward:
-
Takeaways
-
Next Steps
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 discovered that even minor design changes may have a significant influence on the user experience. For me, the most significant lesson is to constantly focus on the genuine needs of the user while developing design concepts and solutions.
Next Steps
-
Conduct another round of usability testing to confirm that the users' pain concerns have been appropriately handled.
-
Conduct more user research to identify any new areas of need.
-
Determine any further areas of need and brainstorm new functionalities.
Let’s Connect!
Thank you for your time reviewing my work on The Florist app! If you’d like to
see more or get in touch, my contact information is provided below.
Email: sonalikanandan30@gmail.com