提效
信息结构提效
在商品详情页面对区间价、划线价、营销价、优惠价等梳理，提升用户的购买决策。
微店C端 商品交易链路H5&小程序 体验升级
项目背景
- 微店90%的交易用户通过H5/小程序交易完成购买。
- 商品交易链路是微店的核心业务之一。
- 用户通过店铺个性化的样式，认知私域商家的使用心得。
- 用户的交易全链路体验不一致，也是多年困扰的问题。
业务目标
- 1.提高商品交易转化率，下单转化率提高6%；
- 2.利用专享小程序、H5去广告、店铺主题色等增加微店商城版卖点。
- 3.“店铺-商品交易-收银台”交易流程的统一性。
设计策略
强化购买决策
商详价格体系重构
优化商品基础信息、营销信息、店铺展示、推荐商品、SKU选择、配送、保障等。
交易体验一致性
统一视觉语言
商详-店详-收银台卡片承载不同的信息，应用在交易链路的每个流程。
千人千面
主题色
结合微店数据，适配7种行业的主题色（服饰、食品、生鲜、跨境、科技、美妆、轻奢）。
01 商品详情信息结构提效
02 商详价格体系重构
03 统一视觉语言，定义卡片容器
店铺详情页优化
- 优化商品列表基础模板两列适配
- 构建统一的交易链路卡片，承载各种内容
- 统一交易链路视觉样式
收银台优化
- 绑卡用户引导在商详，个人中心，支付过默认推荐微店支付；
- 信用支付在商详、SKU选择、收银台等漏出分期价格和利息费；
- 小额免密、极速支付、收银台前置等多种支付方式；
- 不绑卡用户默认上次支付方式，记住用户习惯。
04 交易链路主题色设计
根据微店用户数据，7种常见行业的主题色(服饰、食品、生鲜、跨境、科技、美妆、饰品)，商家端设置后，会在对应的H5和小程序中展示。
可横向滑动 →
梳理规范-颜色升级
- 升级主色，更符合C端的颜色。
- 根据主色定义辅助色，用于不同状态场景等。
- 文字颜色按照黑色的百分比取色，不同的级别使用。
梳理规范-文字
- 梳理内容、标题、辅助信息、按钮等规律并统一。
- 保持文字对比，可读性。
- 用较少的字号。
项目管理与设计资源沉淀
京杭两地100人参与开发，公司重点项目攻坚，负责设计管理，任务拆解、项目排期、人员安排、方案推进、重点设计攻克。
设计任务拆解与人员分配
项目管理排期设计推进
iconfont 沉淀
项目回顾
业务数据提升
8.9%
H5 UV提升
26.5%
H5直接拍下转化率
300%
主题色商家使用率
36.2%
收银台绑卡率
体验升级&工作提效
- 小程序商详和H5统一
- 优化交易链路设计规范
- 建立公司级线上图标库，供京杭两地开发和设计师使用
- 优化WDUI设计组件
微店C端商品交易链路体验升级
Nov. 2020 — Jul. 2021
- UX/UI Designer Manager/ Dakui
- Interaction Designer /YanJun Liu
- Developer / Kaiming Shao | Biao Hou | Yu chen…
- Product Manager / Cai feng Ma
- Program Manager/ Yanjie Cheng