UI/UX 案例研究：大家期盼已久的星巴克应用程序改版……

在本文中，我将概述改进和增强星巴克印度移动应用程序用户体验的方法。

.   .   .

 

重新设计的星巴克应用预览

关于星巴克印度：

星巴克以采购和烘焙最优质的全豆咖啡而闻名，为咖啡爱好者创造了一个全球性的天堂。除了优质的咖啡，星巴克还承诺在温馨的氛围中提供愉悦的体验和愉快的服务。

• 使命：激发并培育人文精神，每次每个人、一杯咖啡、一个社区。
• 愿景：坚守坚定不移的信念，将星巴克打造为世界领先的优质咖啡供应商。

关键统计数据：

• 星巴克业务遍及 75 个国家，拥有27,000 家门店，年收入超过220 亿美元。
• 星巴克应用程序取得了显着增长，过去六个月内网络 访问总量达到 125.15K ，Google Play 上的下载量超过 500,000 次， App Store 上的下载量超过 100,000 次。

.   .   .

 

首先，只是为了清楚起见……

我与星巴克没有任何关系，本案例研究中表达的观点完全是我个人的观点。本案例研究并不详尽，因为我无法完全访问他们当前设计所需的所有用户数据。本案例研究旨在改善我的学习体验，并挑战我为特定目的重新设计它。

我们出发啦！！！

.   .   .

 

为什么要重新设计？
2 月份，我启动了这项用户体验案例研究。在一次重要的客户会议期间，我第一次来到星巴克门店。通过星巴克印度应用程序选择虚拟订购系统，我遇到了令人惊讶的用户体验。

与我通常浏览菜单的方式不同，星巴克应用程序让我感到困惑和惊讶。让我们通过深入分析星巴克印度应用程序来探索重新设计背后的原因。

.   .   .

 

应用分析：揭开重新设计之旅的面纱
我在星巴克门店内通过应用点餐的经历让我进行了详细的分析。在柜台下单后，我重新审视了整个流程，并一丝不苟地记录了需要重新设计的方面。让我们来看看塑造这一变革之旅的步骤。

‣ 首次启动星巴克应用程序时……

首次使用者的星巴克 App 体验

• 面对最初的困惑，我努力在星巴克应用程序中找到菜单，周围都是诱人的菜单。饮品选项被卡片遮住了，甚至连查看饮品菜单都很困难。
• 选择详细信息选项后，我看到了文本信息，但过程并没有变得更简单。一些商店和餐厅的详细信息将我重定向到 Google PDF，这增加了复杂性。
• 突破来自移动订购和支付卡。点击订购按钮，我会看到一个视频按钮，旁边还有注册和登录选项，让我可以一窥用户旅程的曲折。

 

‣ 为了查看菜单，我必须经历这一切……只是为了查看该死的菜单🤯

星巴克应用程序入职流程

• 我认真考虑了“避免排队”这一原则，并着手进行注册程序，希望流程能简化。然而，事情发生了意想不到的变化，要求提供大量信息。
• 注册表格包括电子邮件确认、基本信息，甚至我的生日。虽然生日奖励的承诺是存在的，但用户可能会发现输入过多的信息很不方便。
• 此外，要求提供电话号码、地址、Pincode、首选通信方式以及条款和条件也增加了复杂性。值得注意的是，任何意外的应用程序最小化都需要重复整个注册过程，这凸显了对更用户友好的方法的需求。

 

‣ 因此，创建帐户后，我以为现在我可以订购了，但是……

只需探索您需要的菜单…😞

• 当我成功创建帐户时，我真的很恼火，但在下第一笔订单之前，系统提示我添加一张新卡。能够从我上次中断的地方继续操作是值得称赞的，但这个过程却出现了意料之外的转折。
• 导航到另一个选项卡以添加卡，提供的声明令人困惑。它建议在上一个屏幕上添加一张新卡，导致短暂的混乱。解决方案是选择“否”，然后会提示一个数字卡商店，我必须在其中选择一张卡并添加资金。
• 问题来了：为什么不在一个屏幕上简化这个过程呢？选择卡，输入金额（屏幕上有足够的空白），然后选择付款方式——简化这个过程可以显著提升用户体验。😐

 

