YUYAN 線上教學平台

PROJECT
#User Research # Product Design # UIUX Design
MY ROLE
UX Research UIUX Design
TIME
3 Months

專案說明

YUYAN是一個語言教學平台,在這個平台上學生以及教師們可以有效率且有互動性地進行線上課程

YUYAN platform mockup

設計挑戰

在這個變化快速的世界裡,人們生活的方式也快速地在改變。由於 COVID-19,我們的學習方式在過去幾年發生巨大的變化,線上學習的需求隨之提升,然而,線上學習卻總是遇到各式各樣的挑戰跟困難。

設計目標

解決學生以及老師在線上學習所遇到的困擾,並改善線上學習的成效,希望創造更有互動性的學習環境

設計流程

本專案為疫情期間的設計挑戰,前期我向身旁的學生以及教師進行訪談,同時,也發放網路問卷來蒐集關於線上教學以及學習時的痛點,透過這些洞察理解本專案的設計方向,並透過競品的研究以及用戶流程圖來制定產品架構以及設計規劃,過程中也藉由易用性測試來獲得更多回饋以優化產品的使用體驗。

定義問題與目標

問卷調查
用戶訪談
用戶旅程
人物誌

設計研究與發想

HMW
競品分析
用戶流程圖
迭代更新

設計規劃

線框圖
高擬真設計
設計原型

測試與回饋

易用性測試
回饋蒐集

用戶研究

在疫情期間,身為教師的我也在線上課程中不斷地「觀察」學生以及同事 (教師) 所面臨到的問題,他們所說的任何一句話都有可能是線上學習中的痛點

問卷和訪談

我也著手向5位學生以及3位老師進行訪談,同時發送約20多份的問卷調查,以蒐集線上過程中學生所遇到最大的問題以及挑戰

Google survey findings image

調查發現

60%
網路以及設備問題
有超過60%的使用者在進行線上課程的過程中曾面臨網路、音訊、視訊連接不良的狀況
40%
缺乏互動性
作業與考試沒有完整的系統,視訊過程中也缺乏互動的機會,導致注意力很快就分散
NO.1
教師線上課的經驗
即使是線上課程,不同的老師也會帶來不同的體驗,學生在上課時最在意老師本身是否熟悉線上教學的操作

定義問題

現況問題#1
作業繳交流程複雜且難以找到上傳的位置

在我的學校,我們依賴Google Classroom進行作業以及考試的管理,然於對於許多學生而言,Google Classroom的作業繳交流程還是相對複雜且難以找到上傳文件的位置

Google Classroom-首頁
Google Classroom-作業清單
Google Classroom-作業說明
Google Classroom-上傳文件
現況問題#2
在課堂中,師生之間欠缺互動的機會

這是其中一堂課過程中的截圖,可以看到學生們喜歡在聊天室傳送文字以及貼圖,由此可見學生渴望互動的需求,但是對於不會產生互動的教師而言,這卻是學生課堂不專注的表現。

現況問題#3
課堂結束後,師生雙方都無法掌握學習成效

由於實體的作業以及考試在線上課程後沒有被系統化,導致學生以及老師沒有辦法有效的追蹤學習表現與成效

旅程地圖

藉由前期的研究調查,我將觀察到以及搜集到的資訊整理成旅程地圖,並將流程切分為三個階段:前期的決策階段、中期的體驗階段,以及最後的回饋階段。在每個階段中,我們針對用戶可能面臨的痛點進行分析,並找到潛在的優化機會。這不僅能幫助我們更深入了解用戶需求,還能為後續的設計決策提供有力的依據,最終提升整體用戶體驗。

User journey map image

人物誌

接著,我根據訪談的回饋,整理出兩種人物誌,分別為學生以及教師,並整理出這些用戶的需求目標,以及他們會有的痛點,透過人物誌,我們可以更具體的理解我們要鎖定的用戶族群,幫助我們後續的設計規劃。

Personas image

HMW

在定義出用戶目標需求以及痛點後,我將問題轉換成HMW,透過HMW來進一步發想出可能的解決方案。

我們該如何讓作業上傳的流程簡單又方便?
我們該如何在線上學習環境中創造互動的機會?
我們該如何讓學生以及老師都能看見學習的過程?
How MIght We illustration

競品分析

市面上已有許多線上教學平台的產品,我透過研究這些競品來尋找可能的解決方案,並透過SWOT分析 從中去發現可以優化的機會點以及平台強勢的功能。

VEDAMO logo
錄影功能、方便學員隨時學習過往功能
沒有學習表現的報告分析
Coursera logo
簡便作業上傳、完整測驗系統
適合自學,缺乏互動性
Edulastic logo
完整數據分析報告出學習表現與成效
無法與老師進行訊息溝通
Google classroom logo
能夠張貼文章、留言並上傳文件
介面不夠直觀, 需花時間探索學習
SWOT analysis image

可能的解決方案

我將研究出來的結果整理出來,並區分出針對「教師」或是「學生」的解決方案,這些解決方案有助於我發想產品可能的架構以及互動流程。

