文章为58招聘自助商城的改版总结，希望从这份总结中你可以有所收获。

首先，向大家介绍一下本次改版的项目——58招聘自助商城。什么是招聘自助商城呢？它是提升招聘效率，减少人员成本的线上自助化会员套餐售卖平台。简单来说，就是招聘自助商城可以帮助用户快速招到好人才。

改版原因 

旧版商城模块只做了一个简单的购买页面而没有商城属性，并且用户体验较为刻板，有部分bug需要修改。现需对商城进行丰富优化，让用户提高产品感知和产品认识，提高用户操作效率，方便监控用户行为。最终提炼改版关键字：商城属性与操作效率。

针对关键字聚焦改版思路，拟定改版三部曲：

• 发现问题：旧版商城转化率一直比较低迷，是逻辑问题还是界面展示有什么问题？在视觉方面会给用户带来什么的体验困扰；
• 分析问题：从流程和布局分析用户在使用场景中的心理状态是什么样子的？依据这些能够清晰的分析出问题所在；
• 设计方案：优化体验，使用户体验更加流畅，提高用户操作效率，希望用户能在最短的时间里对招聘自助商城有快速的了解。

发现问题

首先看看旧版有哪些问题？

• 框架布局乱：旧版采用左右结构，商品信息和支付信息混杂在一起，视觉动线杂乱，影响用户操作；
• 操作次数多：让用户一直在做筛选，没有呼吸感，同时在操作上被打断次数也比较多；
• 信息无层次：信息平铺，阅读成本大。

调整后的新版界面框架图如下：

模块清晰，视觉流畅。整个列表页分为五个模块，分别是运营区、筛选区、商品区、客服区以及页码区，从原型图的划分上不难看出商城的商品是最重要的信息

分析问题

商品是靠用户来消费的，所以接下来看看招聘自助商城究竟针对哪些人群？只有了解用户诉求，才能推动设计方案更加精确的产出。招聘自助商城主要针对于两种人群，第一种是企业Boss，第二种企业HR人员，他们的购买特点就是招聘周期短和花钱较少。

针对对购买用户的大致了解，下边制定购物场景。当用户在特定的购物环境里会有怎样的心理？
首先，通过线下购买场景模拟线上购物场景，线下商城或超市的核心卖点是商品本身，那么线上自助商城也是同理，我们需要做到的是不管是线上，还是线下的商品它们都要具备自我营销的能力。其次，模拟线下用户到商场购买商品的场景，当用户挑到自己满意的商品会先关注商品的价格，之后会看是否有优惠，最后是看商品的核心卖点。

设计方案

通过线下购物场景还原线上商品本质，我们需要突出商品卖点，所以本次改版针对自助商城的商品卡片进行打散再重组，使其突出卖点，抓住用户心理诉求，使用户在有限的时间里可以将注意力更集中在商品信息上。

重新组合的卡片信息分为四个层面，分别是运营信息（套餐主文案与卖点文案）、价格信息（主价格与优惠价格）、商品档位（时间标签区分）与辅助信息（多少人想买），最终实现以下效果：

同时通过不同色相的标签润滑一下用户枯燥的心理，最终打造出全年、半年、季度的商品。

关于配色：

由于本次改版只针对于列表页与详情页进行改版，剩余支付功能未做改变，所以在配色方面还是以蓝色为主，商务蓝看起来比较沉稳和安全性比较强。并且保持列表页与支付页的统一性。

最终呈现出来的列表页：

项目上线成果：

上线之后提单率提升25.8%，并且提前完成了2017年的年度任务。

总结 

设计的工作恰恰是在有限的时间和格局里进行突破，创造出属于事物本身的场景感。从始至终参与整个招聘自助商城的项目，除了对产品界面思考之外，更多的是和部门之间的沟通和协作能力，在沟通的工作中不断的完善用户体验，使其流程更加流畅。

作者：田晓红，视觉设计师

本文来源于人人都是产品经理合作媒体@58用户体验设计中心（微信公众号@58UXD），作者@田晓红

题图来自Pixabay，基于CC0协议