Bask to the top
LAFLEOUR - Flower Shop AppLAFLEOUR - Flower Shop App

LAFLEOUR - Flower Shop App

Find your favorite flower easily and fit your needs by using the fast searching feature.

7 min read


Personal Project

My Role

Research, UI, and UXDesigner


May. - July. 2021 (2 months)


Figma, Miro,
Adobe Photoshop

My work

User research
Information architecture
User flow
User journey map
Interaction design
Visual design
Usability testing

Work with


Project Vision

LAFLEOUR is a flower shop located in Taipei, they dedicated to provide all kinds of flower bouquet to fulfill the people’s needs. They hope the customer could receive the love and happiness through their flower. LAFLEOUR’s target customer are people who have limited time to go to the flower store and people who like to customize their flower.

flower shop app


Followed Design Thinking process throughout 2 months

I followed the Design Thinking process to determine how people buy flower bouquets based on their preferences. Starting from user research, I gather several user pain points. Next, I did the competitive audit and brainstormed multiple solutions. Then tested my ideas via usability tests and developed a high-fidelity interactive prototype based on those insights.


1. Empathize

2. Define
3. Ideate
4. Prototype
5. Test
Flower bannerFlower Banner

Understanding the user

  1. User Research
  2. Personas
  3. Problem Statements
  4. User Journey Map
  5. Competitive Audits

1. User Research

By reviewing secondary statistics, conducting the contextual inquiry, and setting qualitative interviews, I concluded the findings that profoundly affect the user experience.

Qualitative interviews: I interviewed six people ranging from age 24~51 across different gender. Most people have either interest or recurring requirements about buying flowers.
Contextual inquiry: I observed two people using the current app while searching and ordering flowers.

Pain Point 1

People spend a lot of time finding the flower that fits all their needs.

Pain Point 2

The flower images didn’t match the actual product quality when they arrived.

Pain Point 3

It takes a lot of time to talk with the staff by sending pictures back and forth.

Pain Point 4

Sometimes the store doesn’t have a specific kind of flower.

Pain Point 5

Some stores didn’t support multiple payment methods.


After gathering all users' pain points from interviews, user reviews, and secondary data from statistic websites, I form these findings that seriously affect the user experience.

Finding 1


Users spend 70% of their time Searching. Whether search within one shop or among different shop.

Finding 2


85% of people care more about the product price & quality of flowers.

Finding 3


40% of people worry that the actual flower won’t be the same as those online images.

2. Personas

I created two personas to represent our target users based on the information gathered from participants. One is for younger customers, and another is for mid-aged people.

Persona of AndersonPersona of Anderson

‘’How can a relationship that is so new be so meaningful to me?’’



Anderson Chen
Bachelor's degree
Taipei, Wanhua
In relationship, live alone
Sales of e-commerce company


Anderson is a usual office worker who lives in Taipei. He is a romantic person who likes to give flowers to his girlfriend to surprise her. However, every time he goes to the new flower shop, he needs to tell the staff about his purpose, budget, and preferences because some particular color or breed could be unavailable.

  • Buy the flower that fit the dating atmosphere
  • Pick the flower that is under the budget
  • Get the flower before dating
  • Using different payment methods to buy flowers
  • Sometimes it takes too much time to communicate the preference with the staff
  • Some particular color's flowers might be unavailable depending on different seasons
  • The flower shop is too far from the dating place
Persona of SusanPersona of Susan

"She is my happy box, the reason behind my smiles"



Susan Chung
Bachelor's degree
Taipei, Daan
Nuclear family
Work for the government


Susan is an administrative assistant working at a local university. When some teachers come to have a speech or hold a special event, she needs to prepare some fresh flower bouquets to appreciate them. Moreover, during the graduation period, she is responsible for ordering flowers used in the ceremony.

  • Buy the flower used in the ceremony (graduation, speech)
  • Using the minimal budget to get the maximum product quality
  • The flower shop can deliver the flower to the venue on time
  • Make sure the shop has the specific flower
  • When collaborating with the new store, it's hard to check their quality
  • Sometimes they are too busy, and the delivery might delay
  • She needs to spend a lot of time communicating with the staff to ensure they have the right flower

3. Problem Statements

To better focus on the critical problem, it’s better to transfer the
previous findings to one simple sentence.

Anderson is a busy worker who needs quickly select his favorite flower because he has no time to browse the product one by one.
Susan is a considerate assistant who needs to find a suitable flower within the budget because she wants to use it for specific events.

4. User Journey Map

Mapping user journey for a color-blinded person revealed difficulties she might encounter and visualized how she interacts with the flower shop app.

Woman, Nancy

Nancy wants to buy a flower for her mother on mother's day, and she wants to shop it online

Order a flower bouquet through the flower shop app

User Journey Map

5. Competitive Audits

Next step, I conducted a competitive audit to analyze the competitors’ strengths and weaknesses and search for opportunities for improvement. Also, I could make the market segmentation from other related products.

flower bannerFlower Banner

