微信号:ali-ccoux

介绍:Small UI; Big UX 专注互联网服务体验设计,分享交流用研、交互、视觉领域研究心得.

新人任务总结:阿里小蜜旅游场景购物体验概念设计

2016-11-16 19:45 潇鸿,子邑

背景介绍


就在两个月前,随着一大波校招小鲜肉陆续毕业加入,阿里 CCOUX 也为他们准备了一个神秘的大礼包——新人陪跑计划(某只毕业入职刚 1 年的小编本以为自己是吃瓜群众一员,图样图森破啊 ಥ_ಥ )。而在「忙死你不偿命」的新人陪跑计划中,我们和其他校招同学们一起,在接受各路业务与专业知识的洗礼之余,也被师兄师姐们根据各自负责的业务布置了几道作业题,需要在有限的时间内独立或组队完成对应的概念设计方案产出(强调一下是概!念!设!计!,既不需考虑技术成本,也不会正式开发上线),最终以 Presentation 的形式展现给大家。


在第二次新人作业中,我们选择了「阿里小蜜的旅游场景购物体验设计」一题,在紧张的两周时间内完成了完整概念设计方案从无到有的产出,今天就在这里和大家分享一下我们设计思考与产出的全过程。




在这里也容小编帮师姐介(guang)绍(gao)一下阿里小蜜(大家可以打开手机淘宝,在「我的」页面里有小蜜的入口)这个我们部门的拳头产品。阿里小蜜的产品定位是主动关怀、好玩有趣的智能私人助理,当你在淘宝购物遇到问题,可以随时找它咨询,它还可以帮你充话费、查天气、订机票、挑东西……好了,介(guang)绍(gao)时间结束!


业务诉求分析(缩范围)


因为选题内容和「旅游」紧密相关,所以我们先对在线旅游的行业背景做了一些调研,大体了解了国内在线旅游的市场和人群细分情况,再结合阿里小蜜的产品定位分析,从整个在线旅游市场用户(老年人、商旅人士、驴友、白领、大学生等)中筛选出能最大化我们产品优势的目标用户。


在对阿里小蜜的业务有了一定了解(我们平时跟的都是其他项目,并不参与到小蜜的实际设计工作中去)之后,我们知道小蜜定位为主动关怀、好玩有趣的智能私人助理,讨论认为产品在旅游市场的优势有大数据智能推荐、关联生态保障、价格成本等,而劣势在于细分场景较多(除了旅游还覆盖到很多其他购物场景),使得旅游的「专业特色」相对偏弱。


基于这一系列的产品优劣势分析,我们和对应的人群特征进行了匹配,最终将产品的目标用户圈定为国内白领 & 大学生用户。(真的不是因为这类用户好代入自身才选的!)




或许有人会问:这不应该是产品经理干的吗?嘛这毕竟是个设计团队内部新人任务性质的虚拟项目,不存在产品经理的角色,所以没有产品经理也得冒充产品经理上啦~(而且小编很同意好的设计师也是好的产品经理的观点,虽然自己目前还很弱菜……)


用户诉求洞察(找机会)


在确定了目标用户为国内的白领 & 大学生后,我们使用用户体验地图(Experience Map)工具,和团队多名同学一起共创,分旅游前、旅游中、旅游后梳理了潜在的用户场景、痛点/需求等,进而从中洞察出产品设计机会。




因为旅游这个场景还是非常大的,在有限的两周时间内,把挖掘出来的机会点一一转化为设计方案显然不太现实,我们需要进行合理的取舍。在和师兄讨论交流之后,我们最终选择了在链路的三个关键环节(旅游前、旅游中、旅游后)各挑了 1~2 个用户诉求痛点相对普遍,和核心目标关联也相对强的场景展开设计,保证最终的概念设计方案有重点、故事完整性高,在这一过程中也忍痛放弃了不少不错的点子。




设计策略(定方向)


在确定了要做的设计机会点后,我们开始围绕这些机会点确定需要设计的功能特性、提炼出具体的设计目标,设计目标最终聚焦为三个:清晰直观、聪明贴心、情感化。




视觉风格探索


在视觉风格的探索上,首先要保证的是与前期结论一致:用户-目标-视觉体现的目标点。


在步骤上是这样安排的:首先搜集目标用户(国内白领 & 大学生)对视觉方案的影响,可以发散一下思维收集关键词如下:




之后第二步是在视觉表现层与设计目标对应起来,通常在视觉上我们考虑的是形、色、质、构、字这 5 个维度,因为字的方面在无线端一般考虑的都是 PingFang 字体,可发挥性不大,而构成方面在这次方案中是保证信息层级的一个基础,所以这次主要的着力点在(颜色)、形(形状、形态)和质(质感)的方面。





首先从颜色的维度,体现我们的设计目标,要进行一些筛选和定位。首先分两个场景,一个是在 IM 界面中,考虑到用户群年轻的特性,所以选择颜色方面会更活泼和明快,而因为界面按钮会很多,避免刺激,所以纯度上会稍微低一些。在旅游场景界面中,大面积色块会出现渐变色的背景,考虑到有两点:一是渐变色背景比较符合用户群的特色;二是使界面更加的灵动。在两种不同的界面下采用不同的设计表达,是因为 IM 界面需要的是对话的强调,所以视觉方面会尽量减少干扰,而在旅游场景中需要沉浸式的设计,所以侧重点会有不同。




