bilingo.png

项目背景 BACKGROUND


关于

Bilingo是一个在线教育平台,包括了直播上课、交流社区、小游戏、线上视频等多项内容和功能。项目开始前,平台已经上线运营多年,但随着功能持续增加,信息架构和使用路径逐渐需要重新梳理。

当前问题

我的角色

用户调研,功能架构设计,用户流程设计,线框图设计,交互原型设计,界面UI设计,UX文案,与开发团队协作

我的任务

项目调研 UNDERSTAND


首先进行的是确认平台改版方向,由于时间比较紧张,我们计划通过3个方式获取一些反馈数据,包括产品现有统计分析,用户访谈和分析同类竞品。前两项由PM主导,我辅助,同类竞品调研部分由我这边主要执行。

数据分析

由于之前产品只做了初步的数据统计设置,因此数据方面只能进行一些简单的分析,主要针对PV和UV、访问频次、单次访问页面深度、用户注册数占比等。

用户调研

这部分难点在于我们的改版是大面积全方位的,短时间内没有办法针对某几个特定的功能对用户进行精准深入的调研,因此我们最后决定采用访谈形式进行,围绕4个主观向的问题进行。我们记录并提取了一些比较重要的用户反馈:

反馈重点总结 反馈人数
刚开始进来网站后,看到的内容太多了,不太知道这个网站都能干什么,最好能有比较清晰的引导 6位受访者
外教老师上课听不懂,如果能有重点词汇、课程大纲之类的就好了 5位受访者
整体感觉比较粗糙,感觉不如其他一些平台精致 5位受访者
老师和学生没有更好地联结在一起,老师没法与学生更多地互动 2位受访老师
上课老学生居多,新的学生留不下来 2位受访老师
学英文的学生对站内中文学习模块基本没什么使用频率,反之亦然 6位受访学员
可以与经验丰富的Native speaker上麦对话,是吸引学员的主要亮点 7位受访者
主要使用app上课,但是app其他功能不怎么用,感觉很混乱 6位受访者

竞品调研

一方面,我们建立了可维护的竞品库,尽可能多地收集市面上同类竞品,这样能够在功能设计、体验设计上紧跟趋势,避免像之前那样闭门造车;另一方面,针对与Bilingo产品接近的3个产品在目标用户、亮点和用户反馈痛点等方面进行更深入的调研。

重要发现

解决方案 SOLUTION

经过上个阶段的调研和讨论,我们基本上对现有平台的问题、用户的需求以及解决方案有了比较切实的想法,因此我们决定以几个主要问题为出发点设计解决方案。

1. 如何解决网站内容多乱杂的问题?

重新规划Web端功能,围绕课程为中心

在前面的调研中,我们了解到用户在使用平台时会觉得比较乱,而且中英文学习的目标用户几乎完全不同,因此在改版设计时,我们将中英文分成了2个平台,同时重新设计了平台的信息架构,围绕课程为中心,站内增加大量课程方面的展示,将其他功能作为辅助内容放在网站Footer部分。

bilingo-solution1.png

重新规划App端功能,为“上课”功能服务

在之前的调研中,用户也反馈使用App端主要是用于上课,但是App同样存在内容较功能分散的问题。因此在这次改版中,我们精简了90%的功能,只保留了课程的展示、上课的主要功能,同时拓展增加了即时通讯功能用于师生之间的沟通。

bilingo-solution2.png

2. 如何更好地留住访问平台的目标用户?

网站视觉风格重建

之前的网站视觉风格比较旧,颜色搭配、设计形式上都比较散乱。因此在新版的调整中,我们决定对整个网站和app的视觉风格重新设计,在原版的基础上更贴近当下简约的流行趋势,同时也兼顾目标用户属性——不是为了设计师而设计,是为了用户而设计。

bilingo-solution3.png

bilingo-solution4.png

增加网站Landing page和课程内容展示

要更好地留住平台的新用户,主要需要在网站第一页展示足够的信息和重点,原来的网站第一屏就是各个功能和课程卡片,缺乏重要的信息描述,且因此我们决定首页作为引导页面,放置主要信息,辅以大面积图片和视频提高视觉冲击力。同时增加“课程体系”页面,具体描述我们的课程内容。这样也可以提升网站在目标领域的SEO权重。

bilingo-solution5.png

3. 如何提升学生在平台上课的体验?

针对不同的课程完善流程设计

在业务上,课程体系调整为有体系的付费公开课和付费私教课,因此需要在考虑原来用户习惯的基础上,调整改进两种课程的流程。由于平台之前只有免费直播公开课和付费私教课,前者的流程是报名后上课,后者报名需要直接付费,因此:

  1. 在付费公开课方面:需要保障之前用户免费上直播课的习惯,同时兼顾收费。因此我们决定针对未直播完的公开课,用户报名后即可免费跟着直播上课,但是观看之前的课程及录播需要付费购买整套课程;针对已经直播完的公开课,提供1节免费课试听,观看完整课程需要付费购买。

    bilingo-solution6.png

  2. 在付费私教课方面:原来的流程无法试听,也无法根据学生自己的时间安排课表。因此我们在新的流程中,增加了试听功能,购买课时后也增加了预约功能。

    bilingo-solution7.png

