UI/UX Redesign
Wait! TAIPEI BUS
台北等公車是雙北通勤族必備的App，但是卻有越來越多人選擇下載別款相似功能的Ａpp。最大的原因是—介面感受不佳。
此次的專案練習是以台北等公車為基礎，做介面改良的Redesign。
WHAT
UI/UX Design
TIME
Dec. 2019
Keywords
B2C、Taipei bus、UI Design、UX
I. User PainPoint
Redesign 的重點放在重新給予配色方案和介面操作的改善，讓使用者能有輕鬆愉快的感覺。
II. Wireframe
III. Mockup-首頁
首頁
改善
原首頁問題大致出現在使用顏色的濃度與對比太高，都是連結按鈕，沒有直接呈現重要資訊。
Before
・色彩過於濃烈
使用的色彩有種俗氣的感覺，太過濃烈的色彩也會讓使用者感覺覺有壓力。
・首頁資訊不夠精準
首頁的按鈕混雜著常用的功能和幾乎不會用到的功能，沒有經過篩選才會讓首頁按鈕很多。
After
・讓人放鬆的色彩
使用清爽的Tiffany色作為主色，讓整體重量減輕，帶給使用者愉悅的感受。
・重點資訊放至首頁
將常用的站牌與進站資訊放在首頁，讓使用者能更快獲得想要的資訊。
・快速切換交通工具
將功能依交通工具分類，並設計成Tab bar，讓使用者能夠一目瞭然並能快速切換。
III. Mockup-路線搜尋
・收藏路線而非站牌
使用者需要在點進下個頁面才會顯示公車到站時間，而在倉促時使用會容易看錯方向。
・常用路線依數字排列
常用路線依數字排列的設計，使用者不知道排列的邏輯時，會讓使用者花更多時間尋找。
Before
將常用路線加上分類，讓資訊呈現可以更簡潔，
使用者也能透過分類更快找到想要的路線。
路線搜尋改善
After
・分類常用路線
將路線做分類，讓使用者可依類別快速找到公車。
・直接顯示到站時間
將路線到站時間直接顯示在分類的首頁，節省查看的步驟與時間，行駛方向也是正確的。
・更新進站資訊
讓使用者可以手動更新公車進站資訊，不會錯過公車。
III. Mockup-附近站牌
Before
以地圖的方式將站牌位置標示出來，也可以利用下方的資訊卡，查看附近的站牌與距離。
附近站牌改善
・文字資訊資訊過多
將附近站牌以文字方式呈現，不僅讓使用者看的吃力，更會降低使用者的使用意願。
・無法得知站牌位置
以文字資訊呈現，無法直接了解附近的站牌與位置，
After
・地圖顯示附近站牌
以地圖取代大量文字，讓使用者能更快找到站牌位置。
・結合路線規劃功能
將查看附近站牌結合路線規劃功能到同一頁面，可以讓使用者更快找到要搭哪班車和在哪搭車。
・標示目標站牌
以顏色區別站牌，讓使用者可以直接朝目標站牌前進。
III. Mockup-查詢高鐵
Before
將臺鐵與高鐵的頁面統一，並依車種分類。
查詢前先輸入起迄站與目的地，讓查詢結果更精簡正確。
查詢高鐵
改善
・要先理解才會使用
進入頁面後，必須要先理解現在得出發站後，才會知道上下行與車種縮寫的意義。
・不知從何開始
頁面安排會讓使用者不知所措，不知道要從哪裡開始找。
After
・先輸入資訊後查詢
讓使用者先選擇起迄站與時間後再進入班次頁面，讓頁面顯示的班次符合期待。
・依車種分類
將車種全名寫出，使用者能直接理解；將車種分類使查詢更方便、快速。
・訂票功能
結合訂票功能，讓使用者可以得知有無票券，並直接訂購。
VI. Wait! TAIPEI BUS 示意圖
V. Prototype
