top of page
FloGarden
UX/ UI Case Study
Product Design
FloGarden Prototype
The Challenge
Even larger flower delivery companies don’t have physical stores in all the states, let alone international. This leads to failed deliveries, product quality issues, and limited customer support.
The Goal
FloGarden locates local flower shops to minimize delivery/ pick up delays, provides direct customer to store communication, and takes into account the needs of sensitive products such as plants, which need specific environmental conditions to maintain quality standards.
Project type:
UX case study
My Role:
Product Designer
Date:
Oct 2022
Overview
FloGarden is an e-commerce, plant ordering app ideal for users planning on ordering plants for someone else, an occasion, or just want to spruce up their own space and need inspiration.
Responsibilities
User research, wireframing, user testing, prototyping
Research Summary
Houseplant demand surged 18% during the Covid pandemic.
7 in 10 millennials call themselves a plant parent.
Houseplants improve productivity by up to 15%.
66% of American households own at least one houseplant.
With the rise of social media platforms, a trend that has been popularized, are style guide aesthetic videos along with the terms “plant parent”. Buying plants and flowers are rising as a self care activity, beside just a gift for an occasion.
With the pandemic increasing WFH roles, users are looking for a way to spruce up their home since it doubles as a work and home space- “between 2019 and 2021, the number of people primarily working from home tripled from 5.7% (roughly 9 million people) to 17.9% (27.6 million people)” -US Census
"People with more plants in their workspace take fewer sick days." Companies have been spending more money to liven the work place environment with decorations, furniture, plants, etc. since it promotes positive morale, and boosted enthusiasm to want to come to work.
Top Issues
Flowers were never delivered
After promised delivery time
Order didn’t go through
General customer service- not specific to a store location- limited resolution options
Generic CEO apology and coupon code that didn’t work
Flowwow Reviews
Top Complaints
Need to enter address of recipient before looking at different flower shops
International payment options don’t always go through
Pain Points
Gift Options:
On competitor mobile apps, you need to input an address first, or it will only show shops for the user’s location, who might not be the recipient of the flowers.
Placing an Order:
Users reported difficulty placing an order in advance, and not receiving notifications about order confirmation/ status
Customer Service:
When users reported a problem, they would call customer support, who wouldn’t be able to do much to resolve the issue. They would receive a generic CEO apology email and offer a refund or a coupon code that wouldn’t work.
International Payment:
Users who didn’t have a US card couldn’t check out with the form being inaccurate, their payment being declined, or additional fees being added on without their knowledge at checkout.
1 800 Flowers User Reviews
Competitive Audit Highlights
1 800 Flowers:
Large business - Direct competitor - $$$
Does Well:
Menu navigation is well organized, so the user doesn't have to manually search
Offered same day delivery until 2:30 PM CT from my location
Needs Improvement:
Users have to pick an occasion to browse inventory
Home Page is busy with a lot of information along with pop ups
Many font and color styles making it hard to figure out where to focus
Radio button in the header along with menu, and cart was confusing as to what it does. Users can input a coupon code they hear on the radio there.
Urban Stems:
Medium business - Direct competitor - $$
Does Well:
Brands themselves as quirky, and cute and keeps it consistent with their language, images, colors, and other assets
Outstanding accessibility options- many ways to adjust the page to adjust to a user's needs
Needs Improvement:
Formatting issues- some awkward spacing and some buttons are very close together and small
Too many elements are pinned while you scroll so it's hard to focus on the catalog
The Enchanted Florist:
Small business - Direct competitor - $$$$
Does Well:
Very simple and straight forward- no pop ups or overwhelming use of color/ information
Needs Improvement:
Not all the links work
Awkward sizing- Example: Logo is too big, buttons are small
Limited features- Example: Interactive maps could help with customers inquiring about delivery rather than listing multiple zip codes within range
Amazon:
Large business - Indirect competitor - $
Does Well:
Large range of products from expensive-cheap, etc
Many filter options to help with narrowing a search
Needs Improvement:
Generic, copy and paste feel with descriptions- not specific to the product
Exposed filter options could be overwhelming- could be hidden and then revealed
Personas
Problem Statement
Kayla is a Business Intern at IBM who needs an efficient and timely way to order flowers for her office space because she wants to network with her coworkers and make a good impression through her ability to stay organized and boost office atmosphere.
Jared is a full time bar manager and part time student who needs gift inspiration and an easy ordering/ checkout process because he wants to show his wife his appreciation while maintaining his busy schedule.
Initial User Flow
Wireframes
First Usability Study
Prompt 1: You're looking for a floral arrangement, but not sure what to get. Where would you go to start your search?
Prompt 2: You see an arrangement you like. How do you checkout?
Key Takeaways for Improvement
It was observed that 2 out of 5 participants didn’t know where to click on the home screen to view style guides (banner or smaller images). This means that some users might be confused between the difference and if it takes them to the same place.
An insight is: there needs to be clearer directions showing the difference between the banner and small images.
It was observed that 2 out of 5 participants selected the browse icon to find a style rather than clicking on the style guide button. This means that the label “browse” might be misleading for some users.
An insight is: the name browse should be changed to maps or locate store.
It was observed that 2 out of 5 participants clicked on a smaller image to be taken to that specific style, but were placed in the "search all styles" section. This means that some users might be frustrated they picked a style they like on the home screen and have to relocate that style on a different page.
An insight is: if a user selects a style from one of the smaller images on the home screen, it should take them to a “locate that style near me” page and not the “search style guides” page.
HiFi Mockups
Sign in
Bottom nav buttons
Home Screen- Chose between browsing styles or browsing occasion.
Explore- Search through the catalog of shops by location, tag, color, etc.
Maps- Before was labeled Browse, but after user testing was changed to Maps to be clearer. Search by locations with filters- apps like Flowwow had complaints that users had to input a specific address to use the app, but here, they are allowed to input a general location.
Profile-View orders along with account status. After checkout, users are directed to the Active Orders page.
Checkout Process
Next Steps
Develop screens from the business's perspective- how to adjust modification options, inventory stock, adding tags, etc.
Research more international payment forms.
What I Learned
Certain words like “browse” might be confusing if that means looking at a map or looking through a catalogue. Language for icons/ CTA might mean different things to different users.
Redesigning the home screen and rearranging the information architecture was helpful for users having a more intuitive search process.
App Accessibility Considerations
Color contrast follows accessibility standards-
WCAG AA
All fonts are above 12 px
Most clickable fields are at least 44 px x 44 px
bottom of page