Sweet Thoughts Flower Shop
Responsive
Website
Design
Project Overview
The Product
Sweet Thought Flower Shop is an online flower ordering website for a local florist who offers beautiful flower arrangements for all occasions. Their goal is to make online flower shopping easy and fast for all types of users.
Project Duration
March 2022
The Problem
Busy workers lack time to browse and pick up flowers from stores or live far to deliver by hand. Most available flower ordering websites have cluttered designs and are confusing.
My Role
I worked on this project as an independent UX Designer.
The Goal
Design an intuitive website to order and deliver fresh flowers to loved ones or for themselves with simple, easy and clear navigation and checkout process.
My Responsibilities
User Research, conducting a competitive audit, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
Understanding the user
User Research Summary
I conducted interviews to understand the users I’m designing for and their needs. Many users think that fresh flowers are the perfect gift to give to their loved ones or for themselves. I discovered that most users are either busy to go to local stores or living far from their loved ones to deliver flowers by hand. However, many flower ordering websites are overwhelming and confusing to navigate, which frustrated many target users.
User Pain Points
1
Most local florists don’t have an online flower ordering website with the delivery option
2
Navigating through most websites are confusing and frustrating
3
Most websites checkout process was complicated and confusing
Empathy Map
Persona and Problem Statement
Adrien is a student who needs an intuitive website to order and deliver flowers to their family because they are living far from home.
“Family is not an important thing. It’s everything”
Goals
●Find a flower ordering website that is easyto navigate
●Filters to make it simple to sort by price or ocassion
●Need delivery options
Frustrations
●Selecting the right flowers is hard
●He lives far to deliver flowers by hand
Adrien is a 21-year-old student, studing Bachelor’s degree in Architecture, living away from home. He love his family and want to send flowers on ocassions like parents birthdays or anniversary. He is overwelmed by too many options on the website. Finding hard to select right flowers for his family for right ocassion.
Naina is a busy professional hairstylist who needs a simple online flower ordering place because they have no time to go to stores to buy flowers.
“Flowers always make people better, happier; they are the medicine for our soul ”
Goals
●Easy flower ordering and checkout process
●Easy website navigation
Frustrations
●No time to go to stores to buy flowers
●Flower ordering process is hard and confusing
Naina is a 39-year-old professional hairstylist with her own salon. While running a business and being a hairstylist, she is very busy.
Naina loves flowers. She thinks having flowers in her salon makes her guests feel happy and relaxing. She is frustrated that she do not have enough time to go to store and buy flowers for her salon
User Journey Map
Mapping user journey revealed that having a dedicated website with delivery option and easy navigation is very useful for a florists and their customers.
Starting the Design
Sitemap
I created this sitemap based on the pain points of the users.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper Wireframes
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframe.
Refined paper wireframe of the homepage
Desktop
Paper wireframe for screen size variations
Because Sweet Thoughts Flower Shop customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Phone
Tablet
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Desktop
Phone
Navigation Menu in page header allows quick access to useful pages
Static Hero Image above the fold grab visitors attention
Hamburger Menu helps keep page clear and uncluttered
Tablet
Low-fidelity prototype
I created a low-fidelity prototype by connecting all of the screens involved in the primary user flow of adding an item to the cart and checking out.
Usability study: findings
I conducted two rounds of usability study. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of mockups needed refining.
Round 1 findings
1. User wants to check if the flowers will be delivered to a desired location, before they start browsing
2. User don’t have a clear way to pre-fill the details for easier checkout process,
Round 2 findings
1. User wanted options to customize their order
2. Before adding item to the cart, users want an option to make that order recurring monthly or yearly
3. User wants an option to add personal message along with the bouquet
Refining the Design
Mockups
Based on the insights from the usability study, I made changes to improve the home page and checkout process.
I added an option to check if the order will be delivered for desired location before the user starts browsing.
Before usability study
After usability study
I added an option to customize the order and subscribe.
Before usability study
After usability study
Accessibility considerations
1
I used accessible typography to create visual hierarchy in the design
2
I used color contrast between the text and the background
3
I used landmarks to help navigate easily to various sections of a page
Mockups: Screen size variations
Desktop
Tablet
Phone
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flow same as the low-fidelity prototype and included the design changes made after the usability studies.
Going forward
Takeaways
Impact:
Our target user shared that the website was well designed, functional, easy to use and engaging.
What I learned:
Creating a product that is functional, is as important as making it look beautiful.
Next steps
1
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2
Conduct more user research to determine any new areas of need.