微北洋 APP 3.2.0

Download






微北洋是什么?


微北洋(We Peiyang)
是由天外天工作室出品、面向天津大学全体师生的集新闻阅读、党建系统、课程表、校园黄页、读书功能、失物招领、自习室查询、GPA查询、校园自行车查询系统、教师评价、成绩查询、校园公告、图书馆查询、就业资讯、约吧、公交签到、学生个人动态等功能为一体的服务型 APP。

Role
微北洋是天外天 主推 移动端产品,负责微北洋交互|视觉设计,运营推广及其他相关设计等。

(2016.09 - 2016.11)














At first







设计之初


上一个版本的微北洋主推的是校园新闻阅读和一些功能查询
定义为新闻阅读 及查询类app.

最初想法是这样的
- 将新闻阅读页进行重构
- 使用Material Design设计风格
- 流畅的新闻阅读方案
- 全局搜索新闻及微功能查询方案
- 左侧滑查询用户菜单及设置入口
- 右侧滑功能查询入口


设计版本 3-A










Beginning






需求分析

由于我们是校园服务类资讯平台,不涉及商业盈利的问题。只需从用户角度和项目的角度出发,项目角度我们又是一个学生团队,时间 设备 资源 还是比较具有张力的。那么重点就在于用户角度,从多个角度进行产品定位。


产品定位:产品定义>>用户需求

产品定义

[使用人群] 天大师生
[主要功能] 查询功能、新闻资讯
[产品特色] 稳定、准确、好看、易用

用户需求

[目标用户] 本科生、研究生、博士、教职工
[使用场景] 学习时、吃饭时、路上、宿舍、睡觉前、在家
[用户目标] 快速使用各种查询操作功能、查看有趣推送

[目标用户]
- 本科生:功能查询使用新闻资讯热门有趣推荐推送还可以接受
- 研究生:功能查询使用部分功能、新闻
- 博士:使用部分功能新闻资讯一般
- 教职工:部分功能新闻公告部分

目标用户分布比例


