【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图1

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图2

订阅膳食计划的人这样做的唯一原因是避免每天订购食物所需的精力和时间。虽然该问题已通过膳食计划订阅服务解决,但为了获得良好的用户体验,还需要解决一些问题。

在这个案例研究中,我将分享这些问题是什么以及我如何通过设计解决这些问题。

链接到 Figma 文件

用餐订阅应用程序的典型用户会来到该应用程序,根据自己的喜好快速选择用餐计划,详细了解该计划的详细信息,最后进行支付和订阅。

用户痛点

餐饮订阅应用程序的用户面临的一些最常见的问题是:

  • 难以找到和决定适合他们食物偏好的膳食计划
  • 担心以后无法更改的固定膳食菜单
  • 严格的交付时间表——无法取消一天的用餐,交付时间不灵活
  • 没有关于已取消膳食 / 计划退款的明确信息,以防万一
  • 没有为订阅选择特定日期和持续时间的选项。感觉被迫长期订阅固定交付日。

“好的设计就是好的生意”——Thomas J. Watson

我将尝试使用此应用程序实现的主要业务目标是增加收入

我过去增加收入的方法以及我使用它们的原因:

  1. 优惠和折扣——用户喜欢优惠并尽可能利用它
  2. 推荐的附加组件— 这些有时有助于让用户的旅程变得轻松

注意:我将在适用的情况下讨论它们在设计中的实现。

我勾勒了一些解决用户问题的想法,并为最合适的用户流和 IA 创建了用户流和 IA。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图3

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图4

在我们深入研究屏幕设计之前,让我花点时间解释一下我对 “有序” 是什么的假设

我假设 “Orderly” 是一家自行准备并向用户提供膳食计划的公司。

现在,让我们进入屏幕设计。

📱 启动画面

通常,首先设计的屏幕决定了应用程序其余部分视觉语言。因此,围绕这一点做出决定非常重要。

在完成最终设计之前,我尝试了纯色、渐变、图像和不同的文本副本。

最终的设计很简单,也没有长文本阅读其认为适当的闪屏,秒内消失。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图5

📱 入职

入职屏幕很常见,但我花了一些心思才想出正确的入职流程。

我对在用户到达主屏幕之前应该询问的所有问题感到困惑。

下面,我展示了我尝试过的一种流程。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图6

这有一些问题

我在上面的流程上迭代了一段时间,添加和删除屏幕,直到我注意到:

  • 我问的所有信息无论如何都不会影响主屏幕上显示的内容
  • 增加了用户所需的时间和精力

该__目标应该是让用户到应用程序尽可能快地

我分析了我向用户提出的所有问题,但在入职流程中没有一个是必需的。

与其他膳食订阅服务相比,此应用程序有所不同。因此,我决定使用入职流程向用户介绍该应用程序

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图7

📱 分享位置

对于位置屏幕,需要注意细节以获得良好的用户体验。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图8

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图9

到目前为止,我已经解决了所有主要问题,但总有改进用户体验的空间。

在上述流程中,用户需要在屏幕之间来回进行大量操作。因此,我决定采用两种方式并使用底部表格来减少导航。从而减少所需的屏幕数量。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图10

📱 主屏幕

有很多膳食计划可供选择,导致决策疲劳。因此,按类别显示膳食计划将有助于他们做出更好的决定。

过程

我决定展示几个类别,并为用户提供一种搜索方式。这对于解决寻找膳食计划的问题是有意义的。

注意:我将单独讨论膳食计划卡设计。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图11

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图12

我在提出类别时遇到了很多困难。因此,我研究了其他应用程序,以找出这些应用程序如何创建类别的模式。我发现这些类别是建立在用户在现实生活中如何选择不同的东西之上的

(例如:尝试新事物 — Swiggy、Popular Funds — Groww、最近玩过 — Spotify)

我还进行了一项简短的调查, 以了解人们早餐、午餐和晚餐的饮食习惯。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图13

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图14

