原文链接:https://mp.weixin.qq.com/s/rxnlIGl671s5nhA2WtxkFQ

二手车作为集团的核心业务之一,从产品还是设计层面都在不断的进行探索与升级,希望能够给予用户在找车-选车-看车-与商家连接等场景下打造优质的全流程服务体验,而车源详情页作为看车、选车环节中的关键页面我们通过一系列的用户访谈,一致性项目评估走查,产品侧协作挖掘、竞品分析等方式结合,发现现有页面中除展示层以外更多暴露出来的产品问题:
【车详情页】二手车详情页改版的共予之道 - 图1

同时我们也发现了更多设计优化的可能性。结合产品侧及设计侧的需求,我们希望在本次改版中能够达成:
1.进一步提升用户的决策效率
2.给予车商相应展示入口,进一步驱动其商业价值
3.提升业务一致性
4.优化信息展示样式提升页面品质
5.提升车源真实度,打造服务保障感

如何达成以上的目标,以下本文将通过不同维度讲述本次设计改版项目中的过程与思考。

01改变协作方式

整个设计流程我们希望设计师在介入项目时从原有接收需求到执行产出更偏向设计支持的方式,打破常规使多部门之间变成一种更加紧密、高效、高质的合作设计方式,在产品的设计研发流程中贯穿。同样需要我们更加的注重需求的收集、评估、设计过程同步、沟通、成本评估等环节,并且在项目的前中后期不断的核验设计、产品功能投入成本与产出价值。
【车详情页】二手车详情页改版的共予之道 - 图2
【车详情页】二手车详情页改版的共予之道 - 图3

02设计实现

· 进一步提升用户决策效率

详情页的核心是希望通过展示适合的车源信息从而促成用户看车到电话的连接转化,最终达成产品目标。而信息结构是否合适,用户获取信息的效率是否高效,对车源的真实度、保障感是否有感知等都会影响用户的最终决策,所以我们需要做到:

1.搭建更加合理的主框架,模块化展示

我们结合调研报告,竞评分析等,从用户购车核心诉求出发,将信息优先级分为:图片视频模块-价格信息-基本信息-车三维-车保障-车卖家-推荐共7个模块。希望通过更加清晰的内容及模块化展示的方式提升用户的阅读效率。

【车详情页】二手车详情页改版的共予之道 - 图4

2.信息合并,减少冗余信息,突出重点信息

原有详情页中基本信息分散甚至断层展示在两个模块中,且基本信息无法在第一屏露出,对于用户来说首屏可用信息较少。在设计过程中,我们也将车源基本信息进一步进行整合展示,减少不必要的基本信息展示字段,收至全部配置当中,在用户所需时提供入口查看,提高单屏的有用信息密度提升首屏决策效率。

【车详情页】二手车详情页改版的共予之道 - 图5

3.检测报告、服务保障信息露出营造权威保障感

车辆检测报告部分,采用了模拟纸质报告加检测章的设计方式,在报告中直观的展示检测师在检测过程中的问题部件,使用户在决策时对于该车车况更加了解。

服务保障模块与保险模块整合,依托58二手车平台的在看车、质检、延保等服务保障能力,进一步提升其车源的平台保障感。

【车详情页】二手车详情页改版的共予之道 - 图6

车保障模块的引入在用户获取到基本信息后进一步加固了用户的决策信心

4.优化引导刺激用户行为

原详情页中对于电话拨打的引导设计不足,本次改版中通过改变电话引导交互形式,在用户停留达到一定时长时触发弹出,辅之动效引导转化,此次的设计方式较以前的展示气泡方式从内容还是样式都变的更加的直观。

【车详情页】二手车详情页改版的共予之道 - 图7

· 优化车商展示入口,提升内容兼容性

在车商及市场模块中原详情页的经销商名称多数情况下字数较多不能很好的展示,在考虑后将内容结构进行调整,将进入店铺及询底价按钮下置,保证车商信息的兼容性。电话微聊接通率、在售已售车源等字段根据调研结果确定只作为弱化露出与评分整合,较以前与评分关联性更强。

【车详情页】二手车详情页改版的共予之道 - 图8

· 服务、运营、车商认证展示升级

从商业的角度出发,我们同样需要考虑到认证车商、产品内部的运营的展示诉求。基于两类诉求,我们也进行了相应的预留设计。在第一屏预留主辅运营展示区域,保证在有运营活动的时候结合大类页的展示能够将运营展示效果最大化。在车商认证的车源详情中,同样预留了认证展示模块。

【车详情页】二手车详情页改版的共予之道 - 图9

· 提升业务一致性

58APP作为一个平台级产品,我们需要在设计时业务线更多思考平台公共组件库的使用。希望在业务中能够尽可能保持整体平台风格的一致性的同时去构建延伸车业务场景下的展示风格。我们与平台侧规范设计负责人沟通确定并使用了新的间距规范、卡片等组件并沉淀到平台组件规范库中。

03可复用延伸的设计

每一次二手车设计方式的改变都会直接影响到工客货等类别。所以在改版、迭代优化过程中我们都会最大化考虑其工客货的内容、功能兼容度,在此次二手车详情页的改版结束后,基于新的设计风格快速复用到其他的业务类别。

04可量化、可管理的迭代

对于设计需求的迭代维护方面,我们遵循平台的TOOLKITS设计工具使用方法及规范。iWiki+iWork结合的方式量化、沉淀每一次设计,帮助设计师更好的进行跨部门沟通协调,需求管理、追踪、知识与分析的管理沉淀。

【车详情页】二手车详情页改版的共予之道 - 图10

最后我们看看本次整体改版的设计效果
【车详情页】二手车详情页改版的共予之道 - 图11

05总结回顾

项目从需求的讨论产出-交互设计-视觉设计-交付-开发集成,项目设计师通过优化协作方式,对于业务的深度理解,经历了一个发版周期,高效的完成了本次改版升级。希望通过本次的升级,能够更好的在看车场景下提供更好的体验。而这些对于这么庞大的业务体系还是远远不够的,在后续的迭代过程中我们也会从更多的场景中深度探索挖掘,促成最终的转化目标,推动业务的演进。以上是本次改版项目的思考与总结,同时也感谢本次项目中辛认真负责苦付出的交互、产品、测试、开发同学。