‣ 经历了多么愚蠢的流程以及结果😕……

星巴克应用程序 — 在这里测试你的耐心

在经历了一系列的麻烦之后，我迫不及待地找到了订单标签。当我点击“继续”浏览菜单时，兴奋变成了沮丧，我看到了一条“即将到达您所在的位置”的消息。😂

令人惊讶的是，我已经允许该应用在星巴克店内获取我的位置信息——这是一个相当有趣的矛盾。这种挫败感让我放弃了该应用，选择在柜台下订单。

 

‣ 在应用程序内发现了一个令我烦恼的错误……

在商店上架的这款应用太蠢了

• 当我发现应用程序中的一个错误时，我意识到了一个至关重要的问题——拒绝位置权限会导致应用程序被强制关闭。如果用户不想分享自己的位置并希望手动输入，该怎么办？
• 赋予用户控制权是根本，符合 10 个可用性启发法中的“用户控制和自由”原则。授予用户决定位置偏好的能力（无论是手动输入还是共享），可增强应用程序的整体可用性。

.   .   .

 

星巴克 IN App UI 演示流程

 

.   .   .

 

星巴克应用程序存在许多问题，包括缺乏清晰的层次结构、一致性、可访问性、重大可用性问题和用户控制。我将在进行用户研究后列出所有这些问题以验证它们。

这些就是我必须处理的问题。普通用户肯定会遇到各种各样的问题。然后我意识到，这可以适用于任何应用程序，而不仅仅是星巴克。因此，为了更好地理解，我必须再次浏览该应用程序并征求其他用户的反馈。所以，让我们开始真正的工作吧。流程！

.   .   .

 

关于时间表和项目
当前的任务是找出当前运行良好的系统中的缺陷。每个人都知道如何让糟糕的情况变得更好。我相信，让好的事情变得更好才是真正的考验！

时间线： 2 个月 12 天
流程：设计思维过程
方法：面对面用户体验研究、线框图、UI 设计、可用性测试
工具： Figma、Illustrator

Figma 画板的幕后花絮

‣流程细分

为了发现挑战，我深入研究了定性和定量研究，并专注于 Android 用户。研究包括采访朋友和家人，以及使用星巴克应用程序进行个人观察。

• 同理心：通过访谈进行定性研究和通过调查获得定量见解，为了解用户观点奠定了基础。
• 定义：明确目标和动机，找出问题并收集重新设计的关键信息。
• 构思：利用亲和力地图、线框和用户流图促进创造性头脑风暴和解决方案概念化。
• 原型：制作 UI 和 UX 解决方案，我提出了原型以供评估和比较，解决已发现的挑战。
• 测试：通过可用性测试确保决策验证，并伴随成功衡量，以确保所提出的解决方案的有效性。

 

‣ 了解星巴克的设计体系

我必须专注于升级 UI，因为我正在重新设计星巴克，而不是从头开始。为了平衡原创性和现有组件，我必须构建我的设计风格指南，同时在很大程度上遵循星巴克的设计方法。

遵循星巴克风格指南，我通过尝试各种颜色和字体注入了现代氛围，并小心地保留了标志性的绿色作为星巴克的主要色调。

随着新功能的推出，用户界面的风格和美感以及改头换面的模式都经过了彻底的修改。为了提升整体体验，我们引入了自定义图形，旨在注入趣味性和清晰度元素。

平衡创新与熟悉度，挑战在于确保现有用户对更新后的体验感到满意。这涉及保持一致的导航和用户体验内容基调，与星巴克品牌精神无缝契合。

星巴克设计系统。点击此处

.   .   .

 

主要目标：

