Alibaba · Ele.me · 2024
Shipped
Data-Driven Design
Modular UI Framework
Making promotional value easier to understand at a glance.
context
Ele.me’s own daily low-price channel
Daily Specials was a new channel built from scratch: a small set of popular dishes at a real low price, every day, for a short time. Deals are limited in time and stock, with deep discounts on best-sellers.
Whatever the deal, a user needs just three numbers to decide: what it costs now, how much it saves, and what it normally costs.
Problem
The old page wasn’t broken, so the redesign wasn’t about fixing it. It was about turning up the sense of a deal. Three things held it back. It was flat: every deal looked the same, so nothing felt like today’s must-have. It was quiet: a small ‘-¥12’ tag and a struck-out price meant the saving was there, but easy to miss. And it had little pull to act: there was no real sense of time or stock running out.
Approach
I turned each question into one element on the card, drawing on simple behavioural principles:
“Is it cheap?” → a price anchor: the usual price is small, today’s price is large.
“How much do I save?” → the saving, named as an outcome.
“Should I buy now?” → a stock bar and a countdown.
“Do others buy it?” → real people who just saved.
“What do I do?” → one button that changes with the sale.
Anything that didn’t answer a question was taken off the card.
Exploration
I explored more than ten card designs and grouped them into three directions. Minimal cards were clean, but users still had to work out the saving. High-pressure cards felt urgent, but their ‘shouting’ tone made users defensive. A price-trend card turned the discount into a falling line users could see at a glance, and still felt urgent.
We chose the price trend, ranking credibility over urgency, and urgency over polish. The trade-off was a little more on the card, in exchange for proof users can see.
State
One card covers the whole life of a deal. Before it opens, users can set a reminder. While it’s live, they buy straight from the card. When it sells out, the card fades back and points to similar deals instead of a dead end. Time and stock drive the button, its colour and the stock bar, so campaign teams change the data, not the design.
Page layout
The top of the page shows today’s three must-haves as large cards, with the middle one raised to lead the eye. As users scroll, the header shrinks and the page becomes a dense list of the same card, sorted by category, so they can compare many deals quickly.