[使用场景]
- 学习时:快速查询、最好能在桌面添加快捷功能
- 吃饭时:多单手操作、尽量减少点击、使用滑动
- 路上:查课程、自行车居多
- 睡觉前:现在年轻人晚睡居多,应添加“夜间模式”
- 宿舍:休闲、浏览有趣推送(多来自微信、微博
- 在家:查询校园动态、成绩及个人在校信息

[用户目标]
- 快速使用各种操作查询类功能?
[解决方案] 直接显示、自定义设置
- 查看有趣推送新闻、校园动态?
[解决方案] 推荐功能、自定义设置显示某类别咨询顺序








User feedback & Project analysis






用户眼中的微北洋是什么样的?

做了一些调查问卷用户访谈,线上线下问卷调查共收回约一千五百份有效问卷。分析前对访谈用户和问卷信息进行了整理,并做了一些 初稿原型 进行了一次 可用性测试


『 反馈 』 关于重点页面问答的回答总结

是否对微北洋新闻有浏览欲望?
- 大多数没有,但是如果有像微信微博那样有趣的推送还可能会看。

对功能查询模块有什么意见?
- 大多数都在使用查询功能,希望着重开发

对于个人中心有什么想要的功能?
- 如果学校不让我们在微北洋上聊天社交的话,就没什么可需要的了。

『 测试 』 拿初稿原型对不同用户进行测试,得到一些问题 并制定解决方案

新闻页面很多分类不想看
- 增加热门推荐功能,并可用户设置显示顺序。

大多数是想快速查询使用的功能对校园新闻不感兴趣
- 自定义功能显示,增添桌面小组手工具。

晚上使用的比较多
- 添加夜间模式

想直接用微北洋app注册天外天账号
- 添加天外天账户注册入口。

对于看完的推送或重要通知想保留下来或者能快速找到
- 添加收藏保存功能,并能方便查询浏览历史记录








Priority of Function







根据调查情况分析 决策功能 优先级

根据功能优先级评分,满分3颗星的都为查询功能(根据目标用户反馈情况、使用场景、用户目标、原型测试等多种情况)应把首页着重设计成用户想要的个人功能信息显示内容。

最终设计方案定为
- 布局改变为底栏菜单的形式
- 首页直接显示用户打开想看的需要查询的信息(比如自己的GPA,课程信息,图书搜索功能,借阅图书信息等。)
- 提升新闻阅读页浏览效果,并增添热门推荐等用户关注信息。
- 更多功能页结合新产品方寸流年和天外天图集,展示用户更想看的美图社区内容。
- 个人中心页合理展示用户收藏关注信息。











Structure & Layout






用户进入微北洋时要进行登录办公网账号才能和用户信息关联,办公网账号是所有新生在开学时校内组织注册的,进入首页后可以进行各种功能查询或者浏览新闻查看图集,此次改版给用户很多自定义设置功能 使用户能感受到更多的存在感。

根据内容分析绘制信息架构图











用户流程


User, 应该很容易找到自己想使用的查询功能以及自己的个人信息状态,更直接展示,毫不费力地与产品互动,然后可直接操作所有与他相关的状态信息。应用程序的流程必须是愉悦的,用户可操作的,因此用户可以专注于应用程序的核心宗旨:更快、更准、查询、愉悦














页面布局


当前的布局采用底栏菜单的形式,因为可以更清晰展示出用户的使用分类等级,首页显示用户默认或用户个人设置的信息展示页面,展示出各功能信息及用户状态信息,此形式还可shortcut到手机桌面。在进行调研和讨论后产生了 版本 3-B 更加简洁功能明了。











夜间模式


应用最重要的部分,是完美的阅读体验,作为学生党的用户群,手机控成为现在年轻人普遍的现象,为了保护青少年的眼睛,我们设置了护眼模式,在夜晚使用手机浏览新闻查询资料时能给用户一个舒服的阅读体验。














用户反馈


学生是一个活跃的群体,产品的需求也来自用户的意见和反馈,因此建立了技术支持论坛社区和BBS反馈社区,设计师和开发者们能够及时反馈用户的问题,并在论坛中可从用户的反馈中发现一些不容易找到的bug . 一方面提升了用户的活跃度,另一方面能使用户在遇到问题时而不再感到困惑和焦虑。














版本更新


在版本 3-B 投入使用一段时间后,由于实际需求根据校方的调整,在功能上做了改动,在设计上也做了一些优化。比如这些功能上的调整及体验优化。这里的新版本就叫 版本 3-C 吧。











首先在视觉上应用背景色比之前更浅NavBar不再有阴影,界面显得更干净舒服
功能上工作室和北洋园图书馆合作开发了读书功能,由于读书功能是作为一个活动子功能,所以将检索图书信息放入了读书模块内,图书馆的卡片内容经过协商从图书馆数据库拿到了用户的借还信息。

[图书卡片] 因为校内图书馆借书数量是有限制的,借书同时不超过12本,又在图书馆数据中获取到一个信息:很少有人一次只借一本书也很少有人同时借满12本,用户借书数量在4-8之间的最多。因此决定用侧滑的形式显示用户借书的信息,超期的图书会排在最前面,然后根据借书时间倒序排列,让用户能更清楚了解最近应还的图书。

[自定义显示卡片] 在这个新版本中增加了全局搜索功能。之前的自定义卡片入口按钮调整到页面底部,当滑到底部时可以点击添加展示卡片按钮进行添加和调整。











[成绩卡片] 卡片标题不再居中 调整为左侧标题右侧显示内容。GPA图示标题靠左,右侧显示加权和绩点,之前卡片底部显示选中学期加权和当前加权,其中一个信息是一学期才会更新一次,所以决定删去,右侧默认显示当前加权信息,在选择其他学期时动态变化。

[课程表卡片] 同上规范,卡片标题靠左,每门课程的背景卡片圆角变大比之前更圆润。在课程表卡片中添加了一个显示当天有几门课程的信息 能够让用户更快的了解今天共有几门课要上,点击更多图标进入到课程表页面。

[新闻卡片] 在新闻页面的卡片中增加了图片的圆角,图片比之前缩小了一些,视觉感觉更平衡。

版本 3-C 效果图 ↓ ↓














引导插图


插图主要用作初始体验的一部分,整个应用程序的使用心情。参与友好交互,提示操作,明确信息,用户可以更容易理解WePeiYang最新的功能。随着应用程序的目的使用户能更容易使用他们需要的功能,我们着手创建一个友好和功能的集合,可以直观地表达该应用程序所提供的服务。














图标


已经有两套不同的专为WePeiYang的图标。第一,更标准的一套行图标,具有触发与所有应用程序的导航帮助行动的唯一目的。













第二,是一组代表应用程序内部功能入口的图标设计。随着应用程序支持功能的增加,系统的设计一套功能入口图标用于引导用户自然的完成某项功能的使用。它们清新自然,洋溢着用户群的青春气息。
























运营数据


微北洋完成开发后的一段时间内,从运营周数据和月数据看新增用户和启动次数已呈直线上升状态,User 增加至 26000+ DAU较之前的版本也提升了几倍