Eveleen Zhou
中文EN

Omnichannel UX/UI

Nike 天猫618体验焕新

这是 Nike 面向 2022 年 618 大促的核心数字活动。项目任务是重新设计天猫旗舰店首页，让页面在销售高峰期更有效地承接流量并促进转化。

Nike Tmall 618 campaign hero visual.

战略问题

平衡个性化、商品发现与会员权益可见度。

成果

建立可根据不同人群调整商品、会员信息与活动内容的模块化首页系统。

影响

让用户从活动触达更清晰地进入商品发现与购买决策。

设计挑战

会员权益不够可见

会员权益与重点信息需要更强的呈现位置，同时不打断用户浏览产品。

商品发现需要适配不同用户

首页需要模块化内容，能够回应不同场景、兴趣与活动重心。

活动声量需要更清晰的购物路径

视觉冲击力需要支持而不是干扰商品理解与购买决策。

设计方法

项目以迭代方式推进，从研究与问题界定到界面设计与验证。

第 1 周

第 2-3 周

第 4-5 周

第 6-9 周

整合
  • 整合项目 Brief、报告与数据
  • 梳理竞品活动与体验
共情
  • 定义核心消费者画像
  • 识别差异点与参与主题
  • 转化为内容灵感
定义
  • 制定人群策略
  • 梳理用户旅程流程
  • 明确创新内容机会
  • 与相关方对齐并确认方向
设计与原型
  • 使用 Figma 制作线框图
  • 与视觉设计师评审可行性
  • 按不同活动阶段持续迭代模块
上线与更新
  • 按活动阶段上线页面
  • 监测表现与反馈
  • 持续更新内容与模块

解决方案

以人群画像驱动结构

基于客户数据划分用户群，并为每类人群定义清晰销售目标；再通过兴趣、行为与使用场景拆解，指导有针对性的页面设计决策。

整合关键信息

通过互动与动态模块更高效地传达会员权益，在减少视觉拥挤的同时提升页面空间利用率。

设计新模块

围绕产品销售目标探索多种互动模式，让页面更贴近消费者行为，并形成区别于以往活动执行的新体验。

人群画像定义

用户群通过 Nike 内部消费者数据与策略团队分析共同划分，并为每一类人群明确销售目标。画像主要围绕以下维度展开：

Female

Male

HH Driven

MD Driven

It Girls 人群画像视觉。

It Girls

  • 高消费力
  • 趋势引领者
  • 视觉驱动
  • 关注新品与社交潮流
Sneakerheads 人群画像视觉。

Sneakerheads

  • 高消费 / 高频复购
  • 核心粉丝
  • 极客型 / 狂热型
  • 关注新品与进阶产品
  • 也会被折扣产品吸引
Well-Thoughts 人群画像视觉。

Well-Thoughts

  • 低消费 Gen Z / 复购及其他人群
  • 折扣优先
  • 视觉驱动
  • 会为孩子或家庭成员购买
Amateur Players 人群画像视觉。

Amateur Players

  • 低消费 Gen Z 或新客
  • 折扣优先
  • 重视价格价值
  • 功能驱动
  • 需要易导航体验

* HH 指 High Heat 高热度产品；MD 指 Mark Down 折扣产品。

个性化内容逻辑

首页策略将不同受众差异转化为模块规则：哪些产品优先出现、促销信息如何表达、UX 内容如何引导。页面不再采用一条通用购物路径，而是根据不同人群调整首屏信息、商品组合与决策线索。

Amateur Players

Amateur Players 人群缩略图。

鞋类、功能与清晰比较。

在大促期间，这类人群更关注鞋类品类、功能性卖点与清楚分隔的货架结构。因此首页优先呈现结构化商品区块、直接的利益点文案，以及更容易比较的商品路径。

FEMALE / Well-Thoughts

Well-Thoughts 人群缩略图。

整套造型、社交证明与辅助决策。

这类人群更容易被整套穿搭与 UGC 式线索打动。评论流互动强化了社交验证；同时露出男款与童款区域，因为她们也常为伴侣、家庭成员或孩子购买。

