01 Background
專案概述
捷運盃黑客松 — UI/UX設計賽
「尋找黑捷客UI/UX設計賽」是由北捷主辦的黑客松競賽，比賽為重新設計台北捷運 Go 的使用者介面及使用者體驗。聚焦在重新構思、設計、規劃一個更為簡單、明瞭、易操作且美觀的台北捷運 Go。
本企劃以「安全、可靠、親切的高品質運輸服務」北捷品牌理念出發，溶入以人為本的設計思路發想功能結構，打造「便捷、美觀、包容」高質感台北捷運 GO。
Goal
提升台北捷運Go app的使用體驗
02 Design Process
專案時程
⇀ 同理與定義 2 weeks
競品分析 、使用者訪談、使用者旅程地圖
⇀ 發想與原型 2 weeks
腦力風暴、原型設計
00 前期研究
現行平台健檢
我們首先試用台北捷運 GO，以五大問題面向檢測本 app 的易用性 :
資訊架構 : 導航與層級不直觀，容易讓使用者迷失方向，找不到想要的資訊
流程設計 : 下一步無明顯指意，導致操作困難或不流暢，容易造成挫折感
介面布局 : 元素無主從優先順序，無法一目了然畫面的重點在哪裡，包容性低
互動問題 : 同樣在 Tab 中確有頁面也有外連，操作反饋不一致
介面設計 : 較難連結至北捷本身品牌「質感、圓潤」的感受
現行台北捷運Go app畫面
同理使用者
使用者訪談及易用性測試
我們訪談了 3 位通勤族群，詢問他們在使用台北捷運 Go 的習慣及情境，以及做易用性測試。
使用者最常使用的功能是列車到站時刻，常常特別緊急的時刻使用，例如急著上班趕車。但是這個功能藏的比較深，變成使用上沒那麼便利。
此外，訪談中也發現使用者在規劃路線時，常常需要多次切換畫面才能完成，感到非常困擾。綜合分析訪談結果，我們認為台北捷運 Go 必須優先解決使用者在查看列車到站時刻的便利性，並優化路線規劃功能的使用流程，讓使用者能夠更輕鬆、快速地找到需要的資訊。
因此，我們的改善方向會著重在這兩個問題上，並設計更直覺、易用的使用者介面，提升使用者體驗。
Design Decisions
資訊架構
簡化易懂、收納資訊
簡化易懂、收納資訊
視覺優化
品牌色靈活運用
品牌色靈活運用
體驗優化
從情境規劃佈局、提供價值
從情境規劃佈局、提供價值
製作原型
線框稿 - 概念聚焦視覺化
彙整使用者需求後，結合團隊的優化想法，我將設計概念在 Figma 中繪製成線框稿，再交由設計師組員做高擬真原型設計。
03 Design Features
設計亮點
資訊架構
簡化易懂、收納資訊
將資訊架構簡化，把極少用的功能收納至側選單，讓使用者可以一眼看到重點資訊。
名稱調整更淺顯，並把重要緊急的功能放在表層，提升重點功能的易達性。
Before
After
視覺優化
品牌色靈活運用
結合「圓潤、質感、順暢」北捷形象，以大面積潔淨白輔以局部藍綠漸層
保持畫面的易讀性，又不失北捷品牌調性
體驗優化
從情境規劃佈局、提供價值
現行的 app 因畫面資訊雜亂，元件無優先級，導致辨識度低及不好記憶
優化方向以情境出發規劃布局，並提供有價值的資訊為重
以下以其中四個重點功能說明
▊ 首頁
Before
After
▊ 捷運路線圖
Before
After
▊ 路線規劃
Before
After
▊ 列車動態資訊
Before
After
Next Project