专业知识分享案例研究 · 设计 · 体验

用户体验设计案例研究|为用户找到一家物美价廉的商店

2021-01-1010 MIN READ原载于微信公众号 ↗

在这个案例研究中,我将分享我对我在设计Swiggy App中的“购物清单”功能时,当时所做的设计决策以及我的洞察。作为用户体验设计的 初学者,这将是我的第一个用户体验研究案例。

01

背景介绍-Swiggy

Swiggy 是印度最大、排名最靠前的在线食品订购和配送平台。它的总部位于印度班加罗尔,截至2019年3月,Swiggy已在100个印度城市运营。在2019年初,Swiggy的业务范围扩展到了普通产品配送领域。


02

发现问题(discover)

在新冠肺炎大流行期间,我们像其他人一样开始在网上购物。就在那个时候,我偶然发现了Swiggy的网上商店。对于在线食物配送,Swiggy App是我的首选,而且似乎是在几个月前他们还推出了一个网上商店购物功能,所以我想试试。

我喜欢Swiggy 的一点是你可以通过App从当地的商店里购买商品。

因此,我首先列出了所以我 需要的物品。我打开App 搜索 我经常去购物的商店。 但是我找不到它。还有其他商店看上去也值得信赖,所以我决定选择从他们之中选择。我需要购买的物品一共有18件。

我逐一搜索我要买的东西。但我的清单上有 五种物品 在那家商店买不到的。

我有点生气,但我后来试着看看在这家店我买不到的物品在另一家商店是否有售。但当我找到它并试着从另一家商店里选择这个商品的时候,一个对话框提示我说:

(是否替换购物车内商品?你的购物车里有Punjab Delight的商品,你想放弃这些选择而添加Food junction的商品吗)

因此,我要想买齐我清单上的物品只能从两家不同的商店分别下两次订单并支付两笔订单的运费。

当时,我的 UX设计大脑 中产生了一个想法,如果Swiggy 中有一个 购物清单功能,这个功能里你可以先添加购物清单,然后 选择多个商店 并从这些商店中一次性购买所有商品。这样一来,运费也会降低,对买卖双方而言都更方便。

所以我想在Swiggy里设计一个购物清单功能。

如果你想快速浏览最终的设计,可以访问这个链接:

(此处为视频,请在原文中观看)

查看链接 ↗


03

问题陈述

帮助Swiggy的用户 一次性从多家商店购买商品 并帮助他们找到当地 最好的商店。


04

验证问题

除非问题得到验证,否则我不能随便设计解决方案,无论是为了我还是为了重要的一群人。所以,我采访了一些人,问他们在使用Swiggy App时的体验。我采访了 20个 平常会使用网上商店购物的人,其中 有12人使用Swiggy。这次采访的目的是为了验证用户在进行网上购物时是否会面临我设想的问题,并发现他们可能会面临的其他问题。

以下是验证设想的数据:

  • 有 19名用户 面临不能选择多个商店购物的问题。
  • 有 18名用户 面临无法在一家商店购买齐所有东西的问题。
  • 有14名用户面临无法在他们所在的位置 找到他们知道的商店 的问题。

05

新发现的痛点

1、用户 无法比较 两家商店之间的价格。

2、用户很难 找到一家划算的商店。

(一些预算紧张的用户倾向于比较两件商店的价格和去找最便宜的商店。)

在用户 挑选商品 和 查看购物清单 这两个行为之间有 太多的反复 发生。他们要从“商品部分页面”到“最终结账页面”来“查看已选择的购物清单”。(这对用户来说实时了解他们选择了什么商品是一件困难的事)。

过多的反复

在支付页面,用户在重新检查已选择的商品时很难浏览购物清单。

让我告诉你一个可能发生这种问题的情况。

_现在假设一个用户想要检查自己是否已经将某个商品添加到了清单里。因为无法一眼就找到那个他想确认的商品,所以他必须把清单里每一样商品通通看一遍。这增加了用户的认知负担。_

这些项目彼此排列得很近,这使用户很难将一个特定商品和另一个商品区分开来。因此更难浏览。

这证实了我的猜测,我不是唯一一个面临这些问题的人。

06

用户调研

由于我没有关于Swiggy杂货商店的用户或是潜在用户的数据,所以我自己做了研究去了解更多关于用户行为的信息。

其中有四组用户类型。

独居人士、小家庭、大家庭和对城市还很陌生的人。

