今天给大家分享一篇国外企业是如何从0到1设计一款线上学习app的。

问题陈述

我们可以提供什么样的平台给那些想学习艺术创作的人，并提升他们的网上学习体验？

解决方案

从用户需求和商业目标两个方面出发，我设计了一款手机应用程序，它可以为那些想要学习创意艺术的人提供方便易用的在线学习体验。

项目背景

由于新冠疫情，世界各地的人几乎都不出门。人们使用Zoom会议和直播的频率已经大幅提高。不管是联系朋友还是社交，人们都在寻找新的方式。因此， Scribld Creative 的目标是搭建一个创意艺术的学习平台。

理解品牌

Scribld Creative是一家传媒科技公司，其目标是培养创意人才。这个初创公司的宗旨是：通过创造艺术来建立人们之间的共识。该公司计划在创意艺术领域招募专业人才，包括电影摄影、设计和美术等。这些专业人士将遍布全国各地。其初步目标是让印度观众对学习创意领域的新知识产生兴趣，从而激发人们的积极性。他们计划尽早推出这一产品，在新冠大环境下扩大受众群体（拥有更多休闲时间的人有兴趣学习更多知识）。

移动应用需求

通过调查和收集竞品主要功能和特性，我发现在公司初期利用App搭建平台有以下优势：

用户可以随时随地观看

可以下载视频并稍后观看

易于跟踪学习进度

与桌面端网站相比，导航更加简洁

目标受众

这家新成立的公司主要关注生活在城市地区的印度人，他们大多是14岁到40岁之间的学生、职场人士或家庭主妇，收入可观，生活也不错。

使用Sub-continental制作的插图

艺术创作包括哪些

为了帮助自己理解这个领域，我做了一些辅助研究。我在研究中的主要发现是：

创意艺术可以定义为一系列活动和实践，可以增强个人的创造力和想象力。

不同类型的创意艺术有：

美术

设计

音乐

戏剧

工艺

舞蹈

电影艺术

摄影

用户研究

为了更好地理解用户的需求，我找到了一些希望加入或者参与创意艺术的朋友，进行了非正式的讨论。其主要结论如下：

在短期内观看教程视频会有所帮助，但从长远来看却无济于事

即使现有的平台提供了作业和讨论，但并不能激发大多数学习者的学习动力

无法完成没有期限的作业。

在这个细分市场中，学习任何东西的最佳方法是遵循“学习-实施-反馈-改善”的闭环。

收集常见的设计模式

在此领域中，我查考了不同的应用程序，发现了下列这些通用的设计模式：

课程专属的论坛

可下载的视频讲座

不事先询问用户的兴趣

提供课程的好评和内容提纲

免费提供一个（或几个）课程

提供付费内容

可跳过的新用户引导流程

提供观看推荐

基于订阅或基于课程的付费模式

痛点

在研究和分析了整个流程之后，我列出了现有平台用户所面临的主要困难：

缺乏学习动力

无法完成作业

没有收到适当的反馈

即使得到反馈，也只有一次

平台缺乏参与度，论坛中的讨论很少

几天后就忘记他们学到的东西

教学方法

根据上文的研究成果，我提出了公司的教学课程和方式的建议：

预先录制广义主题的讲座

提供重要主题的现场讲座（带录播）

设计固定的课程计划

提供现场互动会议

设置开放式作业，并有老师提供反馈

允许用户终身访问课程内容

限制课程完成时间

把行为变成习惯

学习是一个持续的过程。要想充分利用这个平台，就必须把学习作为一种习惯。我在设计过程中遵循了Fogg行为模型，该模型指出：行动=动机+能力+触发因素

概念构思

在继续构建信息地图和线框之前，我构思了App的功能，并设定了优先级，包括以下的功能和特性：

用日历显示已报名的直播课

利用虚拟积分鼓励用户参加更多课程

课程内自带讨论板块

多人同时学习

促进讲师和同学的互动