• 用户界面转换：通过改进的界面优先提供令人愉快、直观且易于访问的用户体验。
• 增强的应用程序功能：提出一套更加精简、分布更均匀的应用程序功能。
• 以咖啡为中心的美学：改变应用程序的外观，散发出以咖啡为中心的氛围，摆脱普通或博客式的美学。

个人目标：

• 利用多重角色：利用我在产品设计中的多种角色，担任用户研究员、用户体验设计师和用户界面设计师。
• 应对设计挑战：迎接设计挑战，做出明智的决策，并找到解决方案，促进持续学习。
• 培养创造力：释放我的创造本能，确保我的热情在整个重新设计过程中保持热烈。

.   .   .

 

共情

旅程从沉浸式共情阶段开始，深入进行用户研究，了解星巴克的客户群。我通过结合定量和定性方法，利用调查和访谈，对应用程序进行了全面探索。

 

通过访谈和调查了解用户：

选择星巴克进行重新设计为重新构想功能开辟了道路，但我寻求超越自己视角的多元化视角。调查和访谈成为获得宝贵见解的途径。

调查重点：调查旨在了解用户人口统计、关键体验阶段以及对星巴克和类似应用的总体看法。以下是一些调查问题和有见地的结果：

以下是我从调查中得到的问题和结果:)

调查问题

 

用户参与了我的调查，并获得了我所期望的结果，让我向您展示人口统计数据并分享我从调查中收集到的见解。

• 几乎大多数用户都喜欢从外面订购食物并食用。简单、方便且提供多种食物选择。
• 大多数消费者已经使用星巴克应用程序一段时间了。但他们大多用它来查看订单或钱包余额。
• 当被问及他们使用哪款应用订餐时，他们选择了 Swiggy 和 Zomato。有些人甚至表示他们通过电话下订单。因为服务、优惠、外观和易用性都很好。

.   .   .

 

• 顾客经常提到服务、产品照片和定价是改善订购体验的最重要因素。
• 在订购商品之前向他们提供相关详细信息可以改善他们的体验。
• 令人惊讶的是，大多数用户表示应用程序的外观会影响他们的用户体验。应用程序的流程应该简单、清晰、可识别且易懂。

 

调查中的其他一些见解：

• 90%的用户在被问及提前订购和取货时，都认为这种方式很方便、快捷、省时。
• 所有用户通常使用 Zomato 或 Gmaps 进行商店导航和了解时间以及其他相关详细信息。
• 他们面临的一些问题是客服支持、追踪和不必要的取消。从经验和使用情况来看，星巴克的客服很难找到

 

进行用户访谈

在用户研究的第二步，我与 8-9 名参与者进行了深入的用户访谈，涵盖了饮料/食品订购应用的日常活跃用户到不经常使用的用户。目标是解开星巴克应用使用的背景并发现客户面临的痛点。这些访谈通过电话进行，提供了有关用户的目标、关注点和对应用的态度的重要见解。

人口统计学代表性：公平分配，5 名男性受访者的年龄在 17 至 42 岁之间，3 名女性受访者的年龄在 24 至 37 岁之间，旨在形成一个能够反映星巴克当前用户群的代表性样本。

 

访谈要点：

1.移动订购偏好：几乎所有参与者都喜欢使用手机订购，尤其是在外面的地方。

2.使用第三方应用程序：许多星巴克的常客都使用第三方应用程序进行订餐。

3.定制愿望：用户表达了对应用程序定制的愿望，希望了解基于应用内行为个性化的新商品/优惠。

4.通知偏好：参与者承认通知会引起他们的注意，但过多的通知可能会令人烦恼。

5.主页动态浏览：用户更喜欢干净、清晰的主页动态，这强调了轻松浏览星巴克产品的重要性。

6.移动订单和支付反馈：在欣赏该功能的同时，用户也提出了改进建议，例如可以安排当天晚些时候取货。

