Project Overview
Walsh’s Flowers is a local flower shop located in Richmond, VA. Walsh’s Flowers strives to provide the best bouquets for all occasions. They also offer bouquet delivery services at competitive pricing. Walsh’s Flowers targets customers that celebrate a special date or occasion with the gift of flowers.
Project Duration: August 2021 - November 2021
The Goal
Create a fast checkout and delivery service for bouquets for a local flower shop.
The Problem
Busy people lack the time to go into a local flower shop to pick out flowers for their loved ones.
My Responsibilities
Paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies and interviews, accounting for accessibility, and iterating on designs.
My Role
UX designer designing an app for Walsh’s Flowers from conception to delivery.
User Research
I conducted interviews and created empathy maps to understand the users and their needs. The primary group of users I identified were working adults who want premium bouquets delivered with ease and efficiency.
This user group confirmed initial assumptions but researched also that users were dissatisfied ordering from larger national (non-local shops) because the bouquets they received were subpar wilting when received. Challenges for users also included obligations and interests as well as the physical store’s operating hours as a difficulty and challenge to pick up bouquets.
User Journey Map
Paper Wireframes
Paper Wireframes
The iteration process was very informative to what I wanted to include on the homepage. I decided to do a grid layout with the flower display. I prioritized displaying the bouquets prominently under a header to start the easy and quick checkout flow.
Digital Wireframes
Homepage
For the homepage, I wanted to give the option of shopping bestsellers to help eliminate “analysis paralysis” for
users who didn’t have a specific bouquet in mind.
Shop Best Sellers highlights bouquets that other users loved
If users don’t see a bouquet they like they can browse all bouquets through the large CTA
Menu
I created a menu for an easy navigation experience and to help with assistive technologies. The design had a few
more iterations during the design process.
Created a menu for easy to access navigation
The “x” will return the user to the home page
Usability Study: Findings
I conducted two rounds of usability studies. 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 the mockups needed refining.
Round 1 Findings
Users want to order a bouquet quickly
Users want a filter or search option
Users want to add a note option for delivery
Round 2 Findings
Users want to save recipient information to their account
Users want an easy checkout flow
Mockups
Before the usability study, I didn’t have icons to accompany the menu options in the design. Since that caused accessibility issues, I added icons for each menu option and also rearranged the options for a better flow.
There wasn’t a search or filter feature on the “Browse All Bouquets” page. I iterated on both options but decided on using a flower filter for bouquets. I also added a color filter so users can have that filter option.
Accessibility Considerations
Used icons to help make navigation easier.
Used a color blind friendly palette with contrasting colors so it would be easy to differentiate buttons and actions in the app.
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Takeaways and Next Steps
What I Learned:
While designing the app, I learned that what I think is the best design isn’t always what the end user wants. Usability studies can help point out areas that are glaringly missing.
Next Steps:
1. I want to add a rating and reviews section so users can make more informed decisions on bouquet purchases.
2. I want to add a Same-Day bouquet pickup function to add more service options.
3. Conduct for usability studies to find more areas to improve upon.