2026
Moku | QR Ordering & Loyalty System for Cafes
Bridging the Gap Between Ordering & Retaining
In the modern coffee shop scene, customers demand speed, while business owners crave loyalty. Traditional POS systems handle transactions but fail to build a relationship with the dine-in customer.
Moku Self-Ordering Module solves this by putting the POS directly in the customer's hand via Table QR code (e.g., "Meja D23"). This project focused not just on the transactional aspect of ordering, but on integrating a Loyalty Ecosystem directly into the ordering flow, turning casual visitors into repeating members through gamified points and rewards.
Client
2026
Timeline
8 weeks
Role
Frontend Engineer & UI/UX Designer
Service(s)
Mobile Web Design, User Interface, Loyalty System
Project goals
Complex Orders, Simple UI
Coffee orders are notoriously complex (size, ice level, sugar, toppings). Our main challenge was:
How Might We simplify detailed product customization without cluttering the screen, while simultaneously encouraging users to redeem vouchers?
Core Design Pillars:
Visual Appetite: Using warm, inviting colors (Peach/Orange) and hero photography to stimulate appetite.
Deep Customization: A foolproof interface for modifiers (Less Ice, Regular Cold, etc.) to prevent kitchen errors.
Integrated Rewards: Making "Points" and "Vouchers" visible at every step to drive higher Average Order Value (AOV).
The following storyboard captures a real frustration faced by the people we are designing for.
Processs Thinking
Complex Orders, Simple UI
Coffee orders are notoriously complex (size, ice level, sugar, toppings). Our main challenge was:
How Might We simplify detailed product customization without cluttering the screen, while simultaneously encouraging users to redeem vouchers?
Core Design Pillars:
Visual Appetite: Using warm, inviting colors (Peach/Orange) and hero photography to stimulate appetite.
Deep Customization: A foolproof interface for modifiers (Less Ice, Regular Cold, etc.) to prevent kitchen errors.
Integrated Rewards: Making "Points" and "Vouchers" visible at every step to drive higher Average Order Value (AOV).
The following storyboard captures a real frustration faced by the people we are designing for.
Result
Impact: Driving Engagement & Efficiency
By transforming the passive ordering process into an active, gamified experience, the Moku interface delivered measurable improvements for partner cafes:
1. Loyalty Adoption Surge
Moving the rewards system from the background to the Home Header resulted in a significant uptake in member usage. Users were motivated by the clear visualization of "Points Earned" (+24 Poin) displayed prominently on every successful transaction receipt, effectively creating a "hook" for return visits.
2. Optimized Operations
The logical breakdown of drink modifiers (Ice/Sugar levels) successfully bridged the communication gap between customer and kitchen. Cafes reported a drastic reduction in order errors, while the self-ordering speed improved table turnover rates during rush hours.
3. Transparent Trust
The granular Order Tracking System ("Dalam Proses" to "Selesai") reduced customer anxiety. Users no longer needed to flag down staff to ask "Where is my order?", creating a more relaxed dining atmosphere and a streamlined workflow for the waitstaff.
More works
Stop looking for a sign.
This is it. Say hello.