这些见解为理解用户行为和期望奠定了坚实的基础，指导了重新设计过程的后续阶段。

 

下一步是了解现有用户

浏览 App Store 评论

我开始在 Play Store 和 App Store 上寻找评论。这款应用的下载量超过 50 万次（50 万+），但评论或评分并不多，所以我在应用商店和其他网站上只发现了一些相关评论。我还阅读了一些竞争对手应用（Dunkin Donuts、Costa Coffee、麦当劳和肯德基）的评价，以了解它们吸引和留住客户的最佳功能，以及它们忽略的功能。

不同应用平台（Play Store、App Store 和其他商店/网站）上的用户评论

 

我开始在 Play Store 和 App Store 上寻找评论。这款应用的下载量超过 50 万次（50 万+），但评论或评分并不多，所以我在应用商店和其他网站上只发现了一些相关评论。我还阅读了一些竞争对手应用（Dunkin Donuts、Costa Coffee、麦当劳和肯德基）的评价，以了解它们吸引和留住客户的最佳功能，以及它们忽略的功能。

可用性测试

我请了同样的几位参与者（6 位中的 8 位）测试 Starbucks IN 应用程序（虚拟和面对面可用性测试）。我想看看他们如何与应用程序的功能互动。（6 位用户中有 5 位以前没有使用过该应用程序。我想与熟悉该应用程序的人一起测试并观察其反应，所以我请几位参与者下载并使用星巴克应用程序，而不是他们日常使用的食品应用程序，花一整天时间进行探索。）

 

我在测试期间给他们布置的一些任务是：

• 打开应用程序并转到主屏幕上提到的项目的详细信息页面。
• 找到应用程序内的通知部分并点击它。
• 找到注册按钮并填写所需的表格详细信息。
• 进入个人资料部分更改付款方式并编辑您的个人信息。
• 探索应用程序的订单部分并向我展示应用程序的菜单。
• 要求用户关闭应用程序并重新打开它。（因为许多用户报告了应用程序加载问题）
• 转到商店部分并向我显示附近商店的信息。订购饮料以供取货。还要求他们根据需要应用过滤器。
• 我还要求他们中的一些人选择一张他们感兴趣的礼品卡，并在其中存入几美元。（请注意步骤，钱并没有存入）
• 带我浏览奖励部分，然后跟进“如何兑换”

…我要求用户执行许多其他小任务，以便我可以记录他们的反应、互动和期望。

.   .   .

 

定义问题

经过广泛的用户研究和分析，我们发现星巴克应用程序中的痛点已经明确，反映了大多数用户面临的共同挑战。

大多数用户共同的痛点

– 不完整的移动应用程序：

• 由于应用程序缺乏功能，用户更喜欢从桌面网站订购。
• 与网站相比，移动应用程序被认为不太用户友好。

– 混乱且杂乱的用户界面：

• 由于用户界面混乱，卡片列表无穷无尽，用户很难发现信息。
• 布局、流程和结构问题以及不一致导致了糟糕的用户体验。

– 导航/付款/菜单问题：

• 难以找到菜单并浏览复杂的流程。
• 主页缺乏个性化，并且难以找到特定的饮品。
• 用户需要交易历史、奖励、快速选择菜单和商店信息等功能。

– 注册和登录问题

• 用户对登录和注册流程感到沮丧，希望使用指纹/面部识别或 Google/Facebook 登录等更快捷的方法。
• 填写不必要的信息和频繁退出令您烦恼。

– 商店和订单导航：

• 用户在首选商店下移动订单时遇到了困难。
• 查找相关内容、导航和组织良好的信息时遇到的问题。

– 通知和设置：

• 过多的弹出窗口和通知令人烦恼，导致难以跟踪。
• 应用程序内设置的放置位置令人困惑，缺乏直观的层次结构。

.   .   .

 

让我们了解一些用户的需求

深入研究用户需求后，参与者明确了可以显著增强他们使用星巴克应用程序体验的具体要求。

