Fleur UX | Laurel Wroblicky

UX Design

FLEUR

UX Design Case Study

Client

The fictitious company, Fleur, wants to increase user satisfaction making in-app purchases. While Fleur is a florist, it has two missions:

Encourage a spirit of giving
Increase the public’s knowledge and appreciation of plants, both in terms of care and historical significance

Problem Statement

Customers want to buy bouquets online for both personal and professional reasons. Depending on the recipient, occasion and other factors, customers want differing levels of support in the design and selection process. Users want an app that has features adapting to a variety of scenarios.

My role

UX Design
User research: personas, journey maps, interviews, surveys, affinity mapping
Competitive analysis
Wireframing
Prototyping
Usability testing
Responsive optimization
Content creation

AGILE DESIGN

Test

Design

Ideate

Define

Empathize

USER RESEARCH

PERSONA 1

Pain points

No ability to filter by colour, style, or scent
Can’t preview vases
Some flowers are messy (pollen, wilting petals)
Poor quality images
No options to deliver during business hours
Lack of options for a subscription service

Goals

Get noticed by her superiors to receive more responsibilities
Go above & beyond creating the perfect workplace environment
Order photo-worthy flowers for the office as well as for special events

Description

Priyanka is tasked with creating a pleasant workspace in a top marketing firm that has a budget for decor. Priyanka has taken the initiative to order bouquets, knowing that the appearance & scent will be attractive to coworkers as well as clients. With many other tasks to complete, she wants to quickly filter & preview which flowers will be a nice addition to the workspace.

Priyanka Patel

Design & Marketing Intern

About

Montreal

BA Communications

Intern

PERSONA 2

Pain points

No ability to filter by special occasion or meaning
Some flowers can be toxic
Can’t preview optional add-ons (cards & balloons)
Can’t schedule delivery to another recipient
Descriptions & cards are usually only in English or French

Goals

Show his appreciation for his mom and aunts who live far away
Show love for his wife and daughters on special occasions
Give meaningful gifts that bring joy & a personal touch
Manage his work-personal life balance efficiently

Description

Jorge’s business has grown substantially and is very successful. That said, he spends a lot of time in the office, managing the business. This leaves him little time to be with who he really wants to be with – his family. He never wants to miss an occasion to show them he cares, with flowers. He wants local delivery options for his wife as well as options that would deliver to his mom, who still lives in his hometown, Rosarito.

Jorge Morales

Restaurant Owner

About

Toronto

BA Business Administration

Entrepreneur

Jorge’s User Journey Map

Action

Task List

Feeling Adjective

Improvement Opportunities

Browse a florist online

A. Search for a flower shop online
B. Type in the intended delivery location

-Excited to pick out something
-Skeptical he will find anything that will deliver

-Clear tags and keywords to make the site appear in a search

Download app

A. Click on the link to download the preview app
B. Give the app requested access

-Annoyed if it takes too long
-Skeptical about giving access

-Small file sizes for quicker download
-Limit access requests

Search for a gift

A. Select the occasion
B. Filter results based on flower meaning and colour

-Overwhelmed by choices
-Relieved that there are many filters to narrow down choice

-Descriptive & good images
-Multilingual
-High contrast

Pick a product

A. Choose the desired flowers
B. Select quantity
C. Select add-ons

-Glad he can choose the flowers
-Frustrated by lack of Spanish card options

-Interactive preview based on the selected flora
-Multilingual card designs

Schedule delivery

A. Choose a time slot for delivery
B. Confirm they can deliver to an international address

-Unsure if his mom will be home for the delivery
-Relieved they will deliver to her address

-Allow delivery to be scheduled with the recipient or at a later time

Checkout

A. Enter billing & shipping details
B. Review order
C. Submit

-Excited for his mom to receive the flowers

-Accept multiple forms of currency
-Allow different recipient and customer info

COMPETITOR ANALYSIS

1-800 Flowers

1-800 Flowers offers every gift under the sun, including partner brand offerings

Their focus is on a wide selection and quick delivery time

Poor accessibility, overwhelming information, and messy layouts

Westmount Florist

Clean and elegant, simple navigation with good features like their flower reference guide