教師
讓使用者能預覽範例作業並理解如何完成
老師能在批改完作業之後給予學生簡單的回饋
結合多元平台的系統,如問卷、投票功能,提升課堂的互動性
學生
提供明確作業上傳流程並簡化操作步驟
重複觀看過往課程影片
數據化顯示學習時數以及作業測驗成績
Solutions illustration

流程圖

我首先定義出「學生」以及「教師」各自在平台上要完成的目的,藉由這些情境,我可以更有效的產出流程圖,並確保流程可以呼應到用戶的目的以及需求。

User flow image

線框圖

經過使用者旅程的繪製和機會的分析,我收集了一些有用的見解,這幫助我了解應該在哪些地方集中精力並進一步改善設計。根據使用者流程和之前的研究,現在是時候開始為關鍵頁面繪製一些線框圖了。在製作線框圖時,我確保頁面內容和功能以使用者為中心、具可用性,並專注於達成使用者目標。

互動的
以互動的方式獲取有用資訊
直覺的
直覺化的操作體驗
有用的
功能能有效的幫助到用戶
組織化的
有條理的作業與評估系統
Wireframes image

易用性測試

我透過 “Maze” 向8位使用者進行易用性測試,主要測試內容為觀察使用者是否能順利完成「預定老師」「進入測驗」等流程,並透過這些回饋進行後續的設計優化。

Maze usability test screenschot
Maze usability results
優化前
20%的用戶不知道Logo旁邊對應的功能為何
中間的按鈕容易分散用戶的注意力,導致Navigation的功能使用率變低
訊息功能出現的位置與用戶的預期不符,導致功能容易被忽略
優化後
以用戶易懂的名稱重新命名按鈕功能,並增加按鈕的大小以提升主要CTA的視覺層級
移除中間的瀏覽按鈕,使用戶可以更專注於使用Navigation,讓使用體驗更加直覺
將訊息功能移至Navigation以符合用戶的預期以及習慣,讓功能更加便利且好找
優化前
傳送訊息的功能不夠直觀,不符合用戶習慣的使用方式
每周進度的切換Tab不夠明顯,導致過程中有用戶找不到作業繳交的功能
課堂公告需要學生主動尋找,無法有效布達重要資訊給學生
優化後
將傳送訊息功能移至Navigation,以更符合用戶使用預期與習慣
以下拉方式收合以及展開各類別項目,並以清楚的類別命名,讓用戶更好對應瀏覽與尋找內容
以更明顯的方式將內容釘選在頁面右側,提升公告的曝光率以達到佈達的效果

設計產出

透過前期大量的探索以及研究,以下我將展示最後的設計畫面,並著重在介紹各個功能內容,希望最後提出的設計概念能真正帶來影響力,改善線上過程中用戶所面臨到的各種問題

HMW: 我們該如何讓作業上傳的流程簡單又便利?
功能說明:
「進度條」鼓勵使用者完成每周進度

簡單明瞭的作業說明,好找的上傳以及下載功能

提供作業範例,讓教師以及學生更好預期作業的內容形式
YUYAN Upload Homework page-mobile view
YUYAN Upload Homework page-mobile view
YUYAN Upload Homework page
YUYAN Upload Homework page-mobile view
Problems: 60%的人曾因為網路連線問題影響線上學習
功能說明:
提供過往影片以利於下載與回放,用戶可以重新回顧完整課堂內容來獲得更良好的學習體驗
YUYAN Class appointment page
YUYAN Class appointment page-mobile view
HMW: 我們該如何在線上學習環境中創造互動的機會?
功能說明:
提供互動式題目、問卷讓所有學生在課堂互動的方式更加多元

參與分數系統,透過回答獲得點數,藉此鼓勵互動並追蹤學生學習參與度

結合多種平台資源的應用,讓分享體驗更多元且便利
HMW: 我們該如何讓學生以及老師都能看見學習的過程?
功能說明:
數據化顯示學習時數、作業以及測驗綜合分數

老師能透過文字以及語音的方式提供回饋,增加師生互動性

配合圖表以及課程說明讓學生更好理解個階段的學習表現
YUYAN Performance Analysis page
YUYAN Performance Analysis page-mobile view

UI設計

以下是我UI設計整理出來的內容,包含:顏色、字型、元件系統以及Logo設計概念,身為教學產品為了讓產品更加友善,我也將Accessbility納入考量,確保顏色的對比度可以符合更多的用戶。

UI design System

反思與學習

團隊合作
對於一人團隊來說,這是一個相對龐大的專案,我相信透過與更多人的參與,一同進行前期探索並研究問題能夠激盪出更多元的想法以及創意。
測試驗證
我希望在測試階段能夠進行更多的易用性測試,畢竟實用的功能是需要經歷過無數的測試與迭代,並從中獲取來自多元使用者真實的回饋,最終進行優化來打造真正實用且有用的產品。
探索更多「教師」的解決方案
這個專案的目標為解決「教師」「學生」在線上過程中的問題,我其實花比較多的時間在探索「學生」的問題,如果我有額外的時間,我會探索更多關於「教師」的問題,發想出更多可行的解決方案,並真正解決到不只「學生」還有「教師」的痛點。
Thank You

其他專案