– 个性化：

• 用户希望获得更加个性化的信息流，以根据他们的应用内行为、操作和互动进行定制。

– 更多控制和可访问性：

• 参与者注意到缺乏一体化的搜索功能，寻求对应用程序探索的更大控制和便利性。

– 透明度、清晰度和友好的用户界面：

• 用户提倡无缝、更快捷、更简单的支付流程。
• 简化星巴克账户注册流程，提供快捷选项并增强安全性。
• 为了提供用户友好且清晰的体验，要求更改导航界面。

– 建议的额外用户需求：

• 食品/饮料信息：用户需要有关食品和饮料的详细信息，包括描述、以前用户的图片以及反馈/评级。
• “给出/添加说明”功能：用户建议增加一项功能，允许他们给出或添加说明，以增强整体订购体验。
• 订单提货安排：许多用户面临按时提货的挑战，并建议与安排和选择提货时间相关的功能。
• 人群指示和商店详情：用户表示需要人群指示和更详细的商店信息，以便更清楚地了解，帮助选择想要访问的商店。

.   .   .

 

竞品分析

我通过以结构化表格形式列出所有基本功能来进行竞争分析，以确定竞争对手并找出他们的优势和劣势。我将其分为两部分，第一部分包括直接和间接竞争对手，第二部分是所有星巴克应用程序。由于星巴克在全球运营，因此它也有全国性的应用程序（大约 5-7 个应用程序）。

竞品分析——星巴克生态系统内以及直接/间接应用程序

注意：由于大多数应用程序需要花费一些钱才能完全使用主要功能，因此很难弄清楚它们拥有哪些功能。虽然我尝试研究这些功能以及每个应用程序提供的功能，但本分析可能缺少其中一些功能。

.   .   .

 

构思和纸质原型

亲和力映射

接下来，我整理了上面列出的所有反馈、见解和痛点，并将类似的内容归类。这帮助我集思广益并开发潜在的想法，让我更清楚地了解对用户来说什么是重要的，同时牢记业务目标和目的。

构思——亲和力映射。红色代表问题，绿色代表可能的解决方案。

 

纸上素描和线框图

对于纸质线框图，我仔细研究了星巴克网站、移动应用程序、其竞争对手和其他间接应用程序的用户界面。经过一番观察，我勾勒出所有可能的布局，最终确定了效果最好的一种。这让我能够在进行高保真设计之前为主屏幕设计原型解决方案。

现在，我对自己为谁设计有了更好的了解，并且觉得自己具备了背景研究的能力，我可以开始做更有意义的事情了！用户界面设计。

星巴克应用程序线框图

 

.   .   .

 

解决第一眼看到的问题

但首先，下面的图片将展示最终的视觉设计和根据上述原因做出的设计决策，以提高可发现性和可访问性，并为用户体验带来顺畅的轨道。😄

 

登录/注册和入门体验

星巴克当前的登录/注册屏幕

 

.   .   .

 

我重新设计了界面，并在登录/注册前提出了三个新界面

新功能 — 带有插图的启动画面和入门画面（一次性流程）

 

.   .   .

 

星巴克登录和注册重新设计

 

.   .   .

 

登录后可选流程——针对位置

 

.   .   .

 

星巴克主屏幕

当前星巴克应用程序主屏幕

.   .   .

 

我对星巴克主屏幕的重新设计

我为星巴克新设计的主屏幕

.   .   .

 

这些屏幕以某种方式与家庭流程相连👇🏻

其他相关屏幕从主屏幕流出

.   .   .

 

星巴克的奖励系统简直一团糟，我第一次使用时，店里的体验非常糟糕。

星巴克奖励和福利屏幕

.   .   .

 

星巴克通过积分、历史记录和清晰的信息进行奖励

.   .   .

 

这是添加付款以继续下一步（从菜单查看/订购）的流程

.   .   .

 

统一且易于理解的支付页面

