Petals
Responsive Website
Petals is a responsive website design for a flower delivery service based in Toronto, Ontario.
Tools
Adobe XD, Adobe Photoshop, Adobe Lightroom
Role
Conducted preliminary research, created personas, created paper wireframes, created digital wireframes, designed a low-fidelity prototype, designed a high-fidelity prototype, conducted usability testing.
UX Design Approach
Project Overview
The Problem:
Available online flower delivery services in Toronto have poor user experiences and unappealing designs.
The Goal:
Design a responsive website for a flower delivery service that is
-
User friendly, by providing clear navigation and checkout process.
-
Simple, by curating a streamlined selection of bouquets to ease the decision process for customers.
-
Visually appealing, by implementing design principles and trendy visual elements.
User Research
Preliminary Research
User research included a combination of primary and secondary research methods. The primary research included conducting short interviews with potential users, including individuals who had previously used flower delivery services and individuals who have purchased flowers in Toronto. These interviews aimed to gather insights about their motivations, pain points, and expectations when using such services. Additionally, secondary research was conducted to gather relevant information available online, such as market trends, competitor practices, and user reviews of existing flower delivery services.
Flower Delivery Services: User Pain Points
-
Navigation: Existing flower delivery service websites in Toronto are often quite busy visually, which results in confusing navigation.
-
Too many Choices: Many florists give users an abundance of options leaving some users feeling overwhelmed or unsatisfied with their final choice.
-
Visual Experience: Existing florist websites in Toronto are not aesthetically pleasing and do not provide an engaging browsing experience.
Persona
Problem Statement: Alex is a busy professional who needs a simple and efficient way to order fresh flowers for their home or office because they value convenience and don't have the time to visit a physical florist.
Starting the Design
Sitemap
Difficulty with website navigation, and being overwhelmed by choices were two of the primary pain points the Petals website seeked to address. The sitemap was designed to avoid these issues and create an information architecture that would improve navigation and ease the process of selecting flowers for customers.
Design Activity - Crazy 8s
I began sketching frames for Petals with the crazy 8 design activity.
Paper Wireframes
Next, I sketched numerous paper wireframes for each page I envisioned for the Petals website to experiment and explore various ideas. While drawing out these different screens I kept in mind the user pain points I wanted to address with my designs.
Screen Size Variations
Petals users were expected to access the site from different devices, so I also began creating designs for mobile screen sizes to ensure the site would be responsive.
Digital Wireframes
Usability Study
Study Type
Location
Participants
Length
Moderated usability study
Remote
5 participants
10 - 15 minutes
Usability Study Findings
The following insights were drawn after conducting usability testing on the lo-fi prototype.
-
Remove Events Page: Originally a section of the Petals site was dedicated to catering flowers for events, such as weddings. However this section confused some users, took away from the desired simplicity I had envisioned for the site, and ultimately wasn’t necessary for my target user.
-
Delivery Notes: Some users expressed concern when they were unable to leave a message to the delivery driver to provide additional delivery instructions. This was addressed in the checkout screens.
-
Checkout: Users were unable to modify their order in the checkout screen. The ability to remove items and change their quantity was added in subsequent checkout screen iterations.
Refining the Design
Design System
Mockups Before & After Usability Study
The events page was removed and purchase choices were further simplified to three bouquet and three arrangement options.
.png){kind=small}
The ability to edit item quantities, as well as add additional delivery instructions were added to the checkout screen.
High Fidelity Prototype
.png){kind=small}
Homepage
When users arrive at the Petals website the trendy aesthetic and simplistic design immediately sets it apart from other florists available in Toronto. Visual design elements and the simple navigation menu create a pleasant browsing experience.
Shop Flowers
In the Shop Flowers page users are presented with three bouquet sizes (petit, full and grand) and three arrangement sizes (petit, full and grand). Users can click any item from this selection to view more details and add them to their cart.
Checkout
When a user is satisfied with their selection they can visit their cart to checkout. Here they enter shipment and payment information and place their order.
Accessibility Considerations
While designing the Petals high fidelity prototype I kept the following accessibility considerations in mind.
-
Headings with different sized text were used for clear visual hierarchy.
-
Foreground and background colours tested and passed WebAIM contrast checker.
-
Intuitive and consistent navigation structures to facilitate ease of use and help users with cognitive disabilities effectively navigate and understand content.
Additional Screen Sizes
.png)
.png)
.png)
.png)
Takeaways
Impact: The Petals responsive website is an effective solution to the overwhelming complexity and poor user experience in existing flower delivery services in Toronto.
What I learned: Throughout this project, I gained a greater appreciation towards the importance of inclusive design, such as using proper colour contrast and hierarchical headings.
Next Steps:
-
Conduct a moderated usability study on the high fidelity prototype to complement the unmoderated study that was conducted with the low fidelity prototype.
-
Revist and refine certain visual design elements including typeface and colours.
-
Continue to iterate and update designs as new insights are discovered.
