UX / UI Portfolio · Work 01
A cross-platform ordering experience connecting an in-store Kiosk and Mobile App through DIY drink customization, photo memories, and long-term brand engagement.
This project redesigns the ordering experience for GoodMe, a Chinese milk tea brand. It connects two key touchpoints: an in-store Kiosk and a Mobile App. The goal is to make milk tea ordering faster, more personalized, and more emotionally engaging through DIY drink creation and memory-based photo interaction.
In many milk tea stores, ordering is often treated as a fast and functional process. Users choose a drink, customize a few options, pay, and leave. While this process is efficient, it can feel repetitive and transactional — especially for young consumers who increasingly value personalization, emotional connection, and memorable brand experiences.
With countless new milk tea brands launching every month, standing out requires more than a menu refresh. The challenge for GoodMe was to redesign the ordering journey beyond basic efficiency — exploring how a Kiosk and Mobile App can work together to support faster ordering, deeper customization, and long-term emotional connection that keeps customers coming back.
For GoodMe, the opportunity was to redesign the ordering journey beyond basic efficiency — making every purchase a moment worth remembering.
"Select, customize, pay, and leave. The experience usually ends here."
"What if the experience continues — with memories, personality, and moments that return?"
These pain points shaped the design direction — not assumptions, but patterns observed in how young consumers interact with milk tea brands today.
Most milk tea ordering experiences follow the same process: select, customize, pay, and leave. There is little emotional difference between one purchase and the next. The ritual becomes invisible.
Although users can choose sugar level, ice level, and toppings, the experience often feels functional rather than expressive. The choices exist, but they don't feel personal or creative.
After the drink is picked up, the brand has limited ways to continue the relationship with users beyond points or discounts. There is no emotional thread connecting visits over time.
* Image has been blurred for privacy.
The goal was to transform milk tea ordering from a one-time transaction into a connected brand experience — across three directions.
The Kiosk reduces friction with visual-first menus, clear steps, and quick-tap customization — so users get their drink faster without feeling rushed.
Users build their own drink step by step — tea base, toppings, sugar, ice — making the creation feel personal and genuinely theirs.
A photo captured at the Kiosk syncs to the Mobile App and resurfaces exactly one year later — turning an ordinary visit into a lasting brand memory.
GoodMe's brand character, Aha, is active, energetic, and cheerful — a personable mascot that makes the brand feel warm and distinctly approachable.
The Kiosk is designed for in-store users who want either a quick menu order or a more personalized DIY drink experience. The interface uses large visual cards, clear steps, and simple controls to reduce decision pressure in a busy store environment.
Large drink cards with vivid imagery and clear pricing let users scan the full menu at a glance — making it easy to find a favorite or discover something new without hesitation.
Once a drink is selected, users adjust their preferences in a clean, step-by-step flow — choosing size, sugar level, ice, and toppings without overwhelming them with options at once.
A seamless payment step with QR code scan or tap-to-pay closes the loop quickly. The order confirmation screen gives users a clear summary and a satisfying sense of completion.
The DIY flow allows users to create a drink that feels more personal. Instead of choosing from fixed menu items, users build their own milk tea step by step — selecting the tea base, toppings, sugar level, ice level, and more. The cup preview updates in real time, and so does the price.
After completing an order, users receive one photo opportunity through the in-store Kiosk. The photo is saved as a memory of that visit and synced to the Mobile App. On the same date in a future year, the photo will be sent back to the user — turning an ordinary purchase into a moment of surprise, nostalgia, and emotional reconnection with the brand.
After payment is confirmed, the Kiosk transitions smoothly to the photo opportunity step.
A friendly prompt invites the user to take a quick photo — playful, low-pressure, and totally optional.
The captured photo is stored as a timestamped memory card inside the user's GoodMe App account.
Exactly one year later, the App sends a push notification: "Your GoodMe memory from last year is here."
The photo reappears with the original date, drink, and store — a small moment of nostalgia that reconnects the user to the brand in a meaningful, personal way.
The redesigned experience includes two connected touchpoints. The Kiosk supports quick in-store ordering, DIY drink creation, payment, and photo capture. The Mobile App extends the experience by storing orders, points, purchase records, and future memory photos.
The Mobile App acts as a long-term relationship touchpoint. It allows users to continue ordering, track points, view purchase history, check previous orders, and receive memory photos from past GoodMe visits.
The app opens to a warm, brand-forward home screen featuring the GoodMe character Aha — immediately setting a playful, personal tone before the user even places an order.
Beyond ordering, the app hosts rewards, gift features, memory photos, and an anniversary section — giving users reasons to return to the brand even between visits.
Home Page
Order Page
Select Drink
User Center
Memory Photos
Payment Done
Vouchers
Pickup Page
Blind Box
Gift FeatureThe visual redesign keeps the fresh and friendly feeling of a milk tea brand while creating a cleaner and more digital-friendly identity. The style uses soft green tones, rounded interface elements, playful line illustrations, and clear typography to make the ordering experience feel light, warm, and approachable. The redesign explores a more digital and emotionally engaging direction for the brand.
A browsable overview of the full interface design. Each set auto-plays like a carousel — drag left or right to move through, and click the centre screen to enlarge it.
Through this project, I explored how a functional ordering system can become a more emotional brand experience. The main challenge was balancing efficiency and storytelling: the Kiosk needed to remain fast and easy to use, while the photo memory feature had to feel meaningful rather than distracting. If I continued developing this project, I would further test the DIY flow with users and refine how memory photos are delivered through the Mobile App.
