Back to all projects返回全部项目
JD 11.11 Shopping Guide · UX Case Study
JD.com · 11.11 · 2016

11.11
Shopping Guide
双十一
购物攻略

Turn a crowded promotion calendar into a place shoppers can understand, explore and return to把拥挤的促销日历转化为用户看得懂、逛得动、还愿意回来的攻略

Role · UX design角色 · UX 设计Scope · Information architecture范围 · 信息架构Collaboration · Visual design协作 · 视觉设计
JD 11.11 shopping guide shown on mobile with themed promotion floors
Project overview

The promotion had everything except a clear answer to “when should I come back?”活动什么都有,却没能清楚回答“我什么时候该回来”

11.11 combined category events, brand launches, coupons, flash sales and scheduled discounts. Shoppers needed an official guide to understand what was happening, identify the best time to buy and reserve events they did not want to miss.双十一同时包含品类活动、品牌上新、优惠券、秒杀与定时折扣。用户需要一份官方攻略,理解活动进程、判断最佳购买时间,并预约不想错过的活动。

CompanyJD.com
TimeNov 20162016 年 11 月
RoleUX designer; partnered with visual designers on final presentationUX 设计;与视觉设计师共同完成最终呈现
GoalDirect shoppers to campaign venues, brands and activities while supporting return visits把用户导向会场、品牌与活动,同时支持后续回访
01

What买什么

Surface categories, brands and products worth exploring.呈现值得浏览的品类、品牌与商品。

02

When什么时候

Explain event windows, sale moments and upcoming reservations.说明活动时段、促销节点与待预约内容。

03

Where去哪里

Create direct paths to venues, special events and campaign items.直接连接会场、特色活动与活动商品。

Design question设计命题

How might one page make a complex promotion calendar scannable today and memorable enough for shoppers to return at the right moment?如何让一个页面既能帮助用户今天快速理解复杂活动,又能让他们记住并在正确时刻回来?

01 · Information architecture

Organize the campaign around shopper decisions围绕购物决策组织活动信息

Business requirements asked the guide to expose many venues and campaign moments. User analysis reframed that catalogue into three jobs: find something interesting, understand the best deal and know when to act.业务要求攻略承载大量会场与活动节点。用户需求分析则把内容目录重新组织为三类任务:找到有趣的内容、理解最值得买的优惠、知道何时行动。

Rich enough to explore, structured enough to scan既要丰富可逛,也要清晰可扫

The guide needed breadth without becoming a flat list. Content was grouped by timeline, floor, venue type and promotional role so shoppers could move between overview and specific action.攻略需要足够丰富,却不能变成长列表。内容按照时间线、楼层、会场类型与促销角色组织,让用户可以在全局概览与具体行动之间切换。

  • Timeline时间线Preview, category events and peak sale periods.预热、专场与高潮促销阶段。
  • Venue会场Category, brand, featured and interactive destinations.品类、品牌、特色与互动会场。
  • Action行动Browse now, reserve later or enter a live offer.现在浏览、稍后预约或直接进入优惠。
JD 11.11 shopping guide user needs analysis
User needs用户需求Separate richness, usefulness and deal value before arranging the page.在排版前先区分内容丰富度、实用性与优惠价值。
JD 11.11 shopping guide business requirement analysis
Business needs业务需求Expose campaign breadth without losing priority.承载活动广度,同时不丢失优先级。
JD 11.11 shopping guide function map
Function map功能整理Connect content types to navigation and reservation actions.把内容类型连接到导航与预约行动。
02 · Creative concept

Use a sightseeing elevator to make a long page feel intentional用观光电梯把超长页面变成一次有目的的游览

More than ten concepts were explored with the operations team. The selected elevator metaphor matched a vertically stacked campaign, gave each floor a distinct scene and made movement through a long page easier to understand.团队与运营共同探索了十余个创意方向,最终选择“观光电梯”:它与纵向堆叠的活动结构天然匹配,每一层都能形成独立场景,也让长页面的移动更容易理解。

01

Enter lobby进入大厅

See the full campaign timeline and primary destinations.先看到活动时间线与主要目的地。

02

Choose floor选择楼层

Navigate by theme instead of reading a flat list.按主题导航,而不是阅读扁平列表。

03

Explore room浏览场景

Discover venues, brands and products within one visual world.在同一视觉场景中发现会场、品牌与商品。

04

Reserve return预约回访

Mark upcoming moments and return when the offer starts.预约未来节点,在优惠开始时回来。

JD 11.11 shopping guide concept selection from multiple ideas to sightseeing elevator
Concept selection概念选择The sightseeing elevator emerged from six documented directions and a larger brainstorm.从记录下来的六个方向与更广泛的脑暴中确定观光电梯方案。
03 · Interaction

Make switching and reservation visible inside the story让切换与预约自然发生在故事里

Wireframes tested how shoppers would move across campaign stages, floors and venues. Reservation states were designed alongside active and finished states so the guide could support return visits rather than only today's traffic.交互稿验证用户如何在活动阶段、楼层与会场间移动,并同时设计未开始、可预约、进行中与已结束状态,让攻略不仅服务今天的流量,也能支持后续回访。

JD 11.11 shopping guide wireframes for timeline, venues, brands and product sections
Interaction system交互体系Timeline, themed venues, brand reservations and daily products share one navigation logic.时间线、特色会场、品牌预约与今日爆款共用一套导航逻辑。
Return loop回访闭环

A promotion guide is not only an index. Reservation turns future campaign moments into a personal plan, giving shoppers a concrete reason to return.促销攻略不只是目录。预约把未来活动节点转化为个人计划,为用户提供明确的回访理由。

04 · Outcome

One official guide, many clear paths into 11.11一份官方攻略,多条清晰进入双十一的路径

The final experience turned the promotion calendar into a themed, navigable destination that directed shoppers toward venues, brands and activities. Because the source material did not include a quantified conversion result, the case focuses on the decision model and interaction structure rather than claiming sales impact.最终体验把促销日历转化为有主题、可导航的活动目的地,并将用户导向会场、品牌与活动。原始资料没有提供可量化转化结果,因此本案例聚焦决策模型与交互结构,不夸大销售影响。

Final JD 11.11 shopping guide with themed floors and reservation modules
Final experience最终体验A visual elevator links campaign overview, themed floors, venues and products.用视觉化电梯连接活动概览、主题楼层、会场与商品。
Good campaign navigation does not reduce choice. It gives every choice a time, place and reason.好的活动导航不是减少选择,而是为每个选择提供时间、位置与理由。

This project showed how an expressive creative concept can also solve a structural problem. The elevator worked because it was not decoration added after the fact; it was the mental model for the information architecture.这个项目说明,富有表现力的创意概念也可以解决结构问题。观光电梯之所以有效,是因为它不是后加的装饰,而是信息架构本身的心智模型。