/交互案例研究-疫情下的救命稻草: 外卖app的体验感

交互案例研究-疫情下的救命稻草: 外卖app的体验感


众所周知,

不同类型的应用程序应该包括不同的体验设计。
那么,对于外卖类APP
我们应该如何创建极佳的用户体验呢?



今天,小编就为大家分享一个团队项目。该项目通过对新加坡McDelivery应用程序进行重新设计,为用户塑造了更加快乐且愉悦的麦当劳体验。



项目介绍

Introduction
McDelivery在2005年首次在新加坡推出,它是麦当劳的一项延伸服务,旨在通过外卖的形式为顾客进行送餐服务。McDelivery在新加坡取得了绝对的成功。然而,虽然麦当劳作为新加坡的终极快餐备受追捧,但这款应用程序却遭到了用户的负面评价。

通过在Google Play和Apple App Store上查看这款应用程序的评分和评论后,成员们发现用户留下的最常见反馈有以下几点:

  • 尽管有专门的页面,但用户无法编辑他们的地址
  • 在餐品送出后,无法实时更新状态
  • 如果出现问题,用户无法找到专门的页面进行反馈;也没有聊天框可以连接到客户服务以寻求帮助


因此,在这一背景之下,团队决定重新设计McDelivery APP,从而为用户提供一致的操作体验。


Google Play 商店和 Apple App Store 的评分和评论截图

设计流程

Deisgn Processes

在这一案例中,设计者们作为UX/UI设计师,通过使用各种方法对当前的McDelivery进行研究,并进行了包括竞争分析、亲和图分析、线框图、风格设计等各方面的设计。

竞争分析 (Comparative Analysis):

成员们将McDelivery程序与目前在新加坡可用的其他顶级送餐应用程序进行了比较,并找出这些APP中存在哪些适合用户的功能。他们因此获得了进一步的信息,并了解了McDelivery的使用者可能想要什么,以及应用程序本身应该如何改善整个麦当劳的体验

FoodPanda & Grab Food

作为目前新加坡领先的送餐应用程序,FoodPanda和Grab Food不仅仅为一家餐厅提供服务,因此与这些应用程序进行比较很重要。最重要的是,FoodPanda和Grab Food也是麦当劳参与的平台。


根据成员们的分析,很明显,这些竞争对手设计了实时GPS跟踪骑手、随时可用的客户服务支持、直接与送货骑手联系以及易于编辑的地址页面等功能,这些是可以为用户提供极佳用户体验的功能。因此,这些也是他们能够在设计概念中所需要考虑的部分。

Comparative Analysis


亲和图 (Affinity Diagram):
亲和图的使用可以帮助设计师们更有效地根据从各种研究方法中收集到的反馈对问题进行分类。根据用户反馈,McDelivery面临以下几个主要问题:
  • 跟踪交付:跟踪系统已经过时并且其准确性不可靠

  • 应用程序的整体外观和体验APP目前看起来已经过时,商品价格也没有准确说明,同时高度依赖文本而不是图片

  • 送货骑手:用户无法联系骑手

  • 整体导航:虽然APP相对简单,但也存在一些重大问题,例如无法编辑地址,这会导致很差的用户体验

  • 功能:用户需要在APP上根据说明执行各项功能


Affinity Diagram


用户角色 (User Personas):

团队创建了两个不同的用户角色,Shanti Prem和Maxwell Heng。其中,Shanti Prem是主要角色,她存在包括输入错误送货地址,以及很难找到寻求帮助的方法这两个问题;而Maxwell Heng是次要角色,他则存在无法跟踪骑手的操作问题。

User Personas


客户旅程 (Customer Journey Map):
团队使用Shanti的用户体验作为主要角色,并绘制了其客户旅程地图 (CJM)。通过使用CJM,不仅可以直观地知晓用户体验,还可以了解到Shanti在体验McDelivery应用程序时所传达的情感


通过CJM,不难发现,Shanti的整体体验并不顺利。在这种情况下,Shanti的“Happy&Cheerful Experience”则未能达到预期。

Customers Journey Map


用户流 (User Flow):

借助Shanti的场景体验,大家想出了一个新的用户流程来解决她的问题。如下图所述,Shanti已经在McDelivery中下单,但地址填写不正确。因此,设计者决定在APP中创建一个新功能,即:"Contact Us Page"。


在准备阶段,Shanti能够通过聊天框功能与客服联系。同时,他们还绘制了用户流程的线框图。大家相信"Contact Us"功能将改善用户体验,因为聊天框功能可以直接减少Shanti搜索热线号码和等待客服所花费的时间和精力。

User Flow


Wireframe





最终设计

Final Design

将McDelivery应用程序重新设计背后的思考过程在于项目目标本身。团队希望通过图像来表达快乐,以此作为麦当劳创造自己快乐的延伸。

风格 (Style Guide):
这款APP的调色板融合了麦当劳品牌中使用的主色调,例如"McDonald's Yellow"或"McDonald's Red"。为了平衡应用程序的整体外观和感觉,还使用了"Off White"、"Off Black"和"Grey"等基本颜色。

Style Guide



解决方案 (Solutions): 

根据不断研究与分析,团队提出了以下解决方案:

Edit Address

最初,用户只能编辑他们的邮政编码。通过重新设计,用户不仅可以输入他们的邮政编码,也可以选择手动输入他们的地址

Tracking of Delivery Page

现在,在餐食准备的每个步骤中,都会使用图标和时间线通知用户。用户还将能够跟踪送货骑手的位置移动,以进一步预估骑手的距离。这将为用户提供充足的时间进行准备。

Customisation Page

关于汉堡的定制,团队目前为用户提供了相应的视觉元素。用户现在可以看到他们最终的定制结果,而不是依靠想象。此外,用户所添加的每种成分所对应的价格也会清晰显示。

Contact Us Page

此外,在APP中还引入了一项"Contact us"的页面功能,如果有任何问题需要纠正,用户可以在应用内与客服团队和他们的送货骑手联系。这一功能采用聊天框样式,而不是之前的呼入形式。



麦当劳作为一个品牌,凭借高效的服务和标准化的流程,建立了强大的忠诚度。多年来,它已经发展成为一种狂热的最爱,并传播"Happy&Cheerful McDonald's Experience"的主题。


当劳取得的成功一样,他们所推出的McDelivery也应该传播这一主题。因此,通过重新设计,不仅可以留住麦当劳的忠实客户,而且还有望获得新的McCustomers



以上,就是McDelivery APP的案例研究。对这一项目感兴趣的同学,可以点击下方链接,进一步了解McDelivery的更多设计过程。



案例链接:
https://medium.com/@farahiskandar/redesigning-happiness-at-a-click-of-a-button-mcdelivery-ux-ui-proposal-36058b23673d


编辑:YAN
图文来源网络,侵权告知即删

本文来自微信公众号“交互设计小站”(ID:racjiaohu)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。