记得,我说过我会单独讨论膳食计划卡吗? 这是为什么。

膳食计划卡携带用户将要查找的主要信息。因此,需要大量的注意力来决定哪些信息会出现在这些卡片上。我花了很多次迭代才想出一个以可消费的方式呈现正确信息的设计。

以下是相同的几个主要迭代:

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图15

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图16

很长一段时间,我都在努力决定膳食计划的名称。我尝试了更多的迭代,处理卡片的复制和布局,但一直在循环。

后来,我决定使用食品名称作为卡片上的主要信息

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图17

更多的迭代

在下面的最终设计中,我删除了每周 / 每月计划并将其替换为价格 / 膳食,因为:

  • 用户会在他们想要购买的任何期限内购买。显示每周 / 每月价格无论如何都不会改变用户的决定。
  • 并排显示每周 / 每月价格使它们看起来像两种计划,但事实并非如此。
  • 所传达的价格 / 餐点将根据总应付金额计算。根据价格 / 膳食,用户可以大致了解他们需要为膳食支付多少费用。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图18

📱 膳食计划详情屏幕

在结账之前,用户会关心的事情很少——固定的菜单和严格的交付时间表。那么,让我解释一下我是如何解决这些问题的。

我想出了一个可定制的膳食计划来解决用户对固定菜单的担忧。可定制的膳食计划将允许用户在订阅膳食计划后管理他们的膳食

过程

最初,我决定允许用户在订阅之前完全自定义他们的菜单。这是有道理的,因为它让用户可以完全控制他们每顿饭吃什么。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图19

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图20

我又做了几次迭代,但在计算账单时发生了很多混乱。发生这种情况是因为我没有时间并且已经选择了计划。所以,我做了竞争分析。我分析了其他类似的产品以了解他们的用户流。

我看过的几个网站:

得出的结论是 **在显示菜单之前 ** 要求选择他们想要用餐的计划

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图21

上面的布局不起作用。因此,我尝试要求用户在主屏幕上选择日期。但是,这带来了向用户呈现空状态的问题(以防未选择日期)。