Starting the design

  1. Flow Chart
  2. Paper wireframes
  3. Digital wireframes
  4. Low-fidelity Prototype
  5. Usability Studies

1. Flow Chart

I outlined the flow chart that helped picture how users will move through the flower shop app before starting the design. By doing so, I could think about what decisions the user would make and what actions users would take in the app.

User Task: Use the flower shop app to find a suitable flower and quickly order it.

Flower shop app's flow chart

2. Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

Home page's paper wireframe
Home page's paper wireframe

I tried different compositions of the home page elements to determine which one could navigate the user smoothly and decide which layout best presented the flower information.

3. Digital Wireframes

After finishing the paper wireframe and choosing the basic layout of each page, I transfer those wireframes to the digital format by using Figma.

Search Page

Because users always have several needs when trying to search for specific flowers. Instead of letting them pick different categories every time, I make those options on the same page to accelerate the finding process.

Users can select several options at one time then press the search button.
Search pageRefine the product page for color-blinded people

Product Page

Ensure the users can easily find the essential information such as product image, price, review, and detailed description on the product page.

For color-blinded people, they could press the detail icon to see the exact assortments detail of each flower and their colors because some of them can't tell the difference if those flowers stay together.

AR view provides actual size for the user to measure.
The detail icon provides information on each flower type individually.
Refine the product page for color-blinded people

4. Low-Fidelity Prototype

The primary user flow of the prototype was searching and ordering the flower bouquet and could use in a usability study.

View the prototype: Low-fidelity prototype

Low fidelity prototype

5. Usability Study: Two Rounds

Through the usability study, I could identify problems in the design and learn more about users' preferences, behaviors, and needs. After each round of study, I redesigned my app based on users' opinions.

Method: Remote online moderated usability study (5 participants each round).
Research goals: I want to figure out what specific difficulties users encounter while using the main functions of the app, for example, searching, customizing, and ordering.
KPIs: Time on task, User error rates.

Round 1 Findings

Users can’t properly use the fast search feature.


Users prefer to search by product type.


Users want more delivery setting options.


Round 2 Findings

The information on purchasing status is unclear.


Users want to save the purchasing process.


Users want to add reviews and ratings easily.

Flower bannerFlower Banner

Refining the design

  1. Refining
  2. High-Fidelity Prototype
  3. Accessibility

1. Refining

Next, I redesigned certain elements and page layouts based on those findings from the participants.

Search Page

The initial purpose was to allow users to pick several options simultaneously. However, most users interpreted each option as a separate section during the usability study. Therefore, I redesigned the layout based on the principle of the common region, which made them more united.


Search page before redesign
Search page after redesign

Checkout Page

The usability study revealed confusion with the remark section. So, I add the name and content title to indicate where to fill out to fix this issue. Also, for someone who doesn’t need a card, I create a check box for them to cancel this service.


Checkout page before redesign
Checkout page after redesign

Ordering Progress Bar

Two out of five participants were confused about the word choice of the progress bar. Moreover, they thought the payment information was not clear enough to choose from.


Ordering progress bar before redesign
Ordering progress bar after redesign

2. High-Fidelity Prototype

Based on the refining mockup, I added more micro-interactions by using the animation provided by Figma to clarify the layer concept. Let them quickly understand where they could switch left or right.
In addition, users could now interact with pop-up & toggle buttons.

You can try the prototype down below~
or view the it through this link: High-fidelity prototype

High fidelity prototype

3. Accessibility Considerations

At this moment, I started to think about where I could improve and make the app more accessible for elders and people with disability.

Adding alt text to every image

Point 1

Make sure every icon or image has alt text, and the screen reader can read the content in the correct order.

Read with larger font size
Point 2

Enable user to read with larger font size. Make sure the layout won't misplace with different font sizes.

Provide text descriptions for each flower assortment
Point 3

Provide text descriptions for each assortment of flowers that people with colorblind can easily distinguish from.

Flower bannerFlower Banner

Going forward

  1. Takeaways
  2. Next steps

2. Next steps

If I could have more resources and time, I would keep iterating the design by focusing on these three points.

Point 1

Conduct more rounds of user research to find out if I overlooked any specific needs before.

Point 2

Conduct another round of qualitative usability studies to validate whether the pain points users experienced have been effectively addressed.

Point 3

Conduct a System Usability Scale study to ensure the iteration has improved the overall user satisfaction.

1. Takeaways

Although this flower shop app didn’t go live to the app store, I still learned a lot from it. I got familiar with the design thinking process and basic knowledge about user research.


The flower shop app speeds up the searching process and provides several methods for different users' needs. The current flower shop website and app have limited functions for searching that sometimes cost more time to use.

One quote from tester feedback:
"The app allow me the find the right product so quickly and I love to customize my flower through this app."
what I learned

What I learned

I learned the benefit of directly talking to the users. Through asking more about their feelings and observing their facial expression, I could gain more insights and feedback for my design. Moreover, the critical lesson I've learned is that the initial solution won't be the final one, and sometimes it will even cause more confusion for people to use. Therefore, every idea should be tested with the end-users to verify its effectiveness.