Case Study 1

Fleur & Historie

A floral preview app that provides an opportunity for users to explore different selection of floral arrangement through collection of inspiring bouquet combination images.

Project Overview

Product Description

Explore myriad selection of floral arrangement through collection of image to ensure users to feel confident in their potential purchases
Includes in-app mailing functions and message template for users to contact near-by store to if their desired floral arrangment are feasible
targets customer who wishes to purchase flower bouquets for a special event and everyday shopping experience.

The Problem

Difficulty in spending time choosing flower arrangement and contacting stores due to tight time schedule
Unconfident in their choice of floral purchase

Project Duration

July 2022 to August 2022

My Role:

UI/UX Designer

The Goal

Design a floral preview app that helps users to:

Explore variety of floral arrangement images
Implement function that allows users to complete purchase within the one-app

Understanding the Users

User Research

To understand the frustrations and concerns users have when deciding on a floral arrangement, I created an online questionnaire regarding the roses and thorns of floral purchasing experience in-person and online. The survey included respondents in their 20s to 40s. After conducting the online questionnaire, I have a deeper understanding of users need and determined two distinct user group that have potential using the designed app.

1 Selection

Claimed their lack of knowledge and creativity when choosing floral arrangement lead to unsatisfied and unconfident floral purchase experience.

2

Stated that their overloaded work/school schedule conflicts with the duration of flower selection that matches their ideal concept, negotiating price range, consulting with the florists staff, and searching for floral shops.

Time

Findings

1 From the questionnaire, there is a tendency among users to be unfamiliar with variety of floral arrangements, making it difficult to challenge or explore different theme of floral arrangements. In addition, I determined that the user's comfort level in consulting with florists affects significantly.

"I don't feel confident in the floral arrangement purchase, which took me a long time choosing."

"I want to give the recipient a special floral arrangement, but I can't seem to take on the challenge. So, I tend to buy roses just to be safe.

"I have a hard time choosing the most appropriate bouquet for the occasion when I'm not at an event. I try not to talk to the staff (i.e florists) because
I'm not a good at conversation "

2 Findings

"One of my frustrations is that my work schedule doesn't allow me to spend as much time on floral arrangements."

I discovered that deciding on a floral arrangement tends to take a long time and is a burden. Other parts of the process of finding, contacting, and negotiating with the florists after choosing a special and unique floral arrangement were found to be the hardest part

"I have a hard time deciding on a floral arrangement and going directly to a florist that can replicate it. I don't like buying floral bouquets very much because there are a tremendous number of tabs online as well."

Problem Statement & Solution

Problem Statement #1

How can we help users buy bouquets with confidence?

Enable users to explore a wide variety of floral arrangement

By being able to see a variety of floral arrangements, we created an image gallery page within the application to help users imagine and clarify what kind of bouquet they would like to have.

Implement categorization and filter function

Categorization function

By categorizing by event, we were able to save users time and at the same time introduce popular floral arrangements for that event, leading to peace of mind.

Filter Function

Included a filter function that allows you to specify your favorite flowers by type and color, and produce images of floral arrangements that fit only your criteria.

Problem Statement #2

How can users with tight work/school-related schedule to experience an efficient shopping experience?

Implement mailing function within the app

The app itself can save all the progress of searching and contacting stores and keep purchase process organized. Additionally, the mail function can include an in-built template to reduce time contacting.

Design & Refine Process

Low-Fidelity Prototype

During the iteration process, I focused on:

Simple navigation
Layout of the image galleries
Appropriate placement of buttons

Usability Study 1 Findings

Problems

Elements (buttons) were too small/big
Many misleading description that potential confuses user navigation
Insufficent resource about the nearby location floral stores.

Lack of white space
Hard to focus with too many images and boxes
No saving functions were available to track the process of saving

High- Fidelity Prototype

In the design, I was conscious of:

Adjusting size for button, shape, and texts
Ideating an way of easier and smooth navigation
Rewrote descriptions that can cause confusion
Implemented information on locations and stores (i.e links)
Added saving function

Usability Study 2 Findings

Problems

Frustrated with lack of confirmation signs when saving or sending mail to nearby store
Navigation buttons are confusing; only one way to access different pages. Finding pages itself was difficult

