Magnolia & Poppy
My Role: UX Designer
Date: October 2023
Duration: 4 Weeks
Prompt
Design a scalable website to order flowers from a high end local floral boutique.
Problems:
Difficult to navigate websites
Lack of customization online
Too many flower ordering site options
Overwhelming amount of options to look through
Solutions:
Simplified design for fast navigation
Highlight company values and customer service that sets them apart from the competition
Organize arrangements by theme and provide customization options to make each style unique to the customer
Research
Competitive Research
To begin my research I started by exploring flower ordering sites for local florists to compare key features and offerings. I discovered that high end florists, usually with three or more locations, relied heavily on large artistic imagery to provide inspiration and attract the users attention. Many local florists provided a unique story on what made them unique to their community.
Many florists provided minimal customization options, that did not allow for users to make their selections unique to their own budget and style preferences. I came to the conclusion that my design should have less options to make room for large inspiring imagery, but be able to customize each option by selecting different sizes, vessels, and colors.
User Interviews
Pain Points
-
The overwhelming quantity of floral arrangements make it difficult and time consuming to narrow selections.
-
Users would like to be able to customize arrangements they like to meet their budget and style needs.
-
Websites are difficult to navigate with too many buttons, and directions to go in.
Define
Age: 30
Location: Chicago
Occupation: Tech Sales
Persona - Julianna
Problem Statement:
Julianna needs a website to order customizable flower arrangements, because she wants to be able to send unique gifts delivered on time to her friends and family.
Juliana is a fashion lover with a hectic life in downtown Chicago. She has a big family and many friends to keep in touch with! She finds it difficult to find presents for everyone she cares about, but she really enjoys the thought of giving flowers to cheer someone up, regardless of the reason.
Goals
Find the flowers she wants to gift quickly and easily
Make gifting flowers feel special and unique
Frustrations
Flower deliveries sometimes feel impersonal
Endless scrolling through flower options
Ideation
Site Map
Rapid sketching of paper wireframes allowed me to explore many design solutions quickly. I added stars to all design elements that I felt were a must need to include in my final layout.
Test
Before Usability Study
Usability Study
After Usability Study
I eliminated the need to scroll during the checkout process so that the user has clear visibility to all of their information at once.
Before Usability Study
After Usability Study
I added arrows to the image carousels to help users better understand how to scroll through images.
High Fidelity Prototype
Design System
DESKTOP
Home Screen
inspirational imagery
highlight of services
hamburger menu
MOBILE
marketing of mobile app
shopping highlights
shop from instagram
DESKTOP
Shopping
inspirational imagery
hamburger menu
MOBILE
Letting the product be the main focus
DESKTOP
Product Details
Images of different size/vessel options
customization of product to meet user preferences and budget
hamburger menu
MOBILE
other similar product suggestions
DESKTOP
Cart
Simplified checkout eliminating the need to scroll
making the user aware of how many more steps they have to checkout
MOBILE
Accessibility Considerations
1
I provided clear hierarchy in my designs and used labels next to icons to make my designs accessible through screen readers.
I evaluated the level of contrast and hierarchy in my designs for users that are unable to rely on color.
2
I evaluated text size and readability for users with different visual abilities.