显然,事情并没有解决。所以,我花了一些时间重新分析我试图解决的问题,并意识到:

  • 订阅前的定制并没有完全解决用户的问题。它最终导致了一个固定的计划(只是一个高度定制的计划
  • 很多用户的时间和精力都将用于决定他们在接下来的整个月中想要在他们的膳食中吃什么。这将导致更多用户离开应用程序而不是订阅膳食计划。

因此,我决定让用户在结帐后进行自定义并为此设计屏幕。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图22

现在,我已经 提到了 “选择日期”,让我借此机会分享点击它时出现的屏幕。除了自定义天数选择之外,我决定让用户选择自己的持续时间,以解决严格的交付时间表问题。我这样做是因为每周 / 每月的持续时间不适合每个用户的需要。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图23

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图24

让我在选择不同类型的天时,还可以分享上述屏幕的外观。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图25

📱我的饭菜屏幕

之前,我提到过在结账后定制膳食计划,以帮助用户管理他们的膳食。让我解释一下我是如何在应用程序中设计它的。

过程

我最初的想法是允许用户更改送餐时间和地点、跳过一餐、在特定时间内暂停用餐以及取消计划。这是有道理的,因为它使一切都非常灵活,但我没有从业务的角度考虑一些主要问题,也没有决定正确提供哪些功能(我将在某个时候讨论)

注意:“我的饭菜” 屏幕存在,让用户在订阅后查看、管理和编辑他们即将到来的饭菜

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图26

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图27

在上述两次迭代中,我都无法在我的设计中正确处理一件事,因此在进行更多迭代之前,我记录了

  • 用户将在此屏幕上执行的操作
  • 这些操作所需的数据点
  • 每个动作的优先级

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图28

现在,使用该文档作为指南,我能够提出一个有点正确的设计。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图29

我又做了几次迭代,在那里我:

  • 在布局上工作
  • 删除了不相关的信息,例如用餐计划的持续时间,
  • 决定放弃更改位置的功能,因为这将是一个非常罕见的操作
  • 想出了约会的想法,因为用户在寻找餐点时会以类似的方式思考——我今天早餐要吃什么?不是,周一我要吃什么早餐?

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图30

在上述所有迭代中,我允许用户在交货时间之前随时对他们的膳食进行任何形式的更改。这是错误的,因为这会导致业务损失。因此,我决定添加一个时间限制,在此之前用户可以进行更改。

现在,该应用程序只允许用户进行更改

  • 直到 **早餐和午餐的交付日之前的午夜 ** 和
  • 直到 **晚餐交付当天中午 **

想出这些时间,想想我们的妈妈们什么时候决定每天每顿饭准备什么😉

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图31

接下来,我将分享送餐过程中涉及的不同状态的屏幕以及用户单击 “定制餐点” 时出现的屏幕。

与任何屏幕 / 元素的情况一样,我也对这些进行了迭代,修复了副本和布局。这是最终的屏幕。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图32

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图33

(从左到右)— 初始屏幕、搜索屏幕、项目删除屏幕、项目添加屏幕

📱 钱包屏幕

当用户找不到他们一直在寻找的一些关键信息时,他们就会失去信任,最终可能不会购买。因此,有必要在适当的地方以可消耗的方式呈现重要信息。

过程

制定退款政策很容易。我的想法很简单——金额将退还到用户的银行账户。

在我的脑海里,我有一个“有序钱包” 的概念,用户可以用它来支付他们对他们的饭菜的定制费用。用户所需要做的就是往钱包里充钱。

我认为每次用户选择定制他们的餐点时,都会在支付流程上浪费大量时间。因此,如果付款发生在应用程序本身内,它将使用户体验愉快。

再三思量后,我决定将金额退还给 “Orderly Wallet” 本身的用户。这将给出与 “有序” 相关的所有交易的公平画面。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图34

我想将金额作为硬币退还,但意识到没有必要引入另一种交换令牌。这会让用户难以理解。因此,我坚持只在用户熟悉的情况下才退款

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图35

现在,我将谈谈“Orderly Wallet”的最终设计是如何演变的。

在下面的类别屏幕(北印度)中,我添加了免费送货优惠。到那时,用户已经决定了他们想要什么样的膳食计划。因此,提供免费送货将是促使他们购买更多商品的良好提示。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图36

最后,我也决定设计通知。用户希望收到通知的事情有很多。

【外卖改版】使膳食计划订阅者能够毫不费力地购买和管理他们的膳食计划 - 图37

  • 视觉设计——如何选择颜色、如何发现不平衡的用户界面、如何选择使用的图形(图像和图标)
  • 写得更好,深思熟虑的副本。复制真的可以成就或破坏设计。
  • 设计师中有一句流行的说法—— “像用户一样思考”。这个项目正是教会了我这一点。我已经学会了如何用用户会想到的问题进行设计,然后用用户将用来在屏幕上查找内容的心智模型进行设计。
  • 文档的力量——我曾经只考虑针对用户的问题和需求的各种解决方案,假设我会记住一切,但我怎么会错过人脑每秒会产生数千个想法的事实。忘记想法和数据是不可避免的。
  • 自我意识重要性。当一个人清楚他们在想什么时,表达就会变得更容易
  • 如何在最终做出任何决定之前牢记业务和用户,了解这些决定背后的 “原因”

我希望您喜欢阅读案例研究,并感谢您努力将其读完。

另外,大声喊叫 在整个项目中为我提供指导、指导和鼓励。

🤝此外,我目前对担任产品设计师的机会持开放态度。请随时在TwitterLinkedIn上给我留言。我总是乐于接受一些建设性的反馈、建议和讨论。

谢谢你。
https://bootcamp.uxdesign.cc/case-study-enabling-meal-plan-subscribers-to-buy-and-manage-their-meal-plans-effortlessly-6a66400f7e2c