Redesign──清華大學校務資訊系統
直覺的查詢功能以及簡潔的資訊呈現，讓學生用得好輕鬆
專案時間
2024/05/01~2024/07/07
我的角色
UIUX設計師
負責項目
獨自設計
現今各大學陸續迭代、更新其校務資訊系統，而清華大學的校務資訊系統已有多年歷史，且逐漸無法為學生帶來良好的使用體驗，在學生社群平台Dcard上不時有學生抱怨系統難用，甚至有學生自行為某些功能設計撰寫出替代的工具。雖然校務資訊系統存有許多問題要修改，但龐大的功能架構很難說改動就改動，容易牽一髮而動全身，不過對一名喜歡解決問題的UI/UX設計師而言是一項令人興奮的挑戰，因此我選擇這項有挑戰性的系統做為Redesign的主題。
清華大學的學生過往在使用校務資訊系統時，常感覺系統的資訊閱讀讓人感到疲勞，也無法直覺地找到自己要用的功能。此外想要查詢特定系所的課程時，只能經由下拉式選單裡眾多的系所名單查找到該系所，而且找到系所後，是一次呈現該系所的所有課程，沒有篩選功能的情況下，從眾多的課程資訊裡找到想要的課程資訊十分費時且費力。因此希望以十大易用性原則做為改善標準，為校務資訊系統重新打造輕鬆且有效率的課程查詢體驗。
同理心地圖
Persona
定義問題
考量資安問題，仍維持90天換一次密碼的設定
介面美醜問題為多數人詬病，納入設計範圍
校務系統左側的功能選單是學生經常接觸的部分，是使用的核心，必須優先調整
具體痛點
解決方案
運用SCAMPER奔馳法做為發想解方的框架，以替代、結合、調整、修改、轉為其他用途、刪除、重新排列來優化課程查詢的體驗，也秉持減法思維，若得不出解方再構想功能的新增，避免疊床架屋。
文字閱讀吃力
功能資訊呈現過多且繁雜
視覺呈現不符期待
無法直接輸入文字搜尋課程
系所下拉式選單選項過多，需花時間瀏覽
調整字體大小、間距
簡化左側選單中陳列的功能數量
以簡約的方式重新設計界面
以搜尋框增加查詢效率
保留下拉選單，但也能文字搜尋
刪除功課表、院學士班第1、2專長課程(功課表)，使用戶專注於課程查詢上
將必選修課程、英語授課課程、擋修課先修規定、某特定時段有哪些課程這些選項改變成為新課程查詢功能的篩選器的選項之一
刪除全部課程，該選項可以被新的課程搜尋功能取代；將通識課程、華語課程、跨院系學分學程相關課程、院學士班第1、2專長條列式課程設為課程查詢頁面的各類選項
整併左側選單所陳列的功能數，只留下常用功能在第一層，減少閱讀上的負擔
將對象、備註、大綱以icon代替，並刪除容量，因為修課人限不會超過教室容量的人數，兩種數值取其一即可，且學生較常關心的是修課的人限，此外也將人限與人數合併，可以更直覺地看出該課程的選課情況
Flow chart
Functional map
設計
Wireframe
Style guide
Font
H1－SF pro text（30pt）
H2－SF pro text（24pt）
H3－SF pro text（20pt）
P－SF pro text（16pt）
P(phone)－SF pro text（12pt）
Color
#F9F8F2
#504E4F
#FFFFFF
25%
設計結果
設計理念
以梅花、玻璃、紙張做為設計的意象，梅花為清華大學代表性的校花，也是清華在臺建校首任校長梅貽琦的墓園——梅園的一種象徵，玻璃為新竹的特色傳統產業之一，紙張則象徵著學生與學習。透過此三種元素的結合，強調人、文化、地方與空間三者的連結，希望設計不只有美觀，更能賦予其文化意涵。
電腦尺寸
簡化左側原先過多的功能陳列，並以卡片分類法按種類重新排列
將查詢項目簡化至六項
以搜尋框增加查詢效率
原先的查詢項目部分轉為篩選的選項
平版尺寸
手機尺寸
設計總結
1.讓有明確目標的學生能更快找到想要的課程，無須再從下拉式選單中挑選系所才能找到課程。
2.對沒有明確目標的學生，在課程查詢頁提供六個查詢入口(本系課程查詢、外系課程查詢、通識課程查詢、華語課程查詢、跨院系學分學程查詢、院學士班第一、二專長條列式課程)，做為查詢方向上的指引與參考。
3.優化左側選單，將相近的功能納入同一主題分類，使功能的查找更加直覺，容易辨識出該功能的擺放位置。
此次redesign除了課程查詢功能流程的改善外，也嘗試進行切版，過程中多數的排版都能藉由CSS的flex box完成，然而課程資料所形成的表格要如何在不同裝置呈現並保持資訊的清楚呈現是此次切版的一大課題，另外我在資訊架構規劃階段便已經簡化課程資訊，因此不打算在RWD網頁設計中再多刪除課程資訊，這也成為設計上的困難與阻礙。我花許多時間來回調整表格，並為此設置多項斷點，在手機版則選擇採納網路上的CSS旋轉表格，也經由多次的CSS調整才達成我想要的樣式，改到最後也與原先Figma的設計稿有所差距，使我認知到會網頁語言對設計是有幫助的，在畫設計稿時會多一層思考，此設計稿在現實情況(專案時程、資源等因素)能如實呈現的難易度以及可行性。
話園──語言交換交友APP
