A. 美团外卖产品分析报告:二 产品设计
> 点击查看原图
上图使用思维导图的方式,完整展示了美团外卖 App 的功能菜单,按照主菜单可划分为四类。
首页: 以分类、优惠等多种形式展示商家,用户可进行搜索、挑选。
闪购: 单独展示生鲜超市类商品,区别于首页的餐饮,主推基于周边生活圈的闪购业务。
订单: 查看所有已被创建的订单,用户可进行评价、售后、再来一单等操作。
我的: 集中管理用户资料及资产,包括地址、收藏、钱包、优惠券等,以及客服中心等入口。
> 点此查看原图
上图使用泳道图的方式,分别从消费者、商家、骑手三者的用户角度,模拟展示了美团外卖产品的业务流程。
从中可看出,消费者与商家、骑手之间的流程关系是密不可分的。消费者是触发整个流程的主导者,而商家与骑手则作为服务消费者的角色,三者形成一个完整的业务闭环过程。
从流程图可看出,美团外卖的登录、注册方式,基本以手机号码为主。即使使用第三方社交账号登录,也必须先绑定手机。
主要原因在于,美团外卖的用户是以手机号码为基准,一个号码对应一个用户,这样既能保证用户的真实性,也可减少刷单、刷评论等现象。而且,同一个账号是允许在多台终端同时登录的,用户资料及购物车等是支持实时同步的。
因为手机号码是点单取餐的必备条件,所以无论从用户或产品角度,使用手机号码都是十分合理且自然的选择。
美团外卖 App 界面以橘黄色为主色调,并贯穿整个产品设计。除了底色、图标、文字,还配合可爱的袋鼠形象、骑手服饰等,整套色系已深入人心,可以说是非常成功的 VI 设计案例。
作为一款外卖产品,设计核心围绕在如何更优的展示商家,并引导用户进行点餐下单。页面中部位置用于显示商家与餐品,搜索、设置、消息中心等功能置于顶部,而底部则为固定的菜单导航栏。操作方式以上下划动、单点选择为主,偶尔配合左右滑动作为辅助展示。
> 点此查看原图
上图使用 Axure 软件,以倒推的方式,绘制了美团外卖 App 的中保真原型图,以便展示产品界面的设计细节。
原型图以灰度为主,并以彩色线条表示不同页面之间的流程关系,以蓝色注释讲解其中的交互设计关键点。
前文已经提到,美团外卖的登录与注册方式,均以手机号码为主,从界面设计也可以明显看出这一点。
账号的退出方式,则放在二级入口“我的-我的账号”中,因为一般用户不需要频繁切换账号,较少用到。
在美团外卖 App 中,新用户在未登录的游客状态下,仍然可以使用大部分操作,比如浏览商家、点选商品等,地址默认使用系统匹配的附近地址。直到超过限定范围,触发了必须登录才能使用的功能,那么界面则会提醒用户登录或注册。
上图展示了美团外卖中会触发登录提醒的操作,比如消息中心、购物车、个人信息、地址管理、订单结算等功能。这样的设计,对新用户更加友好,便于初次使用时的探索了解,直到产生下单需求时再引导注册登录。
作为一款在线外卖产品,功能核心自然是点餐下单,所以对于商家的展示、点餐过程的引导,则至关重要。
从上图可看出,美团外卖对于如何引导用户做了非常多的功课,几乎所有操作都成为了商家页的入口。
内容上不乏带有诱导作用的优惠信息,用来增强用户下单的欲望。同时,还提供了很多便于用户搜索、筛选的工具,以便提高下单的效率。
用户进入商家页后,可进行挑选、下单、付款等操作,示意图完整演示了用户从进入商家到完成支付的全过程。从中可发现,美团外面界面的设计逻辑非常清晰直观,即使是新用户的学习成本也相对较低。
用户在商家页挑选商品时,可以随意加减数量,并实时看到经过计算的实际总金额。而且,会贴心的提醒用户是否满足当前商家的满减优惠,还提供了“满减神器”帮助用户快速下单。挑选完商品,可以通过下方购物车进行二次确认,直观的展示已选商品及总价,确认无误后再结算。提交订单后,会再次具体的显示商品的价格公式,包括包装费、配送费、优惠红包等加减细节,详尽而不显罗嗦。在订单页,用户可以进行选择红包代金券、填写备注、选择餐具、开具发票等操作。最后完成付款,并跳转至订单详情页。
本小节中提及的便捷功能,是美团外卖产品设计中的亮点。在贴合产品核心功能的同时,既提高了用户的点餐效率,满意度提升,又促进了消费。
在商家页的左下角,有一个“满减神器”的功能,供用户快速选择符合满减要求的餐品,与“凑单提醒”相辅相成,相较更加直接有效。
满减神器会自动列出,当前商家中符合满减优惠的最优餐品组合。实现逻辑也非常简单,主要是通过商家历史订单,排列出被购买次数较多的组合。
由于满减优惠在外卖平台中已成常规活动,几乎所有商家都有力度不同的优惠,点餐时相当考验用户的数学能力。而美团外卖推出该功能,正是想用户之所想,为用户省去了凑单的时间,极大的提升了点餐效率。
订单页面的顶部,用户已消费过的商家按次数从高到低排列,形成最近常买的商家列表。便于让用户快速找到,减少查找时间。
从用户角度来看,消费次数居高的商家,通常是比较喜欢、经常会关顾的商家。
在订单列表中,已完成的历史订单,可通过“相似商家”查看与该商家相似的其他商家,主要是通过位置、品类、价位等因素综合筛选。
通常是用户喜欢该商家的餐品口味,但由于某些原因希望更换其他商家,就需要用到该功能,特别是对于重度用户来说尤其重要。
在订单列表及订单详情中,均有“再来一单”按钮,其功能类似于重新购买。
用户点击后会跳转至该商家页面,并自动将历史订单中的相同餐品放入购物车。如有其中有缺失的餐品,会加以提示。当用户想要重复点选之前的餐品,或只是进行细微调整,就可以通过简单的操作快速完成点餐。
除了适合用户再次重复点单,以及没有时间挑选餐品的场景。同时,当用户点错单并取消后,也可以使用“再来一单”重新添加,再到购物车中调整修改。
美团外卖的商家展示,是以用户当前地址为判断基准的,必须在配送范围内才会展示,同时用户地址也是骑手送餐配送的关键信息。因此,如何引导用户填写地址信息,并确保选择正确的地址,是较为重要的核心功能之一。
如上图所示,美团外卖主要提供了三个入口供用户对地址进行选择、编辑,分布在首页、提交订单、我的地址三个页面中,分别对应了下单前、下单时、下单后三个流程。
作为一款贴近民生的在线外卖产品,用户对于商家、骑手等服务的评价显然是非常重要的数据,上图展示了美团外卖中的多个评价入口。从示意图可看出,当前订单完成后,同时会有三个入口在提醒用户进行评价。如果在订单完成时,用户没有及时评价,之后再回到订单页仍会看到评价按钮,并且还单独设有“待评价”的分类。
评分机制可以促使商家、骑手提升自身的服务质量,商家一般会根据评价内容对餐品加以改进,而骑手为了收到好评也会更加主动服务态度。同时,平台还可以利用用户评价作为产品优化的数据支撑,从而共同作用于整个产品质量及使用体验的提升。
在积极引导用户评价的同时,还需要保证用户评价的真实有效性。除了前文提到的,以手机号码注册的方式加强用户的真实性,还限制仅能在订单完成的 7 天内评价,且评价后超过 7 天也无法再追评。因为间隔一段时间之后,用户对于外卖口感及服务体验可能产生偏差,或者受到其他因素干扰,最直接的评价应该在一周内。而这些评价内容,也会统一归入“我的评价”中,方便用户再次查看管理。
如图所示,用户可以在大多数页面的右上角找到“消息中心”的入口。里面集合了所有的通知类及沟通类内容,包括商家代金券、系统通知、客服消息、好友消息等。
根据实际场景可发现,用户在沟通的过程中经常需要返回进行其他操作,而“消息中心”的多入口设计,正是方便了用户的来回切换。
当用户在使用产品的过程中碰到问题,首要选择自然是在线客服,上图展示了美团外卖 App 中多个客服入口及界面设计,主要入口位于“订单”及“我的”页面。
由于外卖产品的异常问题大多与订单相关,所以“订单详情”的页面入口更为常用。对此,根据订单或状态的不同,用户进入在线客服的页面内容是有所差异的。结合示意图举例,同一个订单在“配送中”与“已完成”两个状态下显示的内容是不同的。
这样处理的目的,一是为了简化用户的操作,利用大数据预测当前需求;二是将用户引导至正确的解决渠道,比如直接联系商家或骑手,从而减轻人工客服的成本压力。
美团外卖 App 中,只要在用户已登录的情况下,已勾选的商品都会一直保留在“购物车”中,可以随时轻松找回,我将其称之为“购物车保留原则”。
用户点选过的商品必然是经过各种因素考虑的,即使当下不会立即下单,但随时能找回来是很关键的,给予用户一种“永远呆在购物车等着”的安心感。对于一款在线外卖产品来说,这是用户体验中至关重要的一点。
用户在任何商家挑选过的商品,都会在“购物车”内集中展示,并非常直观的将价格、配送费、满减优惠写明。如果出现商家休息、商品缺货等异常情况,还会加以提醒(如图中)。用户可随时在购物车内二次挑选、比较,再进行下单结算。结算后的商品自然会清除,但仍可在历史订单中看到购买过的商品。
同时经过实测发现,即使在断网、闪退、没电的极端情况,购物车内的商品也不会丢失。但如果是游客状态,购物车则不会永久保留,因为用户数据是跟随账号在线存储的,并支持实时同步于多个终端。
如图所示,用户若当前有订单处于进行时,在页面右下方会出现一个置顶的悬浮窗,用以显示订单的实时状态。
在“首页”、“订单”、“我的”三个主页页面中,都能看到该悬浮窗。用户点击后会直接进入该订单的详情页,方便随时了解当前的动态,比如骑手送到哪了。
结合图示可看到,根据订单状态的不同,悬浮窗的提示也会随之变化。悬浮窗会在用户提交订单后出现,而一旦订单完成(配送完成)即消失。
如上图所示的交互动作,当用户选择“待评价(或退款)”时,页面会在切换的同时全屏展开并置顶菜单。这是比较符合用户直觉的交互设计,实际操作令人感觉一气呵成。
在这个状态下,用户的“点击”行为代表了“切换并查看内容”的意图,所以全屏展开更利于用户的浏览,避免其他无关内容扰乱视觉。同样的交互设计,还出现在了首页的筛选功能、活动页面的分类菜单等。
美团外卖 App 中最常见的悬浮控件,主要是首页(或闪购)的“购物车”,以及订单详情页中的“红包”。
两个悬浮控件虽然性质类似,但在操作上略有不同。结合上示示意图,针对两者分别作简单分析。
购物车:当打开首页(或闪购)时,“购物车”控件的初始状态是完全显示的,以突出其功能位置。当用户划动页面的时候则呈透明状并收入边栏,避免阻挡内容。而如果停止划动,则会恢复完全显示的初始状态。
红包:初始状态同样为完全显示,划动时也是呈透明状并收入边栏。与购物车的区别在于,当停止划动时控件为隐藏状态,且可自由拖动。
“红包”控件是可以自由拖动的,且在停止划动后不会再次完整显示。如此设计可以尝试理解为,假设用户在订单完成后初始没有分享红包的意图,则之后再分享的可能性极低,所以控件只需保持“乖乖呆在角落且需要时也能找到”的状态即可。控件允许自由拖动,则避免了悬浮控件容易遮挡住页面关键信息的情况,比如当订单详情页需要截屏(分享、投诉)的时候。
在适时的时刻给出适当的提醒,告知用户关键的必要信息,可避免因信息不对称而影响用户的使用体验。并且,提醒的时机及方式也相当重要,一旦过于突兀或频繁,提醒就会变成骚扰。
以下配合示意图,讲述美团外卖 App 中数个较为典型的例子。
当用户使用“再来一单”功能,但该商家中的部分商品缺失而无法加入购物车,则页面会明显提示“ XX 商品已售完,并重新选择。”。
便于用户及时了解后,检查购物车并重新选购。避免了用户在不知情的情况下直接下单,造成下错单、订单纠纷等情况。
当用户进入商家页,但当前未在该商家的配送时间内,则页面顶部会出现“现在预定,**:** 起送”的配送时间提醒。
明确告知用户,现在如果下单属于预定,以及开始配送的时间。避免用户挑选完商品后才发现无法即时配送,甚至直接下单后商家却没有配送。
另外,如果当前未在商家的营业时间内,页面则会直接提示“本店打烊”,且用户是无法点选任何商品的。
当用户提交订单时,若系统判断收货地址所在位置有雨天、雪天等恶劣天气,则页面会在配送时间下方给出“恶劣天气下配送可能延迟,请耐心等待。”的提醒。
便于用户提前了解,该订单的配送时间可能较长,若继续下单就意味着默认接受。从而在一定程度上,可以减轻用户等待的焦虑感,并减少投诉、催单等事件。
当用户在任意页面进行屏幕截图时,则页面右侧会出现两个便捷选项,分别为“反馈问题”与“分享页面”。
选择“反馈问题”,会先进入包含马赛克及标记功能的编辑界面,方便用户先行除去截图中的敏感信息,或者标注需要反馈的问题所在。选择“分享页面”,则是微信、QQ 等社交分享按钮。另外,如果是在商家页进行屏幕截图,还会增加“好友拼单”的选项,点击后进入微信拼单界面。
当用户手机所在的网络出现异常时,则页面会出现“网络不太给力,请稍候重试”的提示。
从上图可看到,网络异常下的提示非常简单直接,页面会因为无法加载内容而完全空白,并提醒用户重新加载(如左图)。在网络恢复正常后,重新加载即可显示正常页面。
如果是在使用过程中间歇性出现网络不稳定的情况,则当前页面已加载的内容仍可继续浏览,但继续点击就会因为无法加载而弹出提示(如右图)。
作为对于社会舆论的回应,美团外卖经常会推出一些加分的选项。同时配合公关宣传,对于品牌形象的提升有着直接的影响。
美团外卖于 2017 年 9 月份推出“青山计划”,正式将环保工作提上议程。同时鼓励商家与用户一同参与,减少一次性餐具的使用。
用户可在提交订单时自行选择餐具数量,或者不需要餐具。同时,页面会有明显标识“一起为环保助力”鼓励用户参与,而商家参与活动后则可以点亮环保标识。
此举在一定程度上抵消了外界关于外卖污染的负面舆论,同时也有助于提升美团外卖的绿色环保形象。
美团外卖于 2017 年 8 月份推出号码保护功能,提高对用户的隐私保护。
用户可在提交订单时勾选“号码保护”,开启后商家及骑手只能看到隐藏四位数的手机号码,联络用户时需要通过第三方号码平台进行中转,并在订单完成一定时间后失效。
号码保护给用户带来的好处是十分明显的,再也不用担心外卖单随意丢弃会泄露地址、手机,或者与商家、骑手出现纠纷时可以避免被通过手机号码骚扰。
美团外卖免费向所有用户提供号码保护服务,让用户使用产品时更加放心,有助于提升对该品牌的信任感。
美团外卖于 2014 年左右上线初期就已支持匿名评价功能,主要是为了让用户提供更加真实的评分、内容。
用户对已完成的订单进行评价时,骑手评价是始终匿名的,而商家评价则可以选择是否匿名。而更加贴心的是,如果用户对商家给出两星以下的差评,则匿名评价会自动勾选。
该功能与号码保护相似,主要在于保护用户的隐私,并在一定程度上提高了用户评价的真实性。
美团外卖于2018年6月份推出骑手拉黑功能,用户可将服务体验较差的骑手拉黑,之后该骑手将不会接到该用户的订单。
此举可提升用户的使用体验,避免重复碰到态度恶劣、道路不熟的骑手。同时也可反推骑手提高服务质量,避免被多人拉黑而少接单。