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


    随着消费不断升级,旅行的意义也正在不断的改变,从观光旅游到休闲度假再到local体验,跟着酒店去旅行、跟着美食去旅行的越来越多。消费者对旅行住宿的概念已不再是一个休息睡觉的场所,酒店已成为旅途生活中重要的组成部分,入住星级酒店、打卡网红酒店已成为一种潮流的旅行形式。

    马蜂窝作为一个中国领先的旅行玩乐平台,已获得过亿用户的信赖,而越来越多的旅行爱好者们喜欢在平台分享旅行游记、攻略以及问答,逐渐累积了大量宝贵的内容,马蜂窝又将这些内容精细提炼,匹配用户需求,为旅行者提供优质的酒店等旅行产品服务。

    马蜂窝|交易体验 酒店预订流程升级 - 图1

    旅行是一件让人兴奋的事情,而旅行中的酒店住宿,却是一件让人头疼的麻烦事,别担心,马蜂窝通过内容提炼,能够帮你挑选最优质的酒店。

    马蜂窝|交易体验 酒店预订流程升级 - 图2

    马蜂窝|交易体验 酒店预订流程升级 - 图3

    马蜂窝|交易体验 酒店预订流程升级 - 图4

    「预订流程」是酒店预订最为关键的环节,也是影响交易成功与否的分水岭,而表单填写是被用户吐槽的最多的部分。为了提升用户使用感受,帮助用户快速完成交易,设计团队决定从下单流程着手,使用体验地图的调研方法,记录用户在预订过程中遇到的问题,感受他们在不同阶段中的情绪变化,结合现有问题对预订流程进行精细化设计重构。

    • 用户吐槽

    通过本次的调研,收集到很多意外的吐槽「这页面这么苍白,是Excel吗?」「姓和名到底要不要分开写?」等等,主要问题集中在填写表单中:

    马蜂窝|交易体验 酒店预订流程升级 - 图5

    • 用户情绪

    通过面对面的交流,我们深刻感受到用户在预订时的情绪变化。吐槽大多伴随着焦虑,甚至有那么一瞬间快要抓狂了。

    马蜂窝|交易体验 酒店预订流程升级 - 图6

    马蜂窝|交易体验 酒店预订流程升级 - 图7

    「提升转化率」是酒店下单流程的关键目标。本次优化将紧密贴合业务目标,并结合调研结果,最后达成共识,将以「信息框架整合」「内容层级排序」「交互体验升级」「状态追踪及时」四点作为精细化设计重构的主要优化策略:

    马蜂窝|交易体验 酒店预订流程升级 - 图8

    1.信息框架整合:简化重复冗余的视觉噪音,将不同类型的信息规律排列,提升信息传达效率。
    2.内容层级排序:将信息权重重构,强化需要被关注的信息,提高用户填写效率。将有利信息聚合前置,提升下单效率。
    3.交互体验升级:贴合用户体验的基本原则,设计符合用户心理预期的交互方式。提升使用时的愉悦感,加强品牌专业度,提升复购率。
    4.状态追踪及时:提供相关的帮助及反馈,有效减轻用户焦虑。建立品牌信任度和意料之外的贴心服务,用细微的服务为品牌赋能。

    马蜂窝|交易体验 酒店预订流程升级 - 图9

    用户在预订时酒店,首要任务就是让用户高效愉快的完成表单填写。在表单页首屏呈现整个界面中最突出的内容,第一时间抓住用户视线,将繁杂的信息整合排序,有规律的向用户传达品牌理念。明快直接的传达产品服务,高效的与用户沟通。

    image.gifimage.png
    酒店政策信息是影响成单的关键因素,用户需要对购买的产品信息有清晰的认知。在设计过程中,将政策信息做强调展示,用户在支付前可减少反复查对,降低焦虑感。在取消政策中,用图标与高亮的颜色营造「安全氛围」。友善地增加了酒店提示,明确告知酒店设施服务,提升下单速度,避免了因为隐藏信息导致的客诉。
    image.png
    image.gif

    马蜂窝|交易体验 酒店预订流程升级 - 图14
    酒店业务的表单相对于其他表单(如注册登陆),需要填写更多信息。为降低用户心理压力,设计时减少视觉干扰,将标题与填写内容明显区分,利用颜色与字重拉开视觉差异。同时对采集的信息做分类管理,将同类信息整合为一个填写项,并将较长的提示文案简化为用户熟知的 icon ,帮助用户快速识别并高效的完成填写。

    马蜂窝|交易体验 酒店预订流程升级 - 图15
    马蜂窝|交易体验 酒店预订流程升级 - 图16

    马蜂窝|交易体验 酒店预订流程升级 - 图17
    在整体页面中,各单元模块之间的关系很微妙。作为页面中的一部分,各自都承载重要的职责。如何处理好单元与整体的关系,让用户在漫长的填写过程中降低烦躁,获得惊喜呢?设计运用恰当的间距将每个模块做明显的区分,用统一的 icon 管理每个模块,保持品牌统一性的同时,让用户快速读取关键信息。

    马蜂窝|交易体验 酒店预订流程升级 - 图18

    马蜂窝|交易体验 酒店预订流程升级 - 图19
    在信息爆炸的时代,智能设备上的每一区域都是寸土寸金。将二次确认信息放在顶部,能够让用户第一时间确认交易的关键信息,对产品有明确的认知,减少二次查阅。并将必要的填写内容呈现在首屏,让用户快速了解自己需要填写的内容,向用户传达关键信息,提升空间利用率。

    马蜂窝|交易体验 酒店预订流程升级 - 图20

    马蜂窝|交易体验 酒店预订流程升级 - 图21

    线上预订信息需要主动填写,用户与表单的对话就像是无声的交流,平台需要用简单易懂的描述传递信息,引导用户高效完成填写。

    马蜂窝|交易体验 酒店预订流程升级 - 图22
    姓名填写是整个表单中出错率较高,停留时长较长的一个模块。用户调研结果表明在此处的沟通出现了障碍,常见的问题如:姓和名为什么要分开写?每行写几个名字?入住人和联系人写中文还是拼音?
    在设计过程中,用更简短更直白的话术传达,充分发挥暗提示的作用,让描述更清晰。

    马蜂窝|交易体验 酒店预订流程升级 - 图23

    马蜂窝|交易体验 酒店预订流程升级 - 图24
    用户在参与平台的各类营销活动时,通常对规则一知半解,更多关注自己能够获得的福利。设计需要将繁杂的信息归纳整理,用简洁的语言传达给用户,将关键信息用统一的形式呈现给用户,提高理解效率。

    马蜂窝|交易体验 酒店预订流程升级 - 图25

    马蜂窝|交易体验 酒店预订流程升级 - 图26
    手机号采集时,预填内容需要符合用户认知,输入区域的长度符合用户预期。

    马蜂窝|交易体验 酒店预订流程升级 - 图27

    马蜂窝|交易体验 酒店预订流程升级 - 图28

    表单承载着收集信息的重任,这个环节相比浏览品类环节,略显枯燥乏味。我们需要关注每个节点的体验感受,在填写过程中给用户带来更多的信心,避免用户烦躁不安导致放弃预订。

    马蜂窝|交易体验 酒店预订流程升级 - 图29
    为了帮助用户校正填写的内容,使用实时校验的方法,在一列信息输入完成后立刻进行判断并给出结果反馈,避免全部填写完再返回修改或填写时持续报错。同时提示文案描述应更明确、更友善,用亲和的语言反馈用户。这样能在填写过程中给用户带来更多的信心,避免用户烦躁不安导致放弃预订。

    马蜂窝|交易体验 酒店预订流程升级 - 图30

    马蜂窝|交易体验 酒店预订流程升级 - 图31
    识别用户预订的目的地,针对境内外的信息采集需求的差异,智能匹配填写方式。同时借助暗提示的文案,清晰地表述填写规则。

    马蜂窝|交易体验 酒店预订流程升级 - 图32

    马蜂窝|交易体验 酒店预订流程升级 - 图33
    在移动端设备中,智能匹配系统键盘是提升体验的一个方法。根据填写的内容属性,唤起匹配的键盘,帮助用户高效的完成填写。
    image.png
    image.gifimage.gif
    用户在选择入住时间时,触发选择器后需要二次滑动选择,且选项较多,增加用户操作成本。设计时,在弹层中直接显示所有可选项,用户能够快速找到自己目标 ,大大减少误操作,压缩停留时长。

    马蜂窝|交易体验 酒店预订流程升级 - 图37

    马蜂窝|交易体验 酒店预订流程升级 - 图38

    马蜂窝|交易体验 酒店预订流程升级 - 图39

    结合用户使用场景的需求分析,实时关注用户订单状态,让用户在旅程中感受到品牌的专业度与效率。提供相关的帮助及反馈,有效减轻用户焦虑,提升用户安全感,建立品牌的信任度和意料之外的贴心服务能,都可以更好的为业务赋能。

    马蜂窝|交易体验 酒店预订流程升级 - 图40
    用户在每个关键节点都会有不同的需求,设计需要为用户匹配对应的需求入口,如果遇到问题能够及时得到帮助。

    马蜂窝|交易体验 酒店预订流程升级 - 图41

    image.gif
    在订单跟踪的过程中,向用户呈现对应的行程进度。让用户在退款后能够看到退款进度,降低用户焦虑,提升品牌信任度。
    马蜂窝|交易体验 酒店预订流程升级 - 图43
    image.gif
    用户取消订单后,对于业务来说流失的不仅是一笔订单,更是一位用户的支持。抓住这个机会点,在取消订单后对用户表达关怀与问候,巧妙的收集用户取消的原因,让用户感受到品牌的用心。用情感化的提示能够召回用户,同时帮助产品循迹优化填单流程。

    马蜂窝|交易体验 酒店预订流程升级 - 图45

    马蜂窝|交易体验 酒店预订流程升级 - 图46

    马蜂窝|交易体验 酒店预订流程升级 - 图47

    项目上线后,我们对上线后的数据和反馈也时刻关注。日均转化率有明显提升,填单报错率与跳出率大幅下降,下单停留时长明显直线缩减。通过新增的「取消原因收集页面」,获取到用户取消原因,根据这些反馈可以持续对填单页面进行有依据的优化与调整。

    马蜂窝|交易体验 酒店预订流程升级 - 图48

    马蜂窝|交易体验 酒店预订流程升级 - 图49

    住酒店是一段旅行的开始,而本次项目重构也是酒店体验升级的开端,这一次的成功需要感谢每一位同学的付出。今后我们将继续深入探索,为用户带来更好更优质的服务体验。

    马蜂窝|交易体验 酒店预订流程升级 - 图50
    使用说明

    马蜂窝 UED 由一拨儿「年轻爱玩」的专业设计师组成
    如果你读到这里并喜欢我们
    请长按下方二维码关注,同时把它推荐给你的挚友亲朋

    世界这么大,抓紧时间跟我们玩儿起来!


    马蜂窝|交易体验 酒店预订流程升级 - 图51