Item customization restructuring
PROJECT UNDER
NocNoc.com
DURATION
3 weeks
BACKGROUND
After launching an open-ended text field under each item for a few months, we collected data on customer requests and preferences for creating their own drinks through the app.
In the meantime, the operations team aimed to standardize item variants across all countries while allowing flexibility based on cultural and market requirements.
the design team is tasked with proposing a new item customization page design that enhances user experience, includes necessary options, simplifies the process, and meets consumer needs.
In the meantime, the operations team aimed to standardize item variants across all countries while allowing flexibility based on cultural and market requirements.
the design team is tasked with proposing a new item customization page design that enhances user experience, includes necessary options, simplifies the process, and meets consumer needs.
OBJECTIVES
- Enhance focus on drink information and selected variations.
- Enable users to adjust desired options swiftly, reducing errors.
- Improve clarity of total price display, avoiding distracting red backgrounds and promoting a positive experience.
WHAT I DID
UNDERSTANDING THE PROBLEM
Category name provided in the irrelevant journey:
Customers have already reached the item customization page, focusing on customizing their item rather than browsing categories. To view the selected drink's name, customers must scroll back to the top
The current design only allows for a single selection:
The system limitation restricts revenue growth by prohibiting multiple selections.
Unsure about which options can be modified or what qualifies as an add-on:
The differentiation between mandatory and optional selectors is unclear to users
- The mandatory variant (the default variant selection that already comes with the item)
- The optional variant (the new extra variant that the user can add to the item)
The total price text color doesn't pass accessibility tests:
The current design made it blend in with item-based prices and reduced visibility. When compared to the item-based price, the final price of an item lacks prominence.
May 2022 Singapore Survey Responses:
Active consumers provided feedback on their app ordering experience. App's item variants lack expected options such as sweetness level, drink temperature, ice level, sugar alternatives, and takeout items.
Item notes gathered data summary, till aug 4 2022 - ID, KR, TH
INFORMATION ARCHITECTURE
I compiled drink and food menus across all markets to assess category name consistency and item variants.
![]()
Existing and potential new variants per country, from a product perspective:
We found varied use of duplicate variation options across regions, prompting us to gather feedback for a better understanding of local markets before defining and standardizing new variants.
![]()
Consolidating variant data and structuring information architecture:
![]()
Existing and potential new variants per country, from a product perspective:
We found varied use of duplicate variation options across regions, prompting us to gather feedback for a better understanding of local markets before defining and standardizing new variants.
Consolidating variant data and structuring information architecture:
COMPETITIVE ANALYSIS
EXPLORATION
Design Concept
![]()
Vertical scrolling grants easy access to all varients, but using non-full-width photos may result in inconsistent app experiences.
![]()
Difficult to manage space with scrollable 2-column layout; selected variant options lack clarity, especially with long variant names.
![]()
Implementing a modal adds extra steps for customers, We need to develop a flexible height modal to accommodate content flexibility.
![]()
Prices, including base, additional, and total, are conveniently located on the right side of the screen for easy comparison. However, the drink size is not sufficiently prominent.
- Highlight selected item names.
- Display default mandatory variants prominently.
- Enable users to focus on and change specific options easily.
- Ensure variant option names are clear.
- Provide clear visibility of additional and final item prices.
- Allow users to add notes for future improvement data collection.
- The variant option meets the user's needs.
Vertical scrolling grants easy access to all varients, but using non-full-width photos may result in inconsistent app experiences.
Difficult to manage space with scrollable 2-column layout; selected variant options lack clarity, especially with long variant names.
Implementing a modal adds extra steps for customers, We need to develop a flexible height modal to accommodate content flexibility.
Prices, including base, additional, and total, are conveniently located on the right side of the screen for easy comparison. However, the drink size is not sufficiently prominent.
USABILITY TESTING
I conducted usability testing with internal Flash Coffee team members unaffiliated with the production department to gather feedback from diverse perspectives and enhance the design further prior to development.
UT Objectives:
Participants:
![]()
Conclusion and Improvement Plan:
UT Objectives:
- Decrease time spent on customization page
- Minimize mistaken selection of customization options
- Enhance architecture information on page
Participants:
- Internal day-drinkers using Flash Coffee
- Sample size of 4-5 users for initial design feedback
Conclusion and Improvement Plan:
- Simplify Pricing Display
Having both base and total prices on the page can confuse users. As more variants are added, the incremental price increase can deter users from upsizing if not planned in advance.
- Enhance Drink Size Visibility
Users struggle to perceive differences in drink sizes, hindering upsizing decisions. Streamlining size selection can reduce unnecessary steps.
-
Refine Variant Options
Using percentages for sweetness levels may be confusing, as preferences vary. Simplifying coffee sweetness levels compared to milk tea can improve user experience.
-
Optimize Quantity Button
Data analysis reveals that approximately 12% of Singapore users place bulk orders with identical customization options. Given this significant percentage, the importance of the quantity feature is evident and warrants further attention.
UI DESIGN
After receiving feedback from user testing (UT), we gain insight into the user's mental model and perspective, identifying missed elements and enhancing our design based on the evaluated feedback.
![]()
![]()