Too many iamges, can't focus on one
No message function where you can check sent or received mail
The whole application is not very easy to understand how to use

High- Fidelity Prototype 2

Added animation when saving images and sending emails
modified the navigation buttons to make them easier to access
Put the application’s general page and system at the top of the page
Added the function to change the layout of the image preview
Created a pack where you can check your messages

Improvements include...

See Prototype

UI Components

Takeaways and Next Step...

Step-by-step, steady awareness of designing for the user.
- I realized that the fixation of ideas and the importance of the very first foundation affect the efficiency while designing.
Importance of usability research
- By looking at design objectively, I was able to pursue more user-friendly design and overcome biases that
Created animations using Figma
- Able to see how hard and fun it is to design from draft to final animation.

Case Study 1

Fleur & Historie

A floral preview app that provides an opportunity for users to explore different selection of floral arrangement through collection of inspiring bouquet combination images.

Project Overview

Product Description

The Problem

Project Duration

My Role:

The Goal

Understanding the Users

User Research

1

Selection

2

Time

Findings

1

"I don't feel confident in the floral arrangement purchase, which took me a long time choosing."

"I want to give the recipient a special floral arrangement, but I can't seem to take on the challenge. So, I tend to buy roses just to be safe.

"I have a hard time choosing the most appropriate bouquet for the occasion when I'm not at an event. I try not to talk to the staff (i.e florists) because I'm not a good at conversation "

2

Findings

"One of my frustrations is that my work schedule doesn't allow me to spend as much time on floral arrangements."

I discovered that deciding on a floral arrangement tends to take a long time and is a burden. Other parts of the process of finding, contacting, and negotiating with the florists after choosing a special and unique floral arrangement were found to be the hardest part

"I have a hard time deciding on a floral arrangement and going directly to a florist that can replicate it. I don't like buying floral bouquets very much because there are a tremendous number of tabs online as well."

Problem Statement & Solution

Problem Statement #1

How can we help users buy bouquets with confidence?

Enable users to explore a wide variety of floral arrangement

By being able to see a variety of floral arrangements, we created an image gallery page within the application to help users imagine and clarify what kind of bouquet they would like to have.

Implement categorization and filter function

Categorization function

By categorizing by event, we were able to save users time and at the same time introduce popular floral arrangements for that event, leading to peace of mind.

Filter Function

Included a filter function that allows you to specify your favorite flowers by type and color, and produce images of floral arrangements that fit only your criteria.

Problem Statement #2

How can users with tight work/school-related schedule to experience an efficient shopping experience?

Implement mailing function within the app

The app itself can save all the progress of searching and contacting stores and keep purchase process organized. Additionally, the mail function can include an in-built template to reduce time contacting.

Design & Refine Process

Low-Fidelity Prototype

During the iteration process, I focused on:

Simple navigation

Layout of the image galleries

Appropriate placement of buttons

Usability Study 1 Findings

Problems

Elements (buttons) were too small/big

Many misleading description that potential confuses user navigation

Insufficent resource about the nearby location floral stores.

Lack of white space

Hard to focus with too many images and boxes

No saving functions were available to track the process of saving

High- Fidelity Prototype

In the design, I was conscious of:

Adjusting size for button, shape, and texts

Ideating an way of easier and smooth navigation

Rewrote descriptions that can cause confusion

Implemented information on locations and stores (i.e links)

Added saving function

Usability Study 2 Findings

Problems

Frustrated with lack of confirmation signs when saving or sending mail to nearby store

Navigation buttons are confusing; only one way to access different pages. Finding pages itself was difficult

Too many iamges, can't focus on one

No message function where you can check sent or received mail

The whole application is not very easy to understand how to use

High- Fidelity Prototype 2

Improvements include...

UI Components

Takeaways and Next Step...

Accessibility Features

For people with mobility impairments may have difficulty navigating the app. Additional supportive design elements should be considered

Website & Tablet Display

Website and tablet redesign to ensure the same experience on a variety of devices

Improved Search function

Could potentially implement image-reading search function to help users explore similar themes of desired floral arrangment

"I have a hard time choosing the most appropriate bouquet for the occasion when I'm not at an event. I try not to talk to the staff (i.e florists) because
I'm not a good at conversation "