我决定在网上购买商品时研究大众的用户行为。而我这样做的主要目的是为了了解:

  • 用户在Swiggy或其他网上商店服务平台是如何搜索商品的?
  • 他们事先会列购物清单吗?
  • 他们什么时候使用该App?是在什么情况下?
  • 他们如何在线上或线下搜索他们熟知或不了解的物品?
  • 他们的购物清单一般包含多少项?它们之间有什么不同?
  • 他们的品牌偏好?

我对14个用户进行了采访:

  • 6个独居人士
  • 4个小家庭(5人以内)
  • 4个大家庭(5人以上)

从采访和他们发给我的购物清单中,我发现了一下内容。

用户访谈结果


07

商品种类及用户的选择标准

Swiggy对产品的分类

食品类

  • 水果和蔬菜 - 按数量选择(克)
  • 牛奶、鸡蛋和面包 - 按品牌或散装数量选择(克)
  • 厨房用具 - 按品牌或散装数量选择(克)
  • 包装食品和零食 - 按品牌或散装数量选择(克)
  • 即食食品 - 按品牌和数量选择(克)
  • 饮品 - 按品牌和数量选择(升)
  • 冷冻食品 - 按品牌和数量选择(克)
  • 冷藏食品 - 按品牌和数量选择(克和升)

非食品类

  • 家庭护理类 - 按数量选择
  • 健康与保健类 - 按品牌和数量选择
  • 个人护理类 - 按品牌选择
这帮助我确定用户是如何搜索商品的?他们为什么喜欢某个品牌?购物时倾向购买多少数量?是什么帮助他们做出购买决定?

08

想法1

我的第一个目标是减少用户流程。

从多个商店购物的用户流程

功能一:商店助手

为了缩短和减少不必要的步骤,我想到了 创建商店助手的想法。它类似于谷歌助手,但它只用于商品购买。

想法背后的工作

因为这不是我的最终设计,所以在这里我不会研究的细节。我会在另一篇单独的文章中介绍商店助手背后的研究。

这是我的 第一次尝试:

第一次尝试 - Swiggy商店助手

我喜欢这个想法,因为它 解决 了上面提到的 所有问题。所有我开始制作原型并在用户身上进行测试。在测试中, 出现了以下问题:

  • 对用户来说这似乎是一个 漫长的过程。
  • 如果用户在选择完所有商品后 想要更换商店 怎么办。现在他只能 重新将要买的商品再选一遍。
  • 对于用户来说 ,先列出购物清单 然后又必须在商品选择页面 选择清单上的商品 是很 多余 的。
  • 有些用户提到,“为什么这个 App不能预选 我列在购物清单上的 物品?”

用户就是上帝

我再次开始研究能让用户实现他们目的的Swiggy用户流程的所有可能性。我开始勾画一些新的解决方案。

现在开始,我的目标是找到一种方案,在该方案中用户列完清单后,App就会为用户预选清单上列出的物品。

那么预选需要哪些数据来进行呢?需要三个变量:!Image

品牌、商品和数量

用户在清单里输入商品包括详细的商品品牌和数量,然后App就会预选出这些商品,用户也可以检查确认。

很简单吧! 但并非如此。在某些情况下,App可能无法预选商品。

不确定商品品牌的情况

用户以母语搜索商品但这种母语表达没有被保存在App数据库中

这个 预选 商品的方案 不是很有效。

我再次勾画一些新的想法并想到一个解决方案。


09

继续迭代-想法2

新的解决方案

之前的用户流程 是用户 列出清单、 选择商店、然后在该商店中 挑选商品。

新用户流程背后的工作

而 新的用户流程 中,用户先一边看着清单一边 搜索 并 选择所有需要的商品,然后 选择 他想要从中购买的 商店。

很简单吧!那我们开始吧!

为了 将搜索选项和清单结合 在一个屏幕上,我想让搜索和选择商品变得简单一点,让它们耗时更少和占更少的屏幕空间。

建议的商品会显示在搜索栏下面

当 用户搜索 一件商品时 ,建议的商品会显示在搜索栏下面 供用户选择。

为了完善首选商品的建议,在上面我已经对 用户的品牌偏好 做了研究。这帮助我解决了不同的情况,如用户如何搜索商品。因此,我针对特定的情况设计了以下内容。

用户如何搜索商品的情况

1.品牌 + 商品

在这种情况下,用户知道他想要的特定商品及其品牌。

当用户输入品牌时,该品牌的所有商品将按照受欢迎程度的顺序显示。接着用户输入商品会出现指定结果。

