Deliverable: Responsive website for florist | Duration: December 2022 - January 2023 | Role: UX designer designing a responsive website from conception to delivery.
The problem
Busy professionals lack the time to create a sentimental gift for family and friends.
The goal
Design a responsive website that will allow the user to quickly choose or create a unique bouquet with a personal touch.
Interviews were conducted and empathy maps were created to understand the users and their needs. A primary user group identified through research was busy professionals who don’t have time to go to the florist and browse through flowers to create a custom bouquet and see what it looks like before purchasing.
User research identified three main pain points:
Time. Working professionals are too busy to spend time browsing through flowers at the florist.
Visualization/Accessibility. Online ordering typically doesn’t provide visual opportunities to explore custom floral combinations to offer a personalized touch.
Information Architecture. The number of floral combinations can be overwhelming, difficult and tedious to navigate or explore.
User research
I focused on strategic information architecture decisions that would simplify the overall navigation. Offering multiple entry points through searching or browsing flowers or occasions would expedite the user’s journey.
Sitemap
The thought process considered varying approaches – from a manual search, guided browsing, quick picks and popular items to help the user to achieve their goal of purchasing the product quickly and easily.
Paper wireframes
Paper wireframe
screen size variation(s)
The goal was to offer a responsive alternative that would reduce the amount of vertical scroll and still offer the ability to facilitate the user journey in a tablet and mobile format.
Having multiple entry points, between the menu and on-page options for popular flowers, occasions and price points, along with a prominent feature of a upcoming holiday or occasion, would allow the user to move through the journey more quickly.
Digital wireframes
Digital wireframe
screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of searching for a flower, selecting and adding a bouquet to the cart.
Usability study findings
An unmoderated usability study conducted with the low-fidelity prototype discovered the following:
Quick picks: Options to create a custom bouquet are nice, but pre-made options are quicker and easier to purchase.
Options are best: Having the choice to search or browse facilitates the user journey across a wider audience of users.
Mockups
Users appeared to favor having quicker options to choose from in lieu of a custom bouquet creation process, so having prepared selections more prominent would expedite the user journey.
Original screen-size mockups
Screen-size variations
My high-fidelity prototype followed the same user flow as the low-fidelity prototype, and included the design changes made after the usability study.
High-fidelity prototype
Inserted lightbox capability to allow enlarged views of product images.
Used both images and text along with detailed descriptions of products in alt text for ease of use with screen readers.
Incorporated iconography for occasions to assist non-English speakers, and a full-site translation is available for Spanish speakers.
Accessibility considerations
Takeaways
Impact: Our target users shared that the design provided different methodologies that allow a broad scope of users a simple and quick process to find and purchase a beautiful arrangement.
What I learned: I learned that providing multiple options up front that are organized and clearly defined can make it easier and quicker for a user to proceed through a journey to reach their goal.