Prepaid Wallet: Shipped
UI Design
Coffee Pass: Concept
I designed two prepaid products with different models. The Coffee Pass, a ¥98 yearly fee for daily discounts at 8 chains, was designed but not launched. The Prepaid Wallet (畅享金), a stored balance where ¥100 buys ¥120 to spend later, shipped. Both had to prove paying upfront is worth it.
Context
In 2022, chain coffee stores grew almost 300%, but big international brands lost money on every platform order. The pass was designed to move frequent drinkers towards fast-growing mid-sized chains and keep them ordering, with value for all three sides: the platform, coffee brands and users.
FY2023 targets: 52K passes sold, 780K extra orders, ¥27.6M net GMV growth.
Research
Understanding the coffee drinker
Our UX research team surveyed coffee drinkers across 8 cities. What people wanted most was a real, big discount, and the top reason they hesitated was worrying they wouldn’t drink enough to break even. Over half drink coffee every day. I used these results to decide what each screen had to say first: discount, days to break even, delivery for a single cup, and quality.
Problem & Solution
From a stripped-down MVP to a pass people trust
Three constraints shaped the design. The MVP had no confirm step and the pass never appeared in order history or the voucher wallet. It was the platform’s first single-category pass, covering coffee only across many stores for a year. And it came with many rules: daily limits, no refunds after use, and no stacking with other offers. Each constraint became a design response.
Fix 01
A premium pass, not another coupon
To read as a platform benefit rather than a shop coupon, the pass needed its own identity. I started from how people perceive coffee, built a mood board, and defined colour, shape, type, texture and layout: dark espresso tones, a coffee-bean watermark, custom “畅饮卡” lettering that can extend to a pass series, and drinks displayed like a café counter. Warm red is used only for price.
Fix 03
Am I getting my money’s worth?
Because the pass didn’t appear in order history, the flow had to make it findable. The payment sheet shows the masked phone number the pass is tied to. Right after purchase, a short guide shows where to find it next time. From then on, the pass page leads with total money saved and cups left today.
Prepaid Wallet
From keywords to a mark
The Prepaid Wallet (畅享金) is a separate product with its own model: users top up a brand balance, get bonus credit, and spend it across later orders. I worked from the business keywords (money, stored value, delight) to one mark: a money bag that smiles back.
Prepaid Wallet
A different model, the same promise: visible value
Unlike the Coffee Pass, which sells discounts, the wallet stores money. Pay ¥100, get ¥120 to spend within 30 days; it stacks with other offers, and unused principal is refunded at expiry. Checkout shows how much the balance covers; after purchase, the page shows balance and history.