然后用户选择该商品。

2.商品

在这种情况下,用户知道他想要的商品但 不确定 商品的 品牌 或 想要散装(无品牌)。

当商品名称在搜索栏被输入时, 散装商品 会 显示在最前面, 然后是品牌商品。

3.商品 + 品牌

这种情况 紧接着上面说的第二种情况。用户输入商品名后会 得到关于品牌的提示,然后用户输入提示去指定商品。

这会帮助不知道商品详细信息或在寻找商品的用户快速找到商品。

下一部分是 清单。!Image

可以查看搜索栏下方的列表

在用户 搜索 并 选择 商品之后,选定的商品会显示在下面的 “你的清单” 里。在清单,用户可以编辑商品数量并随时查看商品和预算。

下面是高保真原型。

建议的商品界面

建议的商品界面包括不同商店商品的 图片、名称及价格范围。因为一些商品如 水果和蔬菜(主要是 农产品 和 散装商品)的价格在两家商店之间会有所差异。

更改商品数量的选项

选择商品的界面会有更改商品数量的选项。

当用户开始选择更多商品时,他们必须 向下滚动 以 查看所有选择了的商品。

  • 因此,我提供了一个 “查看清单” 的 按钮,用户单击它就可以查看所有他们选择了的商品。
  • 该清单 按照商品类型来排序。这将帮助用户更快速地找到特定的商品(有助于用于浏览产品)。
  • 在 底部栏 将显示选择了的 商品数量和总价范围。

最终结账页面

用户 选择了商品 并 重新检查(查看清单)后,对商品进行确认。

  • 在下一个界面,Swiggy 算法 为用户 推荐 其所在区域内最好的商店。
  • 商店将 按照受欢迎程度 排列。
  • 用户可以根据 送货时间、 成本 或者 热门选择 来对商店进行分类。
“人们要么用时间换金钱,要么用金钱换时间。”

按送达时间来分类商店

  • 用户还可以 自由搜索 喜欢的商店或在 商店 之间进行比较。

用户可以根据 有售的商品数目、该商店商品的总价格 以及 所需的送达时间 来 比较 不同的商店。

如果用户希望看到每个在售的商品,他们可以点击 查看商品 展开商品列表。

在这个展开的列表中,不在售的商品颜色会被 减淡 并会被 先列出。这让用户 更容易 比较 两个商店(因为这是我们区分列表的方式)。

现在用户要 查看不同商店 的商品列表来进行比较时,该商店的 商品列表都是保持展开状态 的。因此用户在商店之间反复比较查看列表时不必每次都要点开商品列表了。最后,用户结账。

这是最终设计的用户流程:

(此处为视频,请在原文中观看)

查看链接 ↗


10

主要挑战

1、主要的挑战是将我的想法从商店助手这个想法中脱离出来,因为它有很多误区。

2、另一个大的挑战是在这个过程中理解对话设计。

3、由于没有用户的搜索数据,所以研究用户的网上购物习惯对我来说很难。


11

我能做得更好吗?

1、与更多的用户交谈并了解他们的偏好。

2、针对用户的网上购物方面做更多的研究。

3、增加一些功能例如用户所在区域的热门推荐列表并提供保存该列表的选项。

4、让更多的用户进行用户测试。


12

我学到了什么?

这个案例研究让我学习了很多关于用户体验设计东西,也我更了解自己。以后将会有一篇专门写这个案例研究如何让我更了解我自己的文章。

  • 所以我学到的第一件事就是不坚持自己喜欢的想法。
  • 文档对于捕获整个项目的所有信息是非常重要的。
  • 不管你多么喜欢当前的设计,迭代都是必须的。
  • 针对用户测试中发现的问题来提出解决方案。
  • 以更好的方式与我的导师交流设计。
  • 研究如何更好地采访用户。在采访过程中我很难提出开放式的问题。
  • 撰写网上文章。这是我有史以来的第一篇网上文章。
  • 讲故事的艺术。我在这方面仍然不擅长,但是我确实学到了一些。

也非常感谢Manav Madaan在整个设计过程中给了我深刻的见解。

感谢你的阅读~


参考文章:

查看链接 ↗

作者:Vinay Thorat

译者:太上老菌(学园的新实习僧)

原文请戳【阅读原文】

为尊重版权和译者

转载请联系我们

本文原载于微信公众号,正文与配图已转存至本站以便长期访问。 查看原文 ↗

有想具体聊聊的问题?把你的情况说一说。

联系咨询