基于OTP的手机号码登录方式

提供可下载的课程内容

基于课程的付费

信息架构地图

鉴于我所设计的特性和从研究中获得的见解，我为App创建了一个信息架构图。

线框图

要让设计在不影响开发进度的情况下呈现基本的功能，我对线框图进行了一些迭代。草图完成后，我转到Figma，对几种不同的界面布局和组件进行了进一步改良。

品牌设计

我探索了不同的符号和文字，在做了一些调查之后，选择了一个代表Scribld Creative品牌含义的符号——每一步都是从涂鸦（scribble）开始，这条路从来不是十全十美的。

风格指南

在线框图中，我选择了几个主要界面，并尝试了各种颜色和字体组合搭配。

我反复实验了不同的字体组合，最后把标题字体定为“DM Sans”，主体字体为“Inter”。DM Sans入选是因为它给人一种亲切友好的感觉，而Inter则是因为它的干净现代的风格。

我打算使用带有平滑角的图标，以符合产品的个性

我用的是一个插图库提供的插图。Ahmet Çadırcı做的插图库里面配有描述创意艺术的小插图，使用起来非常方便。

（插图库Figma地址：https://www.figma.com/community/file/843472672440914284）

组件库

我开始通过迭代的方式建立组件库。把设计好的主要组件整理起来，方便我在任何时候调用。

UI设计

我对不同的布局进行了迭代，并利用组件库加快了这个进程。接着，我为App设计了不同的界面（同时还考虑到边缘情况）。通过参考收到的反馈，我对UI设计进行了反复改进。

新用户引导

引导界面让用户轻松互动和入门。在加载过程添加动画，以减少用户跳过流程，并吸引用户注册账号。

使用手机号码登入

使用基于OTP的手机号码注册和登录功能，因为这是印度的通用注册流程。这些步骤缩减了用户的时间，让用户能够顺利注册/登录。

这方法也让用户在登录电子邮件时能更加关注自己熟悉的邮件。这个过程既短又快，有助于促进用户注册。

弹框演示

简单易行，只需最少的步骤，就能向初次使用的用户演示基本功能。

首页

新用户的的通用主屏，个性化主屏让频繁使用的用户保持兴趣。主屏上的内容按优先级递减。在课程列表界面中，按照特定的主题显示课程。

搜索和时间表

可在页面里轻松浏览各类课程及老师。在搜索页面中的默认状态显示类别，可以帮助用户更方便地在特定域内浏览课程。

日历登记功能可以让用户追踪实时课程，并收到提醒通知。

课程和老师资料

该界面显示了课程细节和教师信息。另外，还提供免费视频预览和常见问题。

已报名课程

显示已经注册的课程，如果用户希望在视频完成后观看，还可以查看下载内容。

支付

简单易行的支付流程，使用户可以快速注册课程。

通知和账户

获得所有课程时间变更或其他重要细节的通知。跟踪各种课程的学习和成绩。此外，用户还可以更改应用程序设置并向好友推荐这款App。

边缘情况设计

我为主流程设计完之后，考虑了其他可能的用例，设计了不同主界面的一些边缘情况。例如使用邮箱注册账号，注册失败等等。

互动原型

UI设计完成后，我在 Figma创建了一个交互原型。

总结

通过这个项目，我的收获主要有：

传统的观看教程方法让人们不能有效地学习创作艺术。他们需要大量的练习和反馈。

通过迭代设计，我知道了满足实际需求的重要性。也许我们有100种设计界面的方法，但是只有少数几种可行的。迭代式流程帮助我发现哪些布局是可行的，哪些布局适合我的产品想法。

针对边缘情况设计，以及如何考虑不同的边缘情况。

通过参考现有UI模式作为约束条件来设计响应式界面。

原作者：Rama Krushna Behera

原文来源：https://uxplanet.org/masterclass-for-scribld-creative-a-ui-ux-design-case-study-b35674374802

原作者授权截图：

本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：应谋鬼计！