增加课程的辅助功能

旧版平台中每节课只有老师的直播和录播视频,没有其他的文字性材料和内容,也没有复习和作业资料。对于用户来说更像看视频而不像上课,没有办法预习或者巩固课程。因此在改版中,我们针对每一节课,增加了重点词汇、课时大纲、补充材料、错误修正、作业、课堂聊天记录等5个重点功能,同时开放课件下载,老师需要添加完这些内容才能完成课程的创建,这样也进一步保障学员用户付费上课的权益。

bilingo-solution8.png

为学生设计学习管理配套功能

在旧版的平台中,学员用户无法对自己的课程进行管理,也无法查看课程安排。新版本中增加了“学生中心”,方便学员用户统一管理自己的课表、课程、作业以及订单;

同时也新增了英文水平测试功能,方便学生了解和跟踪自己的英文水平。

bilingo-solution10.png

4. 如何增强老师和学生之间的联结?

强化拓展IM的设计

旧版的平台未提供即时通讯功能,学员和老师、平台之间仅能通过课堂或者发送邮件进行联系,在App的聊天中也仅能和其他普通用户私聊。新版平台中,我们在网页端添加了简易的IM系统,用户可以直接与老师或客服在线沟通。在App端强化了IM的功能,增加每个老师的课程群聊,学生也可以与其报名课程的老师直接聊天。

bilingo-solution11.png

通过课时讨论、作业反馈等功能增加双方沟通

除了IM即时通讯外,还在课程的讨论、评价等模块内增加了老师互动的功能,在作业批改的交互中增加了老师对主观口语题的解析和作业整体的评价。

bilingo-solution12.png

设计资产概览 WALKTHROUGH

整个项目过程中的设计资产较多,包括功能结构、信息结构图、用户流程、线框图,界面视觉设计,设计规范,高保真原型等。

功能和信息结构 Information Architecture

  1. 功能结构设计方面,Web端承担完全的功能,包括宣传展示、课程信息、上课所有流程的完整交互,并满足学生和老师的不同需求。App端则主要满足学生上课需求,因此只有学生最关注的上课、作业、即时IM等功能在app端重点展示并保持完整交互。
  2. 信息结构方面,主要包括老师、课程、订单、教室班级、聊天、账户等6个核心信息模块。

bilingo-walkthrough1.png

用户流程 User Flow

user flow的构建主要基于各个业务流程逻辑,因此我梳理了平台内涉及到的所有业务流程,Web+App两端核心交互路径27个,主要包括课程创建和购买、上课与作业完成、课程评价等重要的业务功能,登录注册、评论、举报等较通用的流程因为我们之前已经做过标准化流程,因此这次就不再重复。

线框图 Wireframe

wirefram结合功能结构图和userflow,包括通用的公开课相关、私教课相关、账号及登录注册系统、消息与通知、课程预约与购买、老师申请;老师和学生中心的课程表管理、课程管理、作业管理、订单管理、评价管理和个人资料管理等12个功能点。

Wireframe用户流程图,包括公开课的创建与购买、私教课的预约购买,公开课和私教课上课各个入口流程,作业相关的全部交互流程,老师申请流程,课程评价流程等,基本和Userflow阶段的路径一致。

界面设计 Interface Visual Design

界面视觉设计部分,首先确定了新的配色方案和视觉风格,秉承组件化的设计原则,根据wireframe进行各个页面的视觉设计,并在过程中逐步搭建完善Design System。共完成web端页面200+个,app端页面仍在设计中。\

bilingo-walkthrough2.png

bilingo-walkthrough3.png

bilingo-walkthrough4.png

前期的设计工作到这里基本进入尾声,最后需要整理所有的设计资产,上传到交付平台交予开发团队。在后面的工作中,我需要持续跟进开发,及时对开发团队的需要补充和调整。

项目阶段总结 SUMMARY

挑战 Challenge

在整个设计过程中,特别是Solution的部分,我们参考了design sprints的流程并做了简化,由于整个团队人比较少,所以各个设计决策的确定相对进展顺利

主要的争执集中在网站功能规划上,产品的初创团队中部分成员希望能够保留原来各种各样的课程和功能,并且保留汉语学习。但是调研结果以及实际体验都告诉我们这样做跟之前没有实质的改变,产品的发展路线应该是先专精后拓展,且直播课业务是我们相对最有竞争力的业务和盈利主要来源。

最后,我们决定暂时将之前的其他功能放在底部footer作为链接跳转,以后再逐步优化。