悠遊卡 /
悠遊付電子支付 APP
整合實體和虛擬服務，享受「無現」便利生活
實現「無現」生活，悠遊無限
悠遊卡公司的願景是打造民眾從早到晚都可以享受便捷支付的消費生活圈，提供以交通為核心，向外拓展到日常支付的多樣便民服務。2020 年 3 月正式推出「悠遊付」，以行動支付補足悠遊卡 (電子票券) 無法線上消費與大額消費的斷點，實現一卡 (悠遊卡) 一付 (悠遊付) 的「無現金」生活。
專案挑戰
跨越電票與電支藩籬
整合線上線下支付行為
Easy Wallet 的前身為較單純的悠遊卡管理工具，供用戶綁定並查看餘額，在更新前已經有 20 萬會員，主要用戶為擁有多張卡片的商務人士，或需要確認孩子小額花費的家長。
本次更新，將產品核心從管理電子票證，轉化為電子支付與電子票證的共同消費與管理，然而礙於法規與系統技術關係，兩者的餘額並不能直接互通，代表民眾所想像的「綁定悠遊卡後直接以手機付款」並不能發生。
因此，在重重限制下，如何透過電支的導入整合電票的消費創造新的使用價值，來滿足原有用戶與新用戶的使用需求與期待，成了本專案最關鍵的挑戰。
設計目標
確保流程效率與易用性
悠遊付的使用場域發生在人潮擁擠的大眾運輸閘門，超商、百貨、攤商等結帳的列隊，及線上電商購物流程中，分秒必爭的情境下，必須確保流程順暢快捷，不讓用戶因等待造成尷尬或跳離。
整合電支電票消費管理
如同專案挑戰所述，本案除了需著重在電支行為流程外，更需兼顧 Easy Wallet 原有 20 萬用戶倚賴的電票管理功能，「如何讓電支與電票的應用產生關聯」，讓 APP 成為電支與電票的整合管理平台。
創造視覺記憶點
身為較晚進入電子支付市場的新品牌，悠遊付必須在首次亮相就抓住用戶的眼睛。本次大膽挑戰了不曾出現在悠遊卡形象中的新色—質感黑，在襯托原有四色的同時，導入全新視覺感受。
翻轉印象
跳脫品牌四色形象
創造獨樹一格的視覺張力
身為電子支付市場新軍的矚目焦點，我們大膽翻轉民眾對於悠遊卡熟悉的四色印象，置入具有高度辨識度的深黑色、擷取卡片輪廓做為襯底，與現有企業形象激盪出突破框架的創新火花，也讓原有用戶擁有嶄新的視覺感受。
從註冊到身份驗證
引導用戶一步步
過關斬將！開通錢包！
依照電子支付法規規範，從註冊到開通錢包，用戶總共必須經歷手機驗證、設定六位數字密碼、身分證個資驗證、金融工具驗證四個步驟，資料欄位有別於初代 Easy Wallet 會員註冊時僅有的自創 ID、 email 與英數混合密碼，驗證層級相對高出許多。加上未成年用戶需要雙法定代理人的同意始可註冊，因此針對新會員、初代會員、註冊完但未完成驗證會員、未成年用戶等不同角色皆需設計不同流程，並透過適當的引導確保用戶知道自己的狀態、能完成所有步驟。
付款條碼
黑底白卡輔助聚焦於條碼上
功能位置方便單手操作
本次選用深黑色為支付頁面襯底色，除了讓用戶出示條碼時明確感受悠遊付與眾不同的視覺印象外，也讓白底的支付條碼更加明顯。
另外，將付款方式、建立捷徑與手機條碼載具皆置於頁面下方單手可觸及的位置，方便用戶在結帳時快速操作。
與交易、餘額相關的頁面 放大金額權重
以明確的字級落差、粗細與顏色，區別畫面上用戶最在乎的資訊 — 金額，讓用戶以任何視覺動線瀏覽都能第一眼就看見。
哈囉 BeBe
和悠遊卡吉祥物 BeBe 相見
在空值、支付完成等容易產生疑惑的頁面，我們加入可愛活潑的 BeBe 讓使用者更有效地瞭解流程狀態，注入友善親和力。
悠遊卡管理
一次管理多張悠遊卡
掌握消費動態
由於資料欄位眾多，我們根據使用者瀏覽的頻率高低與資訊本身重要程度，以「卡片即時狀態」「交易紀錄」與「延伸功能」三類區分內容，餘額、是否購買 1280 定期票等即時狀態優先權最高，佔據視覺重心；交易紀錄次重要且數量會延伸，位於畫面下方可透過 scroll 延展；延伸功能則隱藏於交易紀錄後方，用戶有需求時可點擊卡面或下拉展開。
連結悠遊付錢包自動加值
讓悠遊付錢包的餘額能自動在卡片交易餘額不足時，以用戶設定的條件加值。有了自動加值的堅實後盾，用戶不必再面臨乘車或消費時餘額不足的窘境！也因連結錢包需先將卡片記名，若日後不小心遺失，也能申請退還餘額。
嗶乘車
感應支付「嗶」一聲
自在悠遊捷運/公車/YouBike
更新後最讓人期待的功能「嗶乘車」於 Andoird 手機亮眼登場！開啟 NFC 功能、連結悠遊付錢包，乘車輕輕感應就俐落付款。
使用者還可以在桌面新增捷徑、或者設定開啟 APP 直接打開感應頁面，更節省乘車時間。我們也透過大面積感應示意區和水波動畫效果，讓使用者清楚了解系統目前的狀態、強化易用性。
生活助手
帳單繳費交給悠遊付
搞定生活大小事
電子支付的一大產品特點，就是能整合政府繳費稅相關功能，讓使用場域從日常消費擴充至週期性的帳單處理。
我們在生活繳費頁面以四種鮮明圖標幫助用戶快速辨識不同帳單類別，並於內頁設計「加入常用帳號」選項並預設勾選，在用戶第一次查詢／繳費後，即協助記下帳號，提升未來查詢的便利性。
悠遊遊樂場
消費送代幣玩拉霸
增添刺激感、強化回饋印象
不同於其他競品直接贈送回饋，悠遊付設計在特定消費後贈送拉霸代幣給用戶，讓用戶能自行選擇遊玩時機，且每次都有機會中大獎 — 整週不用付，不受當次消費金額限制。回饋金則會在中獎之後匯入錢包。
透過遊戲化的方式，將原本「消費拿回饋」的直接結果，轉化為刺激又驚喜的有趣互動，加深用戶對悠遊付回饋的印象。
對於如何在市場上已經有鮮明印象的品牌，大破大立的加入新的識別性是最大的挑戰也是最大的成就；這次透過設計讓品牌重新進入數位市場可以被留下更強烈的記憶！
本專案最難的地方在於「如何在符合法規與現有系統跟硬體設備的限制之下，梳理出用戶能理解、會使用的流程」。
幸好透過客戶窗口、設計與開發單位三方的積極溝通，順利讓專案完成上線！重點是，我們都很愛它：）
瀏覽其他作品
悠遊卡 / 悠遊付電子支付 APP
遠傳電信 / friDay 影音 APP
