青韵合唱團

專案類型

Website

背景

青韵合唱團，是由一群喜好音樂的建中及北一女校友所組成，多為義工性質。 現有網站也是由合唱團內團員所建置，畫面、架構及後台管理，未有較詳盡的規劃及設計，導致管理困難，網站使用意願低落。因此，受管理者委託，重新設計此網站。

擔任角色

UIUX Designer
-
User Research
UI/UX Design
Prototype
Usability Test

時程

約3個月
2022/11 ~ 2023/1

最後結果

SUS

83.5

經過一次重新設計後User對於新UIUX設計滿意度大幅提升，對於合唱團的專業程度有大幅的提升測試及訪談後，再次利用SUS進行測試，結果提升至83.5，達到原本預計超過80的目標！

主要挑戰

網站資料更新困難

管理者須透過HTML修改、更新資料，導致資訊更新困難，仍以FB作為主要宣傳管道，官網使用性極低。

缺乏IA與排版規劃

整體網站資訊架構不明確，且文字量過多，導致閱讀負擔，需重新規劃架構及排版。

使用者使用意願低落

網站為非專業人士製作，存在不少bug，且整體網站不夠吸睛，使人不願多花時間停留。

了解問題

使用者研究

痛點 1

「演出詳情」並非於官網內顯示其資訊，購票又為不同平台（橫跨三個平台），導致使用者操作時，因非預期轉跳而感到困惑及厭煩。
‍

痛點 2

資訊量過多，使user無法從介紹了解合唱團之核心價值，使有興趣深入了解或想加入的人，產生不少疑惑而退卻或離開網頁。使得網站使用率低落。
‍

痛點 3

指導老師的照片使用黑白或生活照，使用者產生困惑，且對於合唱團的專業程度存疑。
（黑白照：讓人困惑是否老師已故；生活照：使人覺得缺少專業度）

透過競品分析及原網站之架構對照，推測其問題點有哪些，並列出主要操作流程，轉換為任務，以利後續測試

進行易用性測試及訪談6位受測者，透過「放聲思考」了解操作問題，並由SUS確認當前網站易用性不佳，並獲以下痛點

使用者旅程

切分了不同的情境，了解在不同情境及目的下，User在操作上會遇到哪些困難及疑惑，主要為以下測試情境：
• 第一次進入網站＆查看演出資訊
• 深入了解合唱團
• 觀看演出影片
• 租借場地

重新規劃架構

根據競品架構、現有架構、及使用者提出之需求進行新版site map規劃。

New Site Map

UI設計

Wireframe主要針對「查詢店家資訊」使用者訪談時，獲得的痛點進行近一步的設計以及遊戲化的「抽店家」為主要設計。

Wireframe

18 個畫面（PC/Phone 2版）

2 輪使用者測試

6 位受測者

• 主色不使其脫離原本的色調太多，並增加擴增色
• 輔色使用褐色及淡黃色，創造金屬感，提升樂團專業度及網頁整體質感

品牌色調整

Prototypes

測試

結合「走廊測試」與「認知走查」
由之前6位相同的受測者，再次進行5項任務導向的垂直測試，驗證設計是否合適，並進行即時迭代。

經訪談發現「委託創作」
一般 User 對於此頁內容感到非常困惑，不能理解其含義；
但對於學過「聲樂」的 User來說，可以馬上理解本頁為「合唱團樂譜」。

綜上考量為此頁增加說明，讓大部分進到此頁面的 User 可以理解，
也不會因更改Navigation的名稱，導致合唱團或學過聲樂的人想找樂譜不知去向。

額外發現

結果

SUS