台北捷運Go APP
Redesign
台北捷運Go APP
Redesign
台北捷運Go APP
Redesign
About project
Background
「台北捷運GO」由台北捷運公司推出，用於查詢台北捷運路線、列車時刻表、票價計算、站點資訊、捷運地圖、路線規劃，目標使旅客事先安排行程更順利。
「台北捷運GO」由台北捷運公司推出，用於查詢台北捷運路線、列車時刻表、票價計算、站點資訊、捷運地圖、路線規劃，目標使旅客事先安排行程更順利。
Goal
優化「台北捷運GO」現有設計問題，使APP設計能回應北捷開發目的與目標使用者的需求。
優化「台北捷運GO」現有設計問題，使APP設計能回應北捷開發目的與目標使用者的需求。
Issue
主打項目重點模糊
無法釐清APP主打項目是訊息公告、商品推廣、捷運動態還是路線規劃，使得APP各個項目皆沒有發揮功能。
無法釐清APP主打項目是訊息公告、商品推廣、捷運動態還是路線規劃，使得APP各個項目皆沒有發揮功能。
資訊多元但混雜
APP資訊過多，且功能重複性很高，使用者無法方便又快速的找到希望查找的資訊。
APP資訊過多，且功能重複性很高，使用者無法方便又快速的找到希望查找的資訊。
介面互動方式不直覺
APP頁面呈現方式，讓使用者無法理解該如何操作，例如畫面是否可以放大、點擊、點擊後是否會跳轉到預想的頁面。
APP頁面呈現方式，讓使用者無法理解該如何操作，例如畫面是否可以放大、點擊、點擊後是否會跳轉到預想的頁面。
Information architecture
Information architecture
原先的資訊架構缺乏組織性，相同性質的功能散亂在不同的頁面，根據使用北捷APP的主要需求重構資訊層級，讓資訊更加清楚以及操作性更直覺。
原先的資訊架構缺乏組織性，相同性質的功能散亂在不同的頁面，根據使用北捷APP的主要需求重構資訊層級，讓資訊更加清楚以及操作性更直覺。
Color scheme
因APP中需要呈現的圖示、路線顏色資訊眾多，為了使個顏色都能被突顯，因此一改原有的藍綠漸層主題色，變為白灰色系為主。
因APP中需要呈現的圖示、路線顏色資訊眾多，為了使個顏色都能被突顯，因此一改原有的藍綠漸層主題色，變為白灰色系為主。
為台北捷運的主視覺色，亦將其作為APP的強調色
為台北捷運的主視覺色，亦將其作為APP的強調色
各捷運路線的代表色
各捷運路線的代表色
Mockup
首頁
原本產品的首頁僅單純將資訊以矩陣列出， 並無整理資訊架構，如「捷運路網」、「捷運路網2.0」、以及TabBar底下還有一個捷運路網功能重複，使用者在打開APP的第一眼無法馬上知道APP的主要目的。
原本產品的首頁僅單純將資訊以矩陣列出， 並無整理資訊架構，如「捷運路網」、「捷運路網2.0」、以及TabBar底下還有一個捷運路網功能重複，使用者在打開APP的第一眼無法馬上知道APP的主要目的。
After
使用者可以將自行最常查詢的車站，加入「常去站點」中，並在首頁下滑查詢。
使用者可以將自行最常查詢的車站，加入「常去站點」中，並在首頁下滑查詢。
規劃路線 & 查詢車站
原本產品查詢車站的方式有兩種：
1. 以選單方式選擇，但選單將上百站的資訊，未經分類的塞進同一個列表裡，供使用者選擇。
2. 則是透過捷運路網圖選擇，但操作方式難以控制起訖站的選擇，經常誤按；且對於不熟悉整張捷運路網圖的使用者，路網圖反而增加了查找時的認知負荷。
原本產品查詢車站的方式有兩種：
1. 以選單方式選擇，但選單將上百站的資訊，未經分類的塞進同一個列表裡，供使用者選擇。
2. 則是透過捷運路網圖選擇，但操作方式難以控制起訖站的選擇，經常誤按；且對於不熟悉整張捷運路網圖的使用者，路網圖反而增加了查找時的認知負荷。
依路線分類選單，並透過強調「路線顏色」提升使用者記憶速度，加快使用者選擇速度。
依路線分類選單，並透過強調「路線顏色」提升使用者記憶速度，加快使用者選擇速度。
調整原先擁擠的圖示與字體兼具，讓畫面的空間呼吸更加順暢。
調整原先擁擠的圖示與字體兼具，讓畫面的空間呼吸更加順暢。
車站資訊
原本關於車站的資訊，排列擁擠，且有眾多未經整合的頁面跳轉，如「停車場」、「出入口」都會共同導引到「地圖」，未能妥善利用共有資訊，並合理地歸類在畫面上。
原本關於車站的資訊，排列擁擠，且有眾多未經整合的頁面跳轉，如「停車場」、「出入口」都會共同導引到「地圖」，未能妥善利用共有資訊，並合理地歸類在畫面上。
After
將同一站點的「列車動態」、「車站資訊」、「轉乘資訊」、「周邊景點」，擺放於同一頁面的標籤頁上，以降低跳轉造成的時間浪費，也可以同時共用地圖。
將同一站點的「列車動態」、「車站資訊」、「轉乘資訊」、「周邊景點」，擺放於同一頁面的標籤頁上，以降低跳轉造成的時間浪費，也可以同時共用地圖。
最新消息
原本APP的廣告、公告、與商城的訊息，零散在首頁的各處讓APP主打項目變得模糊。
TabBar中的「線上商城」，也經常讓使用者誤點，而導致畫面跳轉到蝦皮商城。
原本APP的廣告、公告、與商城的訊息，零散在首頁的各處讓APP主打項目變得模糊。
TabBar中的「線上商城」，也經常讓使用者誤點，而導致畫面跳轉到蝦皮商城。
將所有廣告、商城、公告等廣播性質的資訊整理至同一個頁面中。兼顧利害關係人與使用者的需求。
將所有廣告、商城、公告等廣播性質的資訊整理至同一個頁面中。兼顧利害關係人與使用者的需求。
