flash coffee 3/4 :
how to restructure item customisation page
PROJECT UNDER
NocNoc.com
DURATION
3 weeks
OVERVIEW
After we launched an additional note open-ended text field under item level for a few months, we gathered data on our customer's additional request and their expectation to see and choose for making their own drink through the app.
In the meantime, the operation team aimed to reorganize and standardize the item variant for all countries but still give authority to each market to choose depending on the country’s culture and requirements.
In the meantime, the operation team aimed to reorganize and standardize the item variant for all countries but still give authority to each market to choose depending on the country’s culture and requirements.
it is time for the design team to propose a new design for the item customization page, to improve the customer experience, cover all needed options and make it easier and fulfill customer needs.
OBJECTIVE
- Help users easily focus on the drink information and all selected options at a glance by displaying them as a summary.
- Users can decide to change only the option they want to, reduce time spent, and also reduce mistakes by choosing the wrong variant option.
- Users can see the total price more clearly, and remove using text on a red background to increase positive feelings when seeing the price, and also help them to understand where the total price comes from.
HOW DID I START THE PROJECT
UNDERSTANDING THE PRROLEM
This project was begun by analyzing the current design and I found that...
![]()
Open-ended Responses from Singapore Survey in May 2022
We got feedback from active customers regarding the ordering experience when they place an order through the app. This could potentially show that the variant we provide on the app does not cover all the needed options that customers expect to see and want to select.
![]()
Item notes gathered data summary, till aug 4 2022 - ID, KR, TH
![]()
![]()
![]()
- The top navigation with the category name is not useful for customers. They already stay on the item page and focus on customizing the item variant, not a category name. Currently, to see the drink name, the user needs to scroll back all the way to the top.
- The current design supports only single selection which does not support the multi-selection option variant that will be launched shortly.
- The mandatory variant (the default variant selection that already comes with the item) and optional variant (the new extra variant that the user can add to the item) indicators are not clear to the user, it is not obvious that what can be changed or what can be added on.
- The total price which is the final price of an item is not obvious if compared to the item-based price.
- Users need to scroll down until the end to see and confirm the selected variant.
Open-ended Responses from Singapore Survey in May 2022
We got feedback from active customers regarding the ordering experience when they place an order through the app. This could potentially show that the variant we provide on the app does not cover all the needed options that customers expect to see and want to select.
- Users cannot select sweetness level, drink temperature, ice level, alternative sugar for diabetics, takeaway items (straw, paper bag), etc. through the app.
Item notes gathered data summary, till aug 4 2022 - ID, KR, TH
INFORMATION ARCHITECTURE
To illustrate what we sell in all markets, I listed out all the drink and food menus to check the similarity of category names and item variants across all markets.
![]()
The existing variants, and the possible new variants per country based on product perspective.
We found that there are some redundant variant options that use differently in some markets, so we asked for their feedback to understand the local market first before we defined and standardized the new variants.
![]()
Grouping variant information and creating information architecture
![]()
The existing variants, and the possible new variants per country based on product perspective.
We found that there are some redundant variant options that use differently in some markets, so we asked for their feedback to understand the local market first before we defined and standardized the new variants.
Grouping variant information and creating information architecture
COMPETITOR RESEARCH
DESIGN EXPLORATION
Design Concept
![]()
Easy to see all variants with vertical scrolling. However using non full-width photo could change mood and tone of the app.
![]()
Hard to control the space if we want to use scrollable 2 columns, the selected variant options are not that obvious and can not support if the variant name is long.
![]()
Can support a small phone screen, and can see all mandatory variant options easily at a glance but if using a modal, need to define how to control the modal’s height if the content is long.
![]()
Showing all the based prices, additional prices, and total prices at the right side of the screen, easy to digest. However, the drink size is not obvious enough.
- Make the selected item name more prominent.
- Users can see all the default mandatory variants at a glance
- Users can decide to change and focus just on the option they want to change
- Each variant option name is easy to understand
- Users can see the additional price and the final item price more clearly
- Allow the user to add a note to collect data for future improvement
- The variant option covers the user's need
Easy to see all variants with vertical scrolling. However using non full-width photo could change mood and tone of the app.
Hard to control the space if we want to use scrollable 2 columns, the selected variant options are not that obvious and can not support if the variant name is long.
Can support a small phone screen, and can see all mandatory variant options easily at a glance but if using a modal, need to define how to control the modal’s height if the content is long.
Showing all the based prices, additional prices, and total prices at the right side of the screen, easy to digest. However, the drink size is not obvious enough.
USABILITY TESTING
After many improvements, everyone agreed on the idea concept and design direction. I decided to do the usability testing with internal flash folks who are not related to the production department with the aim to get feedback from other perspectives and see if we can improve the design better before going to development.
List of the indicator, how we will create the UT questions that could answer these following problems...
UT Objectives
Participants
![]()
Conclusion and Improvement
Showing based price :
The user is confused because there are 2 prices (base price and total price) on this page. When adding variants, and adding more money, it increases the feeling of comparison and it will decrease the chance to upgrade the size if don't have it in mind at first.
Drink size :
Cannot convince users to upsize because they cannot see how each size is different. And having to press to see each option is too much.
Variant options :
If the variant is fixed, hide it or make it obviously disable. Using percentages for sweetness level is confusing because each person's perception is different. Coffee’s sweetness level doesn’t have to be complicated like milk tea.
Quantity Button :
To reduce the prominence of quantity, after checking the data the number of users who ordered the same drink with the same customization options in one transaction is approximately 12% of all users in Singapore within 1 month but it is quite significant because most of it is a bulk order.
List of the indicator, how we will create the UT questions that could answer these following problems...
- Users spend a lot of time on the customization page because the page is quite long and difficult to focus or check the information in each section before adding to the cart
- Item names and pictures are not clear, while non-essential information is predominant, such as category names.
- Variant illustrations can't help communicate the differences between the options.
- The format of the variant option selection is unclear. Users are confused about what is mandatory, what is optional, and what can be multi-select.
UT Objectives
- To reduce time spent on this customization page
- To reduce the mistaken selection of the customization option
- To improve the architecture information on this page
Participants
- Internal day-drinker users who use flash coffee
- Sample size 4-5 users to get initial feedback for design improvement
Conclusion and Improvement
Showing based price :
The user is confused because there are 2 prices (base price and total price) on this page. When adding variants, and adding more money, it increases the feeling of comparison and it will decrease the chance to upgrade the size if don't have it in mind at first.
Drink size :
Cannot convince users to upsize because they cannot see how each size is different. And having to press to see each option is too much.
Variant options :
If the variant is fixed, hide it or make it obviously disable. Using percentages for sweetness level is confusing because each person's perception is different. Coffee’s sweetness level doesn’t have to be complicated like milk tea.
Quantity Button :
To reduce the prominence of quantity, after checking the data the number of users who ordered the same drink with the same customization options in one transaction is approximately 12% of all users in Singapore within 1 month but it is quite significant because most of it is a bulk order.
UI DESIGN
After getting feedback from UT, we can understand more of the user mental model and their perspective on the information and some small elements that we missed at first so we can improve our design better based on the gathered feedback evaluation.
![]()
![]()