.   .   .

 

.   .   .

 

验证测试

我使用与可用性测试相同的场景对 5 名新用户进行了游击测试。目标是验证原型在解决已发现问题方面的有效性，重点关注与初始用户具有相似背景的用户。

以下是验证测试的结果：

 

本次验证测试的结论是：

1. 改进的个性化 Feed 优先级：根据用户行为实现个性化内容优先级，从而带来更加定制化和愉快的浏览体验。
2. 增强的搜索功能可访问性：实现了一体化搜索（弹性搜索）功能，提高了可访问性并使用户能够轻松找到所需的内容，增强了整体控制和导航。
3. 简化支付流程：简化支付流程，带来无缝、更快捷、更用户友好的交易体验，减少障碍并提高整体满意度。
4. 简化账户注册：改进账户注册流程，提供简单、快捷的选项和增强的安全措施，简化注册体验并最大限度地减少障碍，从而增加用户注册量。
5. 增强的导航界面：实施导航界面改进，提供用户友好且清晰的体验，使用户能够轻松找到所需的功能和内容，从而提高满意度和参与度。
6. 全面的商品信息：添加全面的商品信息，包括描述、图片和反馈/评级，使用户能够做出明智的选择，从而提高购买满意度和信心。
7. 便捷的订单说明功能：引入订单说明功能，允许用户提供具体的说明，增强定制选项并满足个人偏好，从而提高用户满意度和忠诚度。
8. 高效的订单取货安排：实现了安排和选择取货时间的功能，使用户能够根据自己的喜好轻松管理取货，减少挫败感并提高整体用户体验和便利性。
9. 星巴克卡余额管理：经过重新设计，用户现在可以在应用程序内添加和管理星巴克卡余额，从而提高便利性和对账户的控制。
10. 提高对奖励系统的理解：重新设计后，用户现在可以通过准确的信息了解奖励系统，从而提高奖励的参与度和利用率。

 

一些经验教训：

• 以用户为中心的设计：在整个设计过程中优先考虑用户需求和反馈。深入分析设计决策非常重要，以确保你通过同理心满足用户需求。
• 根据用户测试和反馈进行持续改进。
• 确保集成无障碍功能以满足所有用户的需求。
• 使用定性和定量数据来指导设计选择。
• 设计上的微小变化会对整个用户体验产生巨大影响。

 

挑战：

• 我进行了很多次迭代才找到正确的解决方案。在此过程中，我意识到迭代是任何最佳设计解决方案的关键。没有其他方法。
• 在为一个问题寻找设计解决方案的过程中，我遇到了一些小挑战，这让整个项目变得更加有趣。我学会了如何在不影响主要设计解决方案的情况下解决这些挑战。
• “使用经常断电的旧 MacBook 笔记本电脑工作”算吗？

 

洞察：

在做这个案例的过程中，我学到了很多东西，如何运用设计思维，理解用户需求，发现问题，如何从痛点找到解决方案等等，都学到了很多东西。

因此，我阅读了大量与用户体验研究相关的参考资料或观看了相关视频。我还尝试了其他数字产品，然后看看他们如何使用它以及它会产生什么影响。能够找到解决用户问题的方法真是太好了。

 

就是这样！

如果你已经读到这里，谢谢你的耐心。希望你能学到一些关于 UI/UX 设计的知识。关于我

顺便说一句。嗨！我是 Manish Singla。自学成才的 UI/UX 视觉和品牌设计师。我将对设计的热情转化为职业，将想法转化为迷人的视觉效果和艺术品牌标识。在 Totality Corp，我作为首席设计师蓬勃发展，并作为一名自由职业者在 AI、web3 和设计方面获得了 5 年以上的宝贵经验。我为每个项目带来创造力、趋势敏锐性和独特视角，增强用户体验和品牌形象。

目前，我正在升级我的投资组合，并渴望合作开展创新设计项目。

❤️感谢阅读！