一、为什么要改版

1、行业洞察

互联网市场竞争愈发激烈，新用户获客成本持续水涨船高，新的媒体例如TikTok 等应用的出现，让用户更加没有耐心，提高流量的 ROI 迫在眉睫。

来自著名数据分析网站statista的数据，以美国地区为例，广告投入2017年为86900（单位：百万，下同），2018年为100795，年增长率约16%（图1）。但是产出比则呈现每年约10%的减少，2018年为42.9%，2019年预计为31.2%，2020年预计为22.6%（图2）。

图1

图2

2、产品现状

ZAFUL M端是ZAFUL整个产品链中重要的流量渠道。M端同时具有移动端的便捷性和网页的快速传播性双重优点，在三端中用户使用门槛最低。借助前几年低价的流量，凭借推广渠道（Affilaite、SEM、SMI、SMM、SEO）疯狂扩张。早期凭借这些优势为ZAFUL积累用户和品牌推广提供了充足的动力。

图3

从图3可以看出：

2019年Q1同比2018年Q1，ZAFUL 三端会话数增长239.88%（据其他数据统计：用户数同比增长189.64%）；

2019年Q1，M端总会话数是PC的2.3倍，APP端的4.5倍。

图4

但是， 从图4可以得知，ZAFULM端的销售占比却迟迟没有提升。2019年1月M端销售额占比21%，为三端中最低。

因此，基于以上前提，UID组展开了关于ZAFULM端改版的前期调研，我们设立了3个核心指标来衡量这次改版的效果，分别是转化率，用户行为指数（会话浏览页数、平均会话时长、页面跳出率），NPS值，专门研究在流量不变的情况下，如何提高用户第一次消费体验，如何更好地留住用户，提升流量ROI。

3、其它诉求

ZAFUL品牌化

ZAFULM端在ZAFUL诞生之初（2014年）就在运营，5年内未开展过大型改版，对标竞品，在视觉美观度、设计感、统一性上均稍显不足。随着ZAFUL品牌度在推广上日益前进，构建良好的品牌体验势在必行。

ZAFUL一体化运营

目前平台无法支撑公司一体化运营的战略目的，可借改版调整结构。这是移动化运营提升效率的一大步，从而提升运营效率，运营深度。

二、怎么改

1、个人中心

本着上述三个优化目标，改版中我们做了允许未登录用户访问个人中心的优化，目的是提高新用户推荐商品曝光和各类运营活动曝光。

调取App两个端口销售数据（如图5）时我们发现， IOS和 Android个人中心在整体销售占比中高达19.45%和16.23，具有非常高的优化价值。

图5

图6 —— 个人中心模块改版后效果图对比

2、去除全局标题栏黑色并调整搜索入口位置

研究显示，用户首先会在页面的右上角（图7）去找搜索按钮。利用这种F型的视觉浏览形式用户会很容易找到搜索框，若将其放在其它不在用户预期内的位置则意味着用户需要付出额外的成本去寻找搜索框。

故，我们将搜索按钮直接放置在用户的预期位置，可以很好的减少用户决策时间，缩减进入购物路径的步骤。

图7

黑色的色彩强度能够压倒其他色彩，转移用户注意力，从而让用户不在注重除了黑色标题栏之外的其它内容，这样显然不是我们想要的。另外我们也把标题为“黑色”&“白色”“红色”设计成AB 方案（图8），数据显示标题栏为白色的方案各方面数据提现优于其它两个方案

图8

图9 —— 去除标题栏黑色&调整搜索入口位置效果图对比

3、侧边栏优化接入elf系统一体化运营

简化导航层级

理想状态下，用户需要点击的导航层级越少，那么用户到达他们的目标页面也就越快越清晰。

改版前，用户想要寻找合适的类目需要跳转一次页面，前后共选择三个层级的分类。

改版后，用户所有的操作都在当前页面进行，且最多只需要选择两个层级，而更深的三级菜单筛选则在分类列表页进行，方便用户快速进入目标页面

接入elf系统一体化运营

方便运营统一配置管理，提高运营效率，降低维护成本，支撑公司一体化运营的战略目的。运营可以在elf系统中快速便捷的更换菜单图，增删菜单类目，修改菜单结构等，比起走项目流程，节省的不止是人力成本，更加是对公司资源的合理利用。

图10 —— 侧边栏改版后效果图对比

4、商品列表页模块化

筛选器优化

通过查看比较相关筛选词条的点击率，我们做了如下的重新排序，并将高频词条置前展示

图11

增加用户操作结果反馈

根据尼尔森十大可用性原则之一“系统状态可见原则”，即系统应该在适当的时间内做出适当的反馈，告知用户当前的系统状态。用户需要知到自己的操作是否被系统感知，所以在用户操作后，应当第一时间提供反馈告诉用户这项操作是否被系统接受了，产生了什么结果。

图12 —— 筛选器改版后效果图对比

优化信息排列层级展示

在所有列表页中，分类页首屏内的商品曝光量最高，点击率也最高，故合理利用第一屏显示空间，对原来页面的banner、标题、商品数量、标签等元素布局进行合理优化，提高屏效。

图13 —— 列表页改版后效果图对比

5、收藏夹——用户的第二购物车

收藏夹作为用户的“第二购物车”，对整体转化有着正向的促进左右。

调研发现，M端必须登录才能收藏商品；另外收藏夹只有在个人中心一个入口，以上这两点门槛大大限制收藏夹对用户的开放度，从而没有发挥收藏夹应该有的作用。

优化方案：

1、允许用户未登录状态下收藏商品，保留cookie数据并在用户登录后同步；

2、未登录状态可以从侧边栏，或个人中心收藏夹（改版后支持未登录访问，更多详情后面再阐述）两个入口进入收藏夹查看数据；

3、从后台拉取数据显示，人均收藏超过12个SKU,为了屏效比考虑，我们把原来一行显示一个商品改为一行显示2个商品。

图14 —— 收藏夹改版后效果图对比

三、改动效果如何

转化率环比

改版前一月（4.10-5.9）VS改版后一月（5.10-6.9），转化率的增幅大于流量的增幅，转化率的增长带动了销售额的增长

用户行为指标

会话浏览页数、平均会话时长、页面跳出率等用户行为指标与与改版前均有明显增长

NPS值

四、写在最后

整站改版对于团队来说是一种大型挑战，不同页面有不同的业务思考点，业务方和用户意图都会不同；除了思考页面的合理化布局及美观度之外，还要思考用户诉求及最合理化的交互方式。在这次改版升级中，为更好地突出内容，视觉容器选择尽可能做轻、做简，以简约、清晰的“视觉语气”与C端用户对话——当然，这是UID团队和业务团队阶段性的选择。后续品牌的完善及产品的优化，仍需结合更多数据持续打磨！