NTHU Course Selection System Redesign

Going through the complete research and design process for the first time made me transform from a beginner to an experienced designer.

UXR / UXUI design / Usability test / Framer / Web & mobile

Client

NTHU SA & CCC

Category

UXR / UXD / UID

Result

Canceled

Duration

2018

Client

NTHU SA & CCC

Category

UXR / UXD / UID

Result

Canceled

Duration

2018

Client

NTHU SA & CCC

Category

UXR / UXD / UID

Result

Canceled

Duration

2018

Background

Since the university merger of Hsinchu University of Education and NTHU in 2018, some course selection systems have not been unified. In addition, the outdated course selection system has been criticized by students. Therefore, the school hopes to re-launch a new course selection system interface as soon as possible.

2018的專案,細節已記憶模糊,深深體認資料記錄整理的重要性

Team

全體|發展與研究
賴同學|系統開發
楊同學|前端開發
蔡同學(我)|UXUI設計

Motivation

賴同學長期關注清大學生選課問題,陸續於畢業專題開發三個幫助選課行為的網頁插件,這樣的經驗因而讓學校邀請重新設計選課系統介面。不希望僅限於介面的調整,而是從以人為本的角度出發在根本上優化選課體驗。

Plan

  1. 串連利害關係人—學校相關機關拜碼頭、學生團體找人脈找資源、各種課程專案利用

  2. 運用各種資源進行意見搜集—找問題

  3. TA現場演示選課的流程與困難—脈絡訪查

  4. 課程資源運用:建立專案去做更多探索研究

  1. 三場工作坊,建立親合圖、Persona、UJM,錨定核心問題與目標

  2. mobile Wireframe重複討論繪製

  3. 建立可操作Prototype並做使用者測試

  4. 整理後第一次迭代,同時交付開發,後細節調整

原選課系統部分UI:主畫面、科系dropdown選單、訊息modal

Problems

「找到脫窗」一百多個科系、課程類型選擇為下拉選單,找到自己要的眼睛會脫窗

導覽列分類多元(科系依院來分、通識外語類群、跨域類群、篩選器),三步減少選項並找到目標。

「衝堂可以選但顯示不清」 課程只有選與不選,無法先關注留存或比對,mental load很大

增加暫存功能,即能次要顯示於課表,並可儲存多個方案方便比較。

「容易漏選必選修,不提醒我,都安排好了」

必修課程即為預設選取、衝堂顯示設定的優先順序,可相衝堂改存到暫存區

「太不方便看」課程瀏覽與以選課程分為上下兩部分,狠狠分割難以操作來回對照。

改為左中右排版,分別為:導覽列 15% / 課程瀏覽55% / 已選課程課表30%

「課程屬於哪些類型的哪指標很難看清楚要自己寫下來」

將課程資訊、類型、指標、規定等確實標籤化,方便篩選尋找

前期研究:聚焦收集利害關係人之使用心得、痛點與需求。

有關選課的所有利害關係人之關係圖

脈絡訪查 Context

兩週內針對 8 - 10 位學生進行脈絡調查(Contextual Inquiry)。
請學生使用非官方的選課預排系統 NTHU Course 模擬預排下學期的課程,
觀察學生選課時的行為與策略(如查看畢業審查或詢問學長姐),後驗證觀察的解讀,並進行通識課的訪談。

前期研究:脈絡訪查與相關MVP建立—課程心得分享部落格

中期輔助研究

建立校園論壇繼續收集學生選課相關行為,聚焦於校園社群如何藉由經驗分享彼此賦能,
提升關於課程的體驗與認識

需求探索工作坊

藉由多場工作坊與設計思考工具(雙鑽石、序列模型、價值主張、Affinity Diagram....等),
將手中所有一、二手資料與結果重複分析、分類、擴張、收斂,以將痛點與需求轉譯成各層次的意義詞句,才始能進入Redesign階段,將設計建立在意義詞句的根基上。

Persona

經過多方訪談、測試觀察、問卷收集等使用者研究後,不斷整理與收斂,
歸納出能代表使用者的人物誌,將需求與痛點明確聚焦。

UJM

細分選課過程前中後所有步驟、做的事與想法感受,製作User Journey Map,視覺化可能的設計機會點。
完成使用者研究後進入UXUI設計階段,規劃大架構Roadmap,設定好魚骨後開始搭建魚肉。
因細部設定與功能總是大大牽連著整體系統與規劃,需不斷來回於整體與細節中。
也不斷地與工程師來回討論可行性,在設計的求好心切與開發實作的限制與耗時中多次取得共識。

那時還不知道用軟體畫wireframe有多快速,花不少時間手繪手機版線稿

Result- Mobile

Mobile UI & interaction map

Result- Desktop

User Test

初版介面製作成捨操作原型後,始進行易用性測試。
內容包括:前測問卷(了解受試者資本資料與相關觀點、經驗)、引導受試者描述這個系統以及對應的想法,
進行情境描述與任務指示,讓受測者依照自己的想法操作完成任務,從中挖掘不同的思考與操作方式,
找出需要修改的部分。最後使用SUS(系統易用性量表)量化使用體驗。

Learning

減法與折衷

第一次的正式介面設計經驗,深深體悟到設計是無法隨心所欲與無限上綱,就算是每個改動都非常有益的也一樣,受限於開發與技術限制,太多的想法必須暫時刪去或是找到折衷辦法,非常需要長時間去評估與調整。不能以“案子”的角度來看待大型系統的重新設計,而是一種至少要跟隨人生三五年以上的一種“生態”。

複雜中抓核心

面對歷史悠久的龐大系統Redesign,其牽涉與複雜程度沒有最高只有更高,儘管在一開始極力釐清所有利害關係人與彼此的牽涉程度,隨著設計流程的推進只會生越多問題、需求、限制與細節,除了牢牢抓住核心研究結果不被分枝與細節迷惑外,制定停損點是非常必要的。

行為想法改變需要時間

使用者的選課操作經驗從0~4年甚至是8年不等(視求學年長而定),早已習慣使用原本的系統,
不管新系統的設計有多好,要一次大更改讓使用者操作新系統怎麼說都是很違反人性的,
建議慢慢更新迭代,一次只改變一個“主要”功能或設計,
除了能讓使用者有熟悉空間外,能有更多的時間空間讓牽連到的利害關係人能動態回饋與評估成效。