Lack of robust customization and filter options. No app, no design studio, no quiz, no chat, no extras

Needs

Ideated solutions

Information on allergens, pet toxicity, colour, meaning, etc.

An in-depth flower library and tags across products

Robust customization options including vases and add-ons

A studio allowing users full control over their designs

In-depth filtering options for bouquet selection

A quiz, search bar and advanced filtering while shopping

Flexibility regarding delivery and pick-up

Advanced delivery, pick-up and subscription settings

Multilingual and international support

Language and currency toggle

USER NEEDS

Multilingual

Delivery & Pickup

Advanced Filters

Design Control

Information

USER FLOW

I anticipated three main actions that the user would be able to take from the home page: browsing available bouquets, taking a quiz to filter the results, or designing their own bouquet in a digital studio. All of these paths would allow the user to eventually add other products to their cart and to checkout with a subscription service or as a one-time checkout.

LOW-FIDELITY WIREFRAMES

After sketching key frames on paper, I moved to Figma to create digital wireframes.

Prototype

USABILITY STUDY

I conducted a remote, moderated usability study with five participants to gather feedback before progressing.

Findings

Style Quiz

Users prefer a quiz that identifies their style and makes suggestions accordingly over a filtering quiz.

Chat

Some users would find a built-in chat with a professional helpful.

Modify Bouquets

Users are more likely to modify a pre-designed bouquet in the studio than start from scratch.

Featured Bouquets

Users are most likely to first click on the featured bouquets.

Browse All

The browsing architecture and design should be prioritized as it is used more than other features.

ACCESSIBILITY CONSIDERATIONS

Easy navigation and consistency

High colour contrast and consideration for colour blindness

Filter options that take diversity and ability into account; for example, including filters for scent and texture, for users who have visual impairments

Multilingual support and voice command enabled

Option to select a low bandwidth mode; featuring fewer images, colours, and complexity

Smallest breakpoint set to 360 pixels, ensuring a positive experience for people using the smallest devices

MAJOR SCREENS

I chose neutral, organic tones with the most appeal to a general population, veering away from heavy use of pink and purple often found in florist apps. The clean canvas allows the images to shine.

Home Screen

Featured bouquet

Navigation bar

Logo

Design Studio

Drag-&-drop space

Catalog

Sub-navigation

Editor tools

Add to cart

Browse

Chat with an expert

Quick filter selection

Advanced filter & sort options

Product selection

I created six possible results that provide a summary, suggested bouquet and more recommendations.

A button to edit a bouquet in the studio was added to the product page following a usability study.

Advanced filter and sort includes categories such as toxicity & allergens, origin, scent, and dry or fresh.

The shop page is first in the bottom nav. It offers a quick way to filter and an advanced option.

Some users mentioned they would rely on the company’s expertise. Hence, the option to chat with a professional.

The search bar is placed in the nav header on every page, offering users an easy way to filter results.

Taking into account user feedback, the home screen prioritizes featured bouquets.

The next button was removed from the question page to reduce the number of user clicks.

The quiz was adapted to discover users’ style, helping them make selections based on their taste.

HIGH-FIDELITY MOBILE DESIGN

PROTOTYPES

Desktop Prototype

Tablet Prototype

RESPONSIVE DESIGN COMPARISON

FUTURE DEVELOPMENT

Analyze the effectiveness of the app meeting Fleur's mission by measuring both the number of purchases indicated as gifts as well as the use of educational content
Utilizing the robust flower library, add a feature to send and receive digital bouquets. Analyze its reception and performance
Add event registration and ticketing for in-person demonstrations and tutorials at Fleur’s physical location

CONCLUSION

What I learned:
As this was my first UX design project, I learned a ton. My key takeaways I’d like to bring to future projects are:

User research helped me gain perspective and make my design better
Further exploring my software will improve my efficiency
I am a phytophile, maybe Fleur won’t be fictitious much longer...

Impact:
“I don’t generally buy a lot of flowers and usually not online, but if this app were real, I would totally use it!

I really like how much detail was put into it. It’s really easy to use and I feel like I’d learn a ton from the flower library. I also love how the quiz changed to discover my style.”

- Research participant