Flower 1 weB
Ordering and checkout features
Ordering and checkout features for the flower shop website.
Overview
Flower 1, a local florist in a bustling metropolitan area, sought to address the challenge of catering to customers with busy schedules who found it difficult to purchase flowers during traditional business hours. This case study focuses on the design of Flower 1's web platform, aiming to create a seamless online experience for customers to order flowers at their convenience, thereby boosting revenue outside regular business hours. Additionally, the online platform introduces a gifting option for long-distance orders, enhancing the florist's reach and services.
Role
UX and UI designer
Designing the ordering and checkout features for the Flower 1 website from concept to delivery.
Responsibilities
Duration
June, 2023
Tools
Preview
Understanding the user
Summary
My part-time experience at a local florist provided me with valuable business insights. Through observing customer traffic and conducting interviews, I identified uneven patterns during business hours, resulting in long wait times and abandoned purchases at peak hours. Many customers, constrained by busy work schedules, couldn't visit the store during weekdays. To address this, I created 1 persona to present the majority of users based on my findings.
Persona & User journey map
Problem statement
​Daisy is a professor who would like to purchase flowers online, because she is too busy to visit the florist during the opening hours.
Pain points
-
Customers can’t get to the florist during the opening hours.
-
Customers can't deliver flowers to people who are far apart.​
Solutions
-
Set a pickup locker outside the florist, so customers could pick up the flowers outside of the business hours.
-
Cooperate with nearby convenient store, so customers could pick up the flowers outside of the florist business hours.
-
Arrange delivery for phone call orders
-
Build an app for online order and deliver flowers to customers
Best solution
Solution 1: It could be costly to arrange a locker Flowers could decay quickly, when stored in lockers.
Solution 2: Convenient stores might not have enough space or the low temperature to store the flowers. Convenient Stores might also close early.
Solution 3: It might be hard to communicate the customer needs through phone without seeing flowers.
Solution 4: At first it might be costly and time consuming to build the website. But once the system is mature, the digital system could be convenient for florist and customers.
Sitemap
Low-fidelity design
Usability studies
I conducted two rounds of unmoderated usability studies online. Findings from the first study helped guide the designs from wireframes to mockups. The first study was conducted with lo-fi prototype, and the second study used a high-fidelity prototype.
Round 1 findings:
-
Users need more information about different sizes of the product.
-
Users sometimes have a hard to come up with suitable greeting card content. - AI content generation.
-
Users would like to know more details about delivery
Round 2 findings:
-
The website it's a bit to bring to look at. - I added another soft colored background.
-
The website it's a bit too crowded with all the content. - I added more paddings, so the website is more spacious.
High-fidelity design
After the analyzing the findings from the usability test, I iterated the prototype and turned it into hi-fi prototype.
UI design library
Choosing green for the florist website is because green is the color of leaves and stems. It harmonizes beautifully with flowers and acts as a neutral backdrop. Green also provides balance and timelessness to floral arrangements.
Key mockups
Accessibility considerations
User happy path
Results
Takeaways
Impact:
The florist website has made it easier for busy customers to buy flowers even when the physical store is closed, reducing crowding during after-work hours. This has resulted in increased sales due to the website's longer operating hours and the ability to send flowers to loved ones who are far away.
What I learned:
I learned that there are a lot of details to consider, even at a feature we use online all the time, such as delivery details, and size details. Also AI, the new technology we are introduced lately, could also be beneficial for the traditional industries around our daily lives.
Next steps
-
Design the profile and order history features.
-
Conduct more user research to determine any new areas of need.
