01
设计挑战
想象一下，Grab正在菲律宾推广送餐服务（如FoodPanda）。你的任务是为摩托车配送员设计App。以下是流程的概述：
- 顾客通过GrabApp预订送餐。
- 订单被展示给驾驶员。驾驶员必须决定是否愿意接受这份订单。请注意，订单必须是灵活的，不仅能显示送餐工作，而且还能导航。
- 一旦接受工作，驾驶员就必须去餐厅取食物。
- 取完食物后，驾驶员必须将食物运送到顾客所在的地方。
在开始设计App时，请描述你的调研方法、发现问题、以及设计过程中你的考虑。
关键交付
- 一份假设清单，以及如何验证这些假设。
- App端到端流程的线框。我们希望显示需要用户交互的流的微观状态。
- 选择几个关键屏幕以展示视觉设计。
平台：Android手机-720 X 1280px
02
了解任务
Grab的使命是在东南亚建立一个人人都能获得更好的服务的产品形态。Grab遍布该地区的八个国家，每天都有无数人使用它的服务。
为了理解并解决与App相关的挑战，我们还必须了解与App交互的产品形态的不同区域。
图1：Grab交付产品形态图
1.配送员，Grab的合作伙伴是日常运营的重要组成部分，他们与公司合作，为客户提供最好的服务。因此，为了给客户提供最高的满意度和质量，Grab为他们提供了工具和服务，使他们能够有效地完成工作，并获得良好的体验。
2.企业家（配送工作提供者），也是Grab的合作伙伴，使他们能够利用配送服务来改善业务，并建立基于信任和有效解决方案的业务关系。
3.消费者，是产品形态的最终用户，我们设计工具和服务，来使他们的体验尽可能地顺畅。
在本次练习范围内，我将重点放在产品形态的驱动因素方面。
随着Grab在菲律宾推出送餐服务，马尼拉将成为开始运营的主要地点。马尼拉的交通流量在东南亚排名第三。2个轮的车可以打败拥挤的交通，这是有道理的，因为骑车穿越捷径具有明显的优势。
为摩托车配送员设计的应用程序是一个改善配送员应用程序体验的机会，让他们可以更快地完成工作，克服交通问题，缩短配送时间，并有可能促进该地区的经济发展。
Grab在playstore中已经有一个Driver应用程序，但我不确定是否有多个应用程序用于不同的运输方式，或有一个通用应用程序。因此，我认为在某种程度上，我将在此任务期间重新设计它。
03
定义目标用户
根据上面定义的任务，我将重点关注配送员群体。
我们可以将配送员受众分为两个主要类别：
- 首次注册的配送员：配送员已成功完成Grab的送货服务注册
- 经验丰富的配送员：曾参与配送服务一段时间（每天25–30份工作）
两者的动机相似，但需求略有不同。首次注册的配送员需要更多的入门指导，而经验丰富的配送员则更需要提高效率。
在下一部分中，我们将使用Exploration vs Exploitation框架来识别用户需求，以定义更多挑战。
04
了解用户需求
在开始解决方案之前，最好先了解应用程序在何时或何处使用的情境以及用户当前面临的挑战。
- When。我认为配送员会在工作时间内使用该应用程序。工作班时段可能有所不同，有些人可能在白天使用，而另一些人可能在晚上使用。
- Where。配送员通常会在骑摩托车到不同的取货和送货地点时使用此应用程序，以获取准确的指示。
我还访问了playstore中的Grab driver应用程序，查看了一些评论，并确定与手头任务相符的任何反馈。我想知道用户当前面临的任何问题以及积极的反馈，以便我可以更加重视它们。
我收集了所有的二手调研资料，并将其放入了一张思维导图，以便在做出设计决策时，始终可以参考该图。该图确定了哪些上下文将为配送员带来良好的体验，以及哪些是应避免的事情。
除此之外，我还对如何分配或通知司机工作进行了假设，以使分配程序化和透明化。
图2：从配送员的角度进行广泛的上下文分析的思维导图
05
故事板
我已经定义了我们将根据任务的可交付性来构建一个Android应用程序。
我就如何看待用户体验创建了一个快速的故事板，该技术的灵感来自Airbnb的首席执行官Brian Chesky，他聘请了皮克斯动画师来形象化Airbnb客户（房东/房客）的体验。
创建故事板有助于我理解用户的旅程，也使我能够了解上下文情境并构思用户可能面临的挑战或需求。
图3：整个配送员旅程顺畅的故事板
06
问题
通过查看用户评论，各种上下文情况和故事板，我认为以下是我可以解决的一些痛点，以提升端到端的用户体验。
- 取餐地离当前地点很远。
- 无法沿相似的路线接受多份工作来提高效率。
- App每日收取的费用。
- 能够在2G或低速网络上运行。
我列出了具体到App用户流的关键阶段的一些好的和不好的体验。
1.接受工作
- 良好的体验：找到服务范围内的工作。
- 良好的体验：能够在接受之前快速浏览现有的工作。
- 良好的体验：能够查看交货地点和预计的收入。
- 不好的体验：在上一份工作的中途遇到工作要求。
2.取餐配送
- 良好的体验：能正确识别食物包装。
- 良好的体验：如果是送餐，能检查实物制作情况。
3.在取餐和送餐地点
- 良好的体验：能够与指定人员联系。
- 不好的体验：无法联系到人，可能导致耽误工作。
07
用户旅程和优先级
根据《算法之美》一书，当面临未知情况时，人们倾向于探索或利用权衡。探索就是通过尝试新事物来收集信息。利用就是使用该信息有效地执行任务。
01 探 索
为了使初次工作的配送员愉快而又轻松，我使用了一种叫渐进式呈现的方法。它是一种交互技术，可延迟高级选项或很少使用的选项的出现，以减少错误的数量并帮助用户学习。
我的主要目的不是要让用户拥有所有可用选项，为此我们会将频率较低或较复杂的任务分配到以后的步骤，以关注核心用户流程。
在这种情况下，我们使新用户能够完成完整的端到端的用户旅程。
图4：简单的线性端到端用户旅程
02 利 用
在配送员熟悉流程之后，他们可能希望设置自己的偏好，以便通过一天完成更多工作来最大化他们的收入。在这种情况下，技术和商业环境开始发挥作用，AI优化的路线为配送员提供了更多的工作，而商业则为努力工作的配送员提供了奖金。
图5：具有用户首选项的高级用户流
03 信息架构
为了适应初学者和专家用户，我想利用一种体系结构，该体系结构在整个旅程的每个阶段都有一个起点，并且具有出色的执行力。
图6：App的信息架构
我做了一些快速的粗略草图，以便根据上述用户旅程确定上述信息架构在屏幕和其他情况下的外观。
图7：布局和用户旅程状态的粗略草图
08
线框
在了解了当前的一些挑战和需求之后，我想探索两种类型的应用程序：
1、应用程序内的导航可提供完整的端到端体验
- 它可以更好地控制性能测量，并提供非常个性化的建议，以改善配送员的工作，最终提升整体体验。
- 删除体验或工作无法拥有的任何第三方可靠性。
2、轻量级的App就可以完成工作
- 纯功能的App。
- 节省流量消耗和电池的使用。
此外，在进行低保真原型制作时，我确保屏幕是基于2个重要观念：
1、将行动或功能的调用映射到特定区域或屏幕以供参考。
2、提供不超过2个的选项在任何给定的屏幕上执行操作。
01 主屏幕
在下面的线框中，我们建立了功能的布局和映射。如信息架构中所述，当前屏幕将具有与取餐/送餐工作相关的所有内容的线性流。
如果用户点击配置按钮，他们将被重定向到信息架构的第二部分，即与配置和首选项相关的数据。
此布局建立了一个非常简单的导航流程。有一个突出的按钮（CTA），可向用户提示可能的下一步操作。
图8：主屏幕（离线）
02 在 线
当用户点击Go Online按钮时，将显示上述屏幕。
- 实时状态卡旨在提供最新的事件和状态的摘要或概述。它也可以用来通知用户公司的最新公告。用户可以向上滑动它，以查看任何相关信息。
- 该工作卡为配送员显示基本信息，如往返地点、预估费用、预计时间等，以帮助他们做出决策。
- 该线路概况以可视化的方式告知配送员位置，以便清楚地根据当地的规范标识信息进行配送，如交通状况、道路网络。
- 如前所述，CTA带有醒目的标签，并告知下一步行动的可能性。
图9：主屏幕（在线）
其余的线框可以在下面查看。
图10：应用程序内导航应用用户流程
图11：轻量级应用程序用户流程
09
视觉效果
在移动应用程序界面设计或任何屏幕的设计中，经常提到90％的UI是字体。我也更喜欢这种方式，因为我不是插画家，而且通常很难找到涵盖我所有用例的图标包或图形，因此几乎不可能找到具有相同主题和风格的不同图标。
01 版 式
我严格遵守了material.io指南中提到的规则。我决定使用的字体是SF Pro。
02 地图设计
为了让用户感觉融入品牌，地图设计起着至关重要的作用，且设计应与应用程序的样式和品牌相辅相成。我使用mapbox设计地图样式。因为这是一个将地图与应用程序主题进行匹配的非常直观的过程，因此Framer X Mapbox组件在探索和调整方面非常有帮助。
图12：Framer X Mapbox组件
在以下屏幕中，我探索了该应用程序的各种主题和布局，这些主题和布局将补充公司的品牌建设。我还尝试整合一些细微的符号，这些符号表示用户处于在线还是离线状态。使地图的主题与Grab品牌和该应用程序匹配非常重要。地图的颜色选择基于：
- 不会在地图上用不相关的位置数据使用户不知所措。
- 简单的地图样式，以突出显示路线和优先位置。
- 较少的饱和色彩，带来愉快的体验。
图13：地图样式和卡片的不同迭代
如果用户离线，则该卡片用于提供程序摘要。卡片的设计符合标准。
图14：卡片和FBA的说明
我还使用了悬浮按钮（FBA），用于突出主要功能。
我尝试使用品牌的颜色来突出显示卡，这不仅意味着用户的可用性，而且还有助于品牌化。除此之外，我还为按钮使用了更高的对比度颜色，从而通过了《网页内容无障碍指引》（WCAG）。
配送员上线后，我面临的挑战之一是对卡上显示的信息进行优先级排序，以便配送员能够快速浏览信息并更快地做出决策。
我对屏幕设计所做的一些假设是：
- 配送员使用街道名称来识别位置。
- 配送员更愿意知道他们将从特定工作中获得的预计收入。
- 配送员想知道工作的总距离，以确保他们有足够的汽油。
我还尝试了不同的布局来显示以上信息。
图15：卡片浏览中的信息布局
我还在底部尝试了实时状态卡的不同状况。
图16：浏览不同的实时状态卡
你可以看到我设计的一些屏幕，以及它们在用户旅程中如何组合在一起。
图17：从离线导航到取餐导航的UI设计
10
结论
我在这次设计练习中很快乐。我敢肯定，我只触及了整个产品形态的表层，需要更多的上下文和用户分析来确定新的挑战和需求。我想列出一些未来的探索，继续采取行动，让配送员的体验更加全面和愉快。
1、两个轮的车的友好用户导航。
这本身就是另一种产品，可极大地提高自行车和摩托车的驾驶体验。我真的很喜欢Johny Vivo在他的案例研究——“Tangible Google map”中为自行车和骑自行车的人设计的概念。
2、画中画（PIP）模式
我最喜欢Android的一个原因是它的应用程序不仅可以与中央操作系统进行创造性的通信，而且还可以在应用程序之间进行通信。印度的Swiggy使用了这个点子，我很想探索Grab应用程序可以利用的各种交互方式。
原文链接：
查看链接 ↗ Thrizu
译者：设计小菌
原文请戳【阅读原文】
为尊重版权和译者
转载请联系我们
我 们
服务.体验.交互设计传道者
公众号
「yizhizhaojun」
一只朝菌设计学园
联络微信
平菇老师
「zhaojundesign」
「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办，致力于创造卓越的设计知识学习课堂，专注交互设计、用户体验设计、服务设计领域的专业知识教育。
教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校，以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。
清华大学有训曰：行胜于言。「一只朝菌」谨承母校百年教诲，时刻铭记师者之责，为好学者传道授业，为有志者掌灯引行。