直觉设计打造用车创新体验-携程接送机列表页改版
携程用一次“直觉设计”的改版给出答案:把页面主角从供应商换成 3D 车型,用汽车广告级布光建立虚拟影棚,再让冰箱门打开、大象塞进去的场景化动效替代干巴巴的文字。结果,更大的车型被更多人下单,鸥翼门 Model X 的点击率飙升。一次改版告诉你:好设计,让用户无需思考就能选对车。

直觉设计的核心在于构建无需解释的体验——让用户的本能感知引领决策 。作为体验设计师的我们又应该如何将用户无意识的经验转化为可见之物呢?
我会结合携程接送机列表页的一次改版与大家分享,在面对供应商服务同质化困境,我们将主体从服务商转向车型本身后,如何构建符合用户直觉认知的3D车型矩阵。而基于全新的车型模型,我们又是如何探索用户场景,用可视化语言与动态场景,编织出一条流畅、高效的决策路径,让用户的选择过程成为一种直觉的延伸。
01.信息架构重构:从服务商本位到用户价值导向
携程接送机业务是由携程专车和境内外的服务商共同为大家提供服务的,用户在我们的页面上其实就是做两件事:1决策车型,2选择自己想要的服务

随着携程平台对于服务标准的优化与提高,我们发现服务商信息呈现逐渐同质化的特征,而从下单行为的数据表明,用户又更加倾向于服务好且价格稳定的携程专车。

为了让用户体验更佳,我们重构了货架的信息结构,按照车型维度,通过后台的筛选策略和PK展示唯一的服务商,帮助用户做减法。主体信息由之前的服务商变为了具体的车型,通过用户的点击,再分步骤展开详细的服务力信息。

为了更好地表达车型,除了纯文字的方式,我们也尝试了一些可视化的手法,比如照片与插画,当然它们都有各自的缺点和局限性。


最后我们选择的是更能表达空间感的3d模型。
我们选取了汽车制造业上的轮轴比和轮高比,以及轴距长度等参数,以这两个决定不同车型之间最底层的差异的因素,建立了我们的基础车型。
同时我们针对车漆和使用场景进行了桌面研究,比如AXALTA涂料公司的车漆报告,出租车的色值演变过程等等,对基础车型做了进一步的细分。




至此我们完成了第一步,搭建了新的框架与1.0的车型矩阵。

02.虚拟汽车影棚:专业布光技术赋能车型视觉标准化
随着我们对用户诉求的细分,我们的sku也精细到了指定型号的车型(岚图梦想家、丰田埃尔法等等),但由于我们的基础车型和真车的细节信息量差异非常大的。

为了让这两类车型在页面上能够展示得更和谐的同时,还能让指定的品牌车型保留自己的特点。我们参考了汽车广告的拍摄,我们对灯光种类与作用做了调研与筛选,比如最能定基调的顶部光源,模拟城市内透的宫格灯、汽车隧道的条形灯、纯面的灯等等。



以及在摄影棚中会运用到的一些辅助灯光器具。

基于汽车摄影的布光法则,建立数字渲染标准,为我们的车型搭建了一个虚拟的汽车摄影棚。
通过光影细节的升级,我们搭建了2.0的车型图。
我们强化了指定车型自身的品牌属性,同时也对齐了基础车型和指定车型的车身信息量,而在新的虚拟摄影棚中,我们也可以更高效地去批量生产视觉统一的车型图。
03.场景驱动下的体验创新
有了我们的车型之后,我们就可以依据这个模型去地挖掘用户的使用场景,做更进一步的创新了。
首先是旅游出行的场景,我们从nps和社交平台上收集到了很多针对行李额的痛点,在我们用车行李说明的页面上,行李本身尺寸被描述得非常仔细,但是一个后备箱里能放多少个行李箱,才是用车场景下用户更关注的重点。

因此基于直觉设计的理念,我们把冰箱门打开,把大象放进去。
通过这么一个小小的信息传达改变,我们的用户能更清晰直观地找到符合自己诉求的车型,最终数据上看,我们的用户有了比较明显地往更大的车型下单的趋势。
针对我们另外一部分的订单,商务出行的场景。
我们将岚图梦想家从豪华车型中剥离出来。通过动画强化了这个车型舒适的乘坐体验来吸引用户尝试,动画上线后,对比无图的版本,这个车型的订单量获得了提升。

另一方面,在香港市场,
我们发现用户对带鸥翼门的modelX是有很大兴趣的。因此我们把特斯拉车型进行了细分,拆成了modelS和modelX两个车型,通过动画突出modelX的鸥翼门,上线以后这个车型的下单占比也收获了正向的数据反馈。

我们还挖掘到了特殊人群的使用场景,
比如无障碍和儿童出行的场景,我们用情景化的方式,通过模拟线下司机拉出轮椅踏板的方式,呈现了我们对无障碍车型所能提供的服务。

对于亲子出游,从安全性上,我们调研到,婴儿座椅是有年龄段标准的,为了帮助用户更好地选择合适的座椅,我们也对此进行了针对性的设计,未来也会在前端对此进行优化。

04.结尾
以上所说的内容,都是我们基于直觉设计所完成的从框架到信息传递的改版,过去我们更多是通过文字和插图的方式做信息传达。

而在直觉设计的理念下,我们希望以用户感知和经验作为内核,通过可视化、动态反馈、情景化联系等手段,把信息更低门槛地传递给用户,帮助他们高效做决策的同时,也能完成我们的设计目标。


希望未来能探索更多直觉设计这一模型的可能性,感谢大家的观看。
本文由人人都是产品经理作者【TripDesign】,微信公众号:【TripDesign】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于 CC0 协议。
- 目前还没评论,等你发挥!

起点课堂会员权益



