Alibaba · Ele.me · 2024
Shipped
Cross-platform
Design System
Unifying a fragmented voucher experience across Ele.me and WeChat.
Contribution
I owned the end-to-end voucher experience across Ele.me and WeChat, leading the user flows, interaction design and UI design from purchase to redemption.
I collaborated with another designer who ensured visual consistency with Ele.me’s brand guidelines.
problem
I went through customer complaints, interviewed users and drew on a survey of 2,137 users by our UX research team, following the voucher journey from checkout to after-sales. Problems clustered at three moments:
1. Checkout: users didn’t realise the phone number could be changed, so vouchers went to the wrong account.
2. After purchase: order pages showed payment records, not what was left, when it expired or what to do next.
3. Across apps: the same voucher looked and worked differently in WeChat, Taobao and Ele.me.
Problem
What users look at when choosing a voucher: share of users who mentioned each factor (survey, N = 2,137, September 2023).
Fix 01
Make the phone number obviously editable
The phone number decides where vouchers are delivered, but it looked like fixed grey text under each order. I moved it to the top of the confirm page, labelled it “Current number” with an edit icon, and explained that vouchers are tied to that number.
Fix 02
One status model, next action first
I mapped every order state, from unpaid to after-sales, into one matrix: what the list shows, what the detail page shows, each sub-state, the actions available and where each one leads. The detail page now opens with the status, how many vouchers are left and the next action (Use now, Request refund, Usage rules), instead of payment records.
Design System
One foundation for every voucher surface
To keep these fixes consistent as new voucher types are added, I defined shared colour, type and spacing rules. Ten near-identical type sizes became five levels, spacing moved to a 4 px grid, and colour split into blue for actions and warm colours for value.
Category icons
With another designer, I created 24 category icons for vouchers, from breakfast to car repairs. We agreed shared rules so they read as one family: one object per icon, a 70% safe area, flat shapes with a soft gradient, and a tile tint that matches its colour family.
Final Experience
From checkout to after-sales, every step now shows what the voucher is worth, whether it applies, and what to do next.
Outcome
One shared experience, built to scale.
The redesign started from recurring complaints about phone-number editing and unclear voucher rules. Post-launch complaint data wasn’t available to me, but each fix maps directly to an issue users raised.
What I learned
The most valuable outcome wasn’t a better screen but a more maintainable experience that could carry multiple voucher products. It taught me to design at the system level, connecting user needs, interaction logic, visual consistency and engineering constraints into one solution.