zui!Image
在本案例研究中，我将分享我重新设计IIT Madras的学生端app的过程。
01
过程
1.了解问题2.用户研究3.信息架构4.线框绘制5.测试线框6.视觉设计与原型7.迭代
如果你从来没有听说过这个app！
如果你不是来自IIT Madras，那么你可能不会拥有。因此，让我们从产品介绍开始。
这个app是什么？
该应用程序旨在简化学生的大学生活。
学生可以用这个app做什么？
- 获取学院的通知
- 通过姓名或编号搜索其他学生和教师
- 查看日历
- 查看时间表
- 查看学校食堂里面有什么
- 查看哪些优惠券代码在IITans的商店或餐厅有效
- 获取重要联系人列表
- 进行任何与学校有关的投诉
- 直接从App自动生成电子学生证
听起来很有帮助对吧？
为什么要重新设计？
作为一个经常使用的人，我觉得整个app的使用体验应该能变得更好。
我确定的痛点：
- 打开app时，看到的第一个是通知页面，这有时可能会很烦人，因为它缺少被设计好的主页。
- 布局的信息不容易理解。尤其是在通知页面中显示事件的地方，我认为内容、时间和地点可以以易于理解的方式呈现。
- 用于用户点击“选择”和探索的侧边栏菜单位于左上角，而最不常使用的选择位于底部导航栏。
- 用户界面看起来已过时。
02
设计目标
我的主要目标是改善使用App的整个体验，并确保用户实际需要的内容。我将从头开始进行用户体验过程。
研究-了解用户
我用谷歌表单进行了一项调查，以了解人们如何使用这个app（使用用户研究工具非常重要）
调查结果表明：
30％的人用它查询餐厅菜单
10.3％用它查看时间表
25％的人用它找人
26.7％的人将其用于上述所有目的
8％的人未安装应用
82.8％的人对哪个菜单属于哪个餐厅到困惑。
当前的命名系统，将菜单命名为，餐厅菜单1和餐厅菜单2，没有人会愿意承担额外的认知负担来记住哪些餐厅为菜单1提供服务，哪些餐厅为菜单2提供服务（在进入餐厅之前，我从未确定过菜单，如果我没问过已经去那个餐厅吃过饭的朋友）。
所以现有的命名系统需要改进！
这些数字使我对产品的使用和痛点有了一个大概的了解。
03
用户画像
我创建了4个用户画像，根据他们的日常生活方式进行了命名，并将其可视化。
用户画像的年龄介于17至25岁之间，并假设所有人都对手机的使用非常熟悉。
从画像中识别需求：
- 每个人都有一个共同的目标，那就是提高自己的成绩。
- 管理时间和参加更多活动似乎是四个画像的共同目标。
- Sharad Studious和Anamika Artist这两个用户画像想了解截止日期和考试日期。
- Anamika和Prakhar有兴趣认识新朋友。
- Prakhar迟到时，始终需要学生证以进行检查。
理想情况下，我的下一步应该是通过进行用户访谈来验证我在画像中所做的假设。
但这并没有发生，因为我仍在学习如何有效地进行访谈。而且，这些都是我在大学里每天接触的人，所以我可以肯定我没有犯任何重大错误。
综合调查、用户画像和我自己的用户体验的研究结果。我建议在app中提供以下功能：
- 事件页面
- 日历
- 身份证
- 时间表
- 人员搜索
- 餐厅菜单
- 重要联系方式
- 专用主页
专用主页应包含哪些内容？
当你需要但又不立即可以做某事时，你会怎么办？
我通常会把它记下来，因为我不相信我的记忆。这是一个从头脑中的知识到现实中的知识的转变过程。我见过很多朋友用便签纸记录他们当天的计划。 这让我开始考虑为主页创建一个待办事项列表，其中包括已添加任务的进度。
我大致规划了此功能，并提出了为不同类型的任务设置任务类别的想法。例如，你可以将任务归类为 “个人任务”或“学术任务”，并在这些类别下设置子任务。可以执行诸如添加任务，将其标记为完成，以及删除任务等操作。
从现在开始，我将待办事项列表页面作为主页。
除了这些功能之外，还有一些我需要做的事情：
1.更好的导航旅程
2.易于理解的信息3.外观更好的用户界面
04
研究-界面设计
考虑到导航问题并查看手头的任务，将所有经常执行的任务都放在导航栏中是有意义的。
当前app在底部导航栏中有最不经常使用的选项，在左上角是最常用的侧边栏菜单，用我的右手点击它，就像用Jaya Bachchan梳理Amitabh Bachchan的头发一样困难。
导航栏中有什么？
有8个任务，由于空间限制，很难在底部导航栏中容纳8个可点击的选项。为了缩小范围，必须根据使用频率对要执行的任务进行评级。这是相当有争议的，根据其他用户活动轨迹的总体趋势，我对它们进行了如下排名：
待办事项>时间表>餐厅菜单> 身份证>日历>活动>查找人员>联系
上面的顺序表示待办事项列表比时间表的使用更频繁，依此类推。
让我们从具有“待办事项列表”功能的主页，开始分析这些任务的内容。
主页用于查看当天的任务以及相关的日期和信息。用户应该能够导航到另一个日期或上一个日期，以在特定的日期添加任务。
通过将其添加到主页，我们似乎已经消除了在导航栏中选择日历的可能性。主页将被设计为显示用户自己计划的任务， 因此在主页上识别用户就变得很重要了。
为了进行识别，首先应该看到的是用户的详细信息。我认为将学生证放在主页上可以解决学生证需要单独导航的问题。 现在，我们已经从八种选择中删除了两种。让我们看看能不能再消除一些？
从这些选项的性质来看，几乎不可能将任何一个选项整合到另一个选项中。 查找人员和联系方式在本质上看似相似，但其独特的功能使它们很难被整合在一起。尽管如此，我还是尝试在 Figma中设计了6个导航栏选项（但关键任务总数仍为8），并使每个选项可点击的时候，似乎它们周围都有足够的空间。
05
信息架构
信息架构提供了设计师如何在App内部组织功能的思路，从而使继续设计的过程变得更加容易。
06
线框和草图
线框是产品的低保真度表示，可以与用户一起测试，以便可以在初始阶段进行更改。这比你花了整整一周的时间去设计一些东西， 却发现它并没有像你期望的那样要好得多。线框经过测试和验证后，才可以开始进行适当的视觉设计。 通常，我在绘制时倾向于依附一个单一的想法，但是对于这个项目，我离开一个特定的想法，并在Dribbble和Behance的启发下进行了多种布局。
07
测试线框
测试可能会带来一些在设计线框时被遗漏的想法。作为相关利益者之一，我亲自测试了线框，同时检查了最初设定目标的完成情况。
我创建了一个任务清单，并在其中写了必要的更改。我发现所有任务都可以轻松地在线框中完成。同时，我添加了一些改进。
在一个屏幕上显示一天的时间表会比较好，这样就减少了表的宽度，而增加了垂直堆叠的卡片结构。因此，我继续将时间表选项卡重命名为“时间表”。
学生证选项引起了广泛关注，因此我决定将其与注销选项一起放在主屏幕的侧边栏菜单下。
需要为日常任务提供总体进度条。
这些是测试后出现的更改，将体现在视觉设计中。
08
视觉设计
我不喜欢旧的app的感觉， 考虑到这个App将由17-25岁的年轻人使用，所以其外观和感觉都必须符合年轻人。 因此，我想出了改变产品个性的整体方案。
对于新产品的个性，我想到了三个关键词，在设计视觉效果时我尝试坚持这些关键词：
1.现代
2.清新3.智能
我想要改变的第一件事是logo，因为它显然不符合产品的个性。
logo设计流程
我画了一些速写，甚至尝试将其重新命名为SAPP，但效果不佳。
我喜欢S是一个开放的形状，但A是一个闭合的三角形。我一直试图将两者结合起来。最终，我想到了一个能够平衡我的产品个性以及首字母组合的概念。 除了与字母组合在一起，logo向上指也表示成长，这是学生生活的积极因素。把这个概念告诉插画家，从一个等边三角形开始，添加了我最喜欢的颜色，以及排版和BAM！
我得到了这个漂亮的logo：
09
设计系统
这是我第一次创建，因此没有做很多事情，但是定义了足够的组件，与根本没有设计系统相比，可以节省大量时间。
我确定了四个设计决策：
- 调色板
- 版式
- 布局网格
- 插图
版式
使用Khula字体（在谷歌字体上可用），字体比例约为1.125
使用三种字体粗细：常规，半粗体和粗体。
布局网格
使用4px布局网格创建设计。
图标
我在Illustrator中设计了所有导航栏图标，同时从flaticons和其他在线资源中汲取了灵感。使用了一个25px的正方形作为指引，以保持图标内的一致性。
设计日程/时间表选项卡的图标需要花费一些时间，因为从技术上讲，它是一个时间表，但要在卡片堆栈中显示。
10
比较屏幕和功能
现在，登录app所需的操作少了一些，但与节省时间无关，实际上却是多余的。（smail代表学生邮件）
现在，全新的主页可让你跟踪当天的进度。
通过搜索，根据最新结果，显示了你的学生证照片。你在大一的时候点进去是类似护照的图片（我知道你现在看起来不再一样了）。现在，你可以自由地将图片更改为现在更好看的图片（比如美颜相机拍摄，修图过的），或还原为默认的证件照片（emm，请不要这样做），因为当有人搜索你的时候，这张“证件照”照片也会出现。但是，默认状态下，学生证显示的照片将是默认照片。
在设计日程表页面的时候，我会考虑消化率。一组集中的信息更易于使用。当你可以专注于某一天并可以选择跳至特定日期时，为什么还要始终查看每天的时间表？
添加课程名称也可以帮助用户更好地理解。当学期开始时，课程代码实际上并没有存在学生脑中，并且需要不断查阅大学资源以获取此信息。现在我们将所有内容都放在一个屏幕上。
旧的出勤管理浪费了很多的空间，因此我尝试通过在各个课程中引入管理来使用该空间。我还尝试过直接展示信息。
新设计中的实际日历视图以及垂直排列的卡片可以提供更好的感觉，以及日期和天数的可视化。
滚动时，在折叠整个日历，仅特定星期可见的同时，可获得更大的视野。
改进了餐厅菜单页面，默认选择的餐厅将是你注册的餐厅。你还可以查看其他任何餐厅的菜单。
通过添加某些过滤器，可以更轻松地检查事件。在事件卡上，我们有两个操作按钮，一个用于将其共享给其他人，另一个用于将事件添加到你的个人日历中。
我在空白的屏幕上放置了一个插图，并添加了更多类别提供选择。
在联系页面中添加了搜索栏，你可以以最快的速度，获得想要的联系人的结果，并添加了直接拨打电话的按钮。
11
为体验增添乐趣
引入深色模式。
有必要吗？
没有！但是谁不想要一个既能减轻你的眼睛压力，又能让视觉效果看起来更酷的选择呢？
我根据Material Design的指南设计了深色模式。
12
主页中的新功能
13
迭代
我喜欢KAIZEN的日本哲学，这意味着不断改进。为了这个产品更好的未来，我将继续寻求改进。
14
结论
我将致力于微交互塑造更好的用户体验，以为体验增添乐趣。
这个项目教会了我如何完善设计流程，以及一个简单的设计过程，如果经过深思熟虑会变得多么复杂！总的来说，我真的很喜欢做这个案例研究。我不知道与整个用户体验项目团队共同协同设计会如何，但是我们期待为更多用户，设计更好的体验。
最后：
如果喜欢这篇文章就点击“在看” 🌟吧，给我们更多的动力，带给大家优质的内容🙈
参考文章：
作者：Ajinkya Gajbhiye
译者：设计小菌
原文请戳【阅读原文】
为尊重版权和译者
转载请联系我们
相关阅读
我 们
服务.体验.交互设计传道者
公众号
「yizhizhaojun」
一只朝菌设计学园
联络微信
平菇老师
「zhaojundesign」
「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办，致力于创造卓越的设计知识学习课堂，专注交互设计、用户体验设计、服务设计领域的专业知识教育。
教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校，以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。
清华大学有训曰：行胜于言。「一只朝菌」谨承母校百年教诲，时刻铭记师者之责，为好学者传道授业，为有志者掌灯引行。