案例研究：Biscuit 一款游戏化的学习应用程序！学习知识还可以打发时间？

原创交互设计小助手美国交互设计资讯

UI & UX

Article：2022/05/03

欢迎来到「NEW案例三分钟」栏目~

「NEW案例三分钟」是由美国交互设计资讯连载的关于交互设计的案例分享栏目，每周为大家更新不同类型的UI&UX设计案例，希望大家在阅读案例的研究过程有所收获~

今天分享的案例原作者是设计师Sanjna Subramanian，她是IxDA（交互设计协会）的全球产品设计组织的一员，在周末时协会举办“设计马拉松”以磨练会员们在 UI/UX 设计方面的技能并创建一个有意义的案例研究~

设计师结合自己选择的问题，创作了一款既有意义又可以打发空闲时间的应用程序Biscuit，并在这次设计马拉松上获得第二名~接下来我们一起学习吧~

问题陈述

设计一个既有功能性又足够有趣的东西来填补你一天中的少量“无聊”时间的应用程序？并帮助你提高技能？游戏化奖励积分？

经过大量思考和绞尽脑汁，然后突然冒出一个想法，我决定的应用程序名称是Biscuit。Biscuit 是一款游戏化的学习应用程序，用户可以在其中获得少量信息内容、进行测验、在全球范围内竞争（以及与创建的朋友组），还可以获得奖励。

（初次见面，打个招呼）

用户研究

由于这是一场设计马拉松，我的用户研究需要快速进行，我需要对我的一些决定、一些用户喜欢的新想法以及可操作的见解进行验证。

我通过 Google 表单进行了一项小型调查，收到了 17 份回复，其中 15 人为 18-31 岁，其中 2 人为 31-60 岁。

许多受访者表示他们有 2-3 小时的空闲时间，而许多人表示他们每天有 4-5 小时的空闲时间。

这些是我收到的更多见解：

当被问及人们在空闲时间做什么时，这些是一些答案：

调查参与者被要求提供游戏化建议，这些是一些答案：

参与者还被问及他们是否可以使用游戏内货币购买真正物质奖励的系统。对于这样的系统，反应非常热烈。

我从调查中了解到，人们知道他们的空闲时间没有被有意义地度过，而且很多时候，人们只是滚动浏览不同的应用程序，几乎没有消费任何好的内容。

因此，我决定创建一个应用来解决这个问题。

二次研究

我能找到的唯一模糊的竞争对手是 QuizUp，它非常受欢迎，但从那以后就停产了。

QuizUp 是一款具有竞争力的测验应用程序，有多种主题可供探索，还具有社交功能，可以在其中与朋友和陌生人交谈和挑战。

QuizUp在品牌和语气上与Biscuit相似，在竞争性、社交性和一定程度上鼓励学习的方式上也是如此，但在奖励和知识建设方面完全不同。

用户群体

这个应用程序将针对从事任何形式的常规工作（学校作业、大学工作、办公室工作）并在其中获得一些空闲时间的任何人。它将针对 12 至 65 岁的年龄段，并为用户从互联网上收集知识。

这个应用程序同样适用于那些觉得他们正在消磨空闲时间并认为他们应该做或学习的东西，但永远不会做的人。

用户流程图

我已经构建了一个简单的用户流程图来解释使用这个应用程序的过程。目前它被稍微简化了，当我们继续这个案例研究时，我将进一步提到一些细节。

（我添加了表情包让它更可爱）

线框图

我为大多数可能的屏幕制作了一些线框，但是当我继续进行设计时，我不断地改进线框。这是我的线框页面的一些屏幕截图：

品牌识别

你是否将所有空闲时间都花在漫无目的地浏览 Instagram、浏览无聊和令人麻木的内容？你是否在 Netflix 上滚动寻找可以观看的内容，最终只滚动了 40 分钟？你想更好地度过你的时间，学习一些有趣的东西，同时也玩得开心吗？你在这样做的同时获得奖励怎么样？

Biscuit 让你满意~

Biscuit 是一款游戏化学习/信息丰富的应用程序，用于获取知识和玩小游戏以提高您的认知智能，并获得奖励。

我想营造一种凉爽、有趣和俏皮的氛围，这个调色板与字体完美契合。这三个圆边正方形形成了标志，就像一块小饼干。饼干是一个术语，我决定给用户通过应用程序获取的一小部分信息。关于这一点的更多信息。

这个标志让我想起了一个有趣的休息时间的奶油中心，夹在两块富有成效的工作饼干之间：）

最终设计

引导页

这是有趣且丰富多彩的引导页面，带有一些古怪的插图和标题。我设想这些插图将具有可以在开发过程中实现的小型动画和交互。

这一切都是为了增加用户的乐趣，这是这个应用程序的一个非常重要的部分，因为我的主要目标是创造一个健康而酷的游戏化学习体验。

注册页面

我们有一个基本的注册页面，然后询问用户他们的年龄、国家和居住城市，然后从提供的广泛范围中选择一些感兴趣的主题。

我为此做了两次迭代：

（迭代1）

迭代1：我保持背景为白色。可能它让我忘记了，或者我没有集中注意力，但是详细信息页面有一些问题。出生日期部分不分为日、月和年。也没有关于如何从详细信息转到兴趣页面以及从兴趣页面转到应用程序的指示。

（迭代2）

迭代2：我固定了出生日期部分。我摆脱了灰白色的背景，为视觉设计带来更多色彩。最后，我添加了“下一步”和“完成”按钮，以便用户在填写完每个部分后可以继续前进。

用户调查

这里是应用程序的主选项卡，所有学习都在这里进行，用户登录后将登陆此选项卡。

他们将看到屏幕1。当屏幕1读取时，用户将首先玩一个引人入胜的游戏以进入该区域，然后再学习。

迷你游戏可以是任何类型——数字游戏、文字游戏或脑力游戏——每种类型都有多种变体。在屏幕2上询问用户，他们想玩其中的哪一个。如果他们想要一个惊喜游戏，他们还有一个非常有趣的选项，即随机化建议。

（迭代1：屏幕1/屏幕2）

迭代1：我首先制作了这些页面。他们看起来很朴素。然而，我有一个更好的想法，让它在视觉上更具吸引力，同时也是一个新功能的想法。

（迭代2：屏幕1/屏幕2）

迭代2：我为主页制作了一个时髦的背景。但更重要的是，我为小游戏选择按钮添加了颜色。我认为对每种类型的游戏进行颜色编码并保持这种颜色编码以跟踪每项技能（数字、单词和大脑）的进步以跟踪数字、语言和其他认知技能的进步会很有趣。这将显示在个人资料页面上。这样页面看起来也更有活力。我还修复了阴影，在第一次迭代中，它们有点过于尖锐和刺耳。

一旦这个游戏完成，他们就可以继续学习。