背景
这是一个长内容演示:桌面端点击卡片后,详情从屏幕右侧滑入,占满整个视口高度的 90% 宽度,为长图文提供了充足的展示空间。左侧留出的 10% 区域既是视觉上的"出口",也承载着返回按钮,点击该区域任意位置即可关闭抽屉回到主界面。
老版站点信息架构层级过深,用户在商品列表与详情页之间反复跳失。本次重设计的目标是压缩决策路径,把"浏览—比较—下单"收敛到一条主线上。
过程
先是两周的用户访谈与漏斗数据分析,定位到三个主要流失点:分类导航认知负荷过高、商品对比功能缺失、结算流程步骤冗余。针对这三点,分别用扁平化导航、内联对比条和单页结算来回应。
设计阶段产出了 40+ 页面的完整规范,与两名前端工程师结对实现,组件全部沉淀进内部设计系统,后续页面的搭建成本下降了约一半。
结果与复盘
上线三个月后,核心漏斗转化率提升 32%,平均结算耗时下降 45%。数据之外更大的收获是设计系统的建立:它让"重设计"从一次性项目变成了持续演进的基础设施。
如果重来一次,会更早在真实数据上做 A/B 验证,而不是等到视觉稿完全定稿——高保真稿的沉没成本会不知不觉影响判断。
角色
产品设计负责人:用户研究、信息架构、交互与视觉设计、设计系统规范,以及与工程团队的结对实现。技术栈为 HTML / CSS / 原生 JS,静态托管于 Caddy。
Overview
A full redesign of an e-commerce platform: flattened navigation, inline product comparison, and a single-page checkout. Shipped with a 40+ page design system that halved the cost of building new pages.
Three months after launch, core funnel conversion was up 32% and checkout time down 45%.
Role
Lead product designer: research, IA, interaction & visual design, design system, and pairing with engineering. HTML / CSS / vanilla JS, statically hosted on Caddy.