形(形状):无论是在 IM 界面还是具体场景中,卡片以及按钮的出现都是很多的,大面积出现的形状会给产品的基调带来一个很直观的视觉感受。基于情感化的设计目标,锋利的边缘在情感上会给人带来距离感,而圆角则会感觉更亲切,所以都处理成了圆角




形(形态):在形态的处理上,更多的考虑到的是情感化的因素,以及用户对二次元的偏好特征,所以有些场景会考虑到用插画的形式来表现。




质(质感):在质感上在这次方案出体现的也比较突出,大概列出以下几个维度并分析一下这么做的原因。




总体来讲,这次方案大的目标把控是最重要的,要保证整个界面视觉的统一性,目的是为了让用户感知到是在同一个产品中操作。同时又要保证产品的差异性,因为在不同的场景中,用户也需要感知到变化,所以在 IM 界面中以对话来强调,而在其它的场景中视觉感受力会增加分量。




案例


BB 了一大堆,终于到了具体案例的展示阶段啦~


1)在用户通过小蜜预订机票的场景里,考虑到目标用户是对价格敏感的人群,我们围绕聪明贴心的设计目标,设计了降价主动提醒与自动抢票的方案。




在用户按现有流程确认完目的地和出发时间后,小蜜会自动预测机票近期的降价趋势,并主动提醒用户是否需要自动抢降价票;当用户选择继续时,小蜜会引导用户选择理想的价格区间(降个 5 毛 1 块也自动抢票的话,反而会造成干扰),并给出对应的抢票成功率(给用户心理预期,避免设置不合理抢不到票的情况;如果发生未到价格区间但余量已经很紧张的情况,小蜜也会主动通知用户先下手为强)。



此外,在完成自动抢票-支付-出票成功的流程之后,小蜜还会为用户推送贴心的出行准备提醒,并引导用户接下来去预订返程票、酒店住宿、景点门票等。


2)在用户通过小蜜预订酒店住宿的场景里,我们围绕清晰直观的设计目标,提供了全景预览模式,来弥补靠图文介绍判断住宿条件的片面性(比如看照片内景似乎很精致,到了真实地点才发现周围环境很差)。




在完成入住基本信息(时间、地点、类型、附加要求等)的确认流程后,小蜜会推荐一批符合条件的酒店住宿。




用户在浏览相关介绍信息之余,还可以从外到内全景预览推荐酒店的环境、评价,对酒店整体条件有更直接的了解与判断,进而再决定是否预订。以下是全景模式的 Demo 演示视频:




3)当用户完成了所有的预订准备工作之后,临出发前 & 行程中需要查询具体的交通住宿景点安排,他们可能会遇到一系列的问题:


  • 短信 & 订单被太多无关内容分散,怎么清晰地查询获取出行相关的信息?

  • 旅程难免突发事件,怎么提前做好准备?或是遇到后不会那么焦虑?


围绕清晰直观的设计目标,我们向用户提供了出行相关的信息聚合流(基于用户的订单记录自动生成,用户也可以手动编辑添加更多内容),在出行前一天主动推送给用户(也可以从底部快捷操作区域呼出),让用户可以在一个视图里完整查看所有关心的信息,而不是去短信/订单里逐一查找;围绕聪明贴心的设计目标,当有突发情况出现或可能出现的时候,会有对应的风险预警提示,让用户提前做好准备,除此之外也会对用户进行情绪安抚。




在设计信息聚合页面的时候,我们分成时间和空间两个维度来组织内容(体现为时间轴和地图),考虑到交互流程中不同界面(比如IM页与详情页)的风格有一定的差异,我们还做了一系列的动效转场设计,让界面的跳转衔接更加流畅自然,不显得突兀。


以下是包含各种动效转场的 Demo 演示视频:




4)当用户完成旅程、返回出发城市后,小蜜还会基于之前的行程自动生成一份清晰直观的总结报告,吸引用户阅读和主动分享(卖萌元素穿插其中),让更多新用户开始了解和使用小蜜。




当新用户对报告产生兴趣时,会引导他去小蜜查看更多的出行攻略(来自其他小蜜用户的行程总结分享),一旦心动,就可以直接在小蜜里开始订机票订酒店的流程啦~




总结


最后是来自某小编的一点感想碎碎念:整个新人任务中,大家都感到很累、压力很大,但个人觉得虽然有时间紧、业务不熟悉这些问题,毕竟还是有很充分的创新发挥空间的,所以做设计时心情也还好;而真实工作中,更大的挑战来自于业务、技术等各方面的限制,而你需要在这些限制之下去做出有业务价值和技术可行性的最优设计决策,也需要在他人的压力与挑战面前保持自己对体验设计的底线。一起加油~~

 
37点2度体验 更多文章 UX 宝宝喊你来拆圣诞礼物啦! 阿里设计湿硬盘里的秘密——专业篇
猜您喜欢 80%的人已经领取了的元旦惊喜大礼包 软件开发全过程,描述得不能再准确了 甲骨文要放弃不赚钱的Java?开发者不安,心痛 企业安全:为何总有修不完的漏洞? 【头条发布】中国“互联网+”案例100征集活动正式启动