LAFLEOUR - Flower Shop App
Find your favorite flower easily and fit your needs by using the fast searching feature.
Holder
Personal Project
My Role
Research, UI, and UXDesigner
Duration
May. - July. 2021 (2 months)
Tool
Figma, Miro,
Adobe Photoshop
My work
User research
Persona
Information architecture
User flow
User journey map
Interaction design
Visual design
Usability testing
Work with
none
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.
Process
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
Understanding the user
- User Research
- Personas
- Problem Statements
- User Journey Map
- 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.
Findings
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.
‘’How can a relationship that is so new be so meaningful to me?’’
Demographics
Name:
Age:
Education:
Hometown:
Family:
Occupation:
Anderson Chen
25
Bachelor's degree
Taipei, Wanhua
In relationship, live alone
Sales of e-commerce company
Bio
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.
Goal
- 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
Frustrations
- 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
"She is my happy box, the reason behind my smiles"
Demographics
Name:
Age:
Education:
Hometown:
Family:
Occupation:
Susan Chung
38
Bachelor's degree
Taipei, Daan
Nuclear family
Work for the government
Bio
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.
Goal
- 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
Frustrations
- 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.
Scenario:
Nancy wants to buy a flower for her mother on mother's day, and she wants to shop it online
Goal:
Order a flower bouquet through the flower shop app
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.
Starting the design
- Flow Chart
- Paper wireframes
- Digital wireframes
- Low-fidelity Prototype
- 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.
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.
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.
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.
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
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.
Refining the design
- Refining
- High-Fidelity Prototype
- 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.
Before
After
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.
Before
After
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.
Before
After
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
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.
Point 1
Make sure every icon or image has alt text, and the screen reader can read the content in the correct order.
Point 2
Enable user to read with larger font size. Make sure the layout won't misplace with different font sizes.
Point 3
Provide text descriptions for each assortment of flowers that people with colorblind can easily distinguish from.
Going forward
- Takeaways
- 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.
Impact
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
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.