MALE / Sneakerheads

Sneakerheads 人群缩略图。

运动场景与身份感驱动的发现路径。

对于偏造型导向的男性受众，篮球、足球等运动场景更容易承载商品表达。基于场景的商品分组帮助 Nike 的运动性能形象与日常造型、购买意图建立连接。

FEMALE / It Girls

It Girls 人群缩略图。

色彩、造型组合与视觉化浏览。

针对 It Girls，体验更强调色彩搭配、具有表现力的活动视觉与趋势导向商品。后续旅程以这一人群为详细案例，说明画像逻辑如何影响流程、模块层级与 UX 内容。

用户旅程

基于优化后的旗舰店首页，我们重新梳理用户从到达、浏览、发现商品到转化的关键触点。更新后的旅程强调更清晰的权益可见度、更明确的商品优先级，以及能够高效引导购买的互动线索。

* 从用户旅程开始，以 It Girls 作为详细示例，展示一个细分人群的动机如何被转化为页面流程、模块层级与 UX 内容。

阶段
进入
解码
灵感
比较
互动
为 TA 购买
转化
需求
快速理解活动主题
判断会员权益是否相关
发现能引起个人兴趣的直播内容
找到符合画像的商品
感到新鲜，同时不失方向
为他人完成一次性购买
以更低阻力做出决定
设计回应
通过活动 KV 让入口一目了然
提前呈现会员权益
以关键词引导进入活动直播内容
模块优先呈现与画像相关的商品
以动画和评论延续互动节奏
增加男士与孩子的购买路径
CTA 保持可见并在关键位置重复出现
用户行为
从活动流量进入
浏览会员权益
找到感兴趣的直播内容
比较重点商品
与动态模块互动
顺畅浏览或加入购物车
选择 offer 或商品路径
情绪
好奇聚焦投入有信心
向右查看全部阶段

线框图

低保真线框用于梳理页面结构、模块逻辑与互动流程，并作为与策略、创意和客户团队对齐的蓝图。

Full low-fidelity homepage wireframe.Recommendation module low-fidelity wireframe.Product grid low-fidelity wireframe.Ranking module low-fidelity wireframe.Female product section low-fidelity wireframe.Male product section low-fidelity wireframe.Mix-and-match module low-fidelity wireframe.
Gen Z 男性线框模块草图。
Gen Z 女性线框模块草图。
商品推荐线框模块草图。
Nike 618 商品推荐与评论模块线框补充图。

关键页面、组件与互动模块。

最终首页呈现出视觉统一、冲击力明确的活动体验：结合动态会员模块、清晰的商品优先级，以及贴合用户行为的互动流程。执行重点在于建立灵活内容区块、促销模块与体验细节，让页面同时支持品牌表达、电商表现，以及不同人群的 offer、产品重点与 UX 内容适配。

最终 It Girls 首页 KV 与时间线页面。
KV 与时间线
通过动态元素呈现会员信息
使用动态评论流引出热卖专区
露出高意图关键词，强化交叉销售机会
面向女性人群的推荐逻辑页面。
在视觉上弱化男款热卖内容，为女性人群建立更清晰的信息分区
男款与童款混搭推荐页面。
确保男款与童款混搭场景完整纳入推荐逻辑

关键反思

最终首页将动态会员信息、清晰商品优先级与创新互动流程结合，形成一个能够根据用户行为进行调整的高影响力页面体验。

尽早且充分沟通

项目初期与客户及内部团队进行充分沟通非常关键。尽早提出正确问题，能够减少返工、发现缺失信息，并加快洞察形成。

与策略团队紧密协作

UX 与策略的深度协作能强化对目标人群的理解，引入多角度判断，并确保策略思考被清晰转化为设计决策。

在限制中继续探索

即使存在约束，也需要探索多个设计方向。通过建立既适配现有内容又引入新互动的模块，可以带来更新鲜的体验并支持更强的商业结果。

提供清晰的端到端指导

UX 需要为相关团队制定明确规则，包括模块行为、动态逻辑与文案语气。前期规划越充分，后续执行越顺畅，也越能保持整体体验一致。