跳至主要內容
← 返回首頁作品集

信用卡發卡商 App:獨自完成 KYC、SCA 與雙主題

專案版本發布5 分鐘
金融科技 UX身分驗證行動流程React NativeKYC

獨立完成的信用卡商 App

這是我獨立為一家信用卡發卡商設計的 React Native App:金融產品、真實的卡、真實的錢。範圍涵蓋註冊、KYC 身分驗證、SCA 強驗證、開卡、PIN 管理、鎖卡、遺失被竊回報與帳戶管理,而且深色與淺色兩套主題都要完整。因為產品尚未公開上線且屬敏感金融內容,截圖全部採用超低解析度加整張模糊,只保留版面的形狀;prototype 連結也不放。這篇文章以敘述為主:遇到什麼需求與限制、考慮了什麼、解了什麼問題。

重度模糊的深色註冊板:Email 與手機 OTP 彈窗的預設、錯誤與已填狀態
深色註冊流程(刻意模糊):Email 與手機 OTP 驗證,各有預設、錯誤與已填三種狀態。

KYC、SCA 與開卡

發卡有法遵順序:先 KYC 驗明身分,再 SCA 綁定裝置,才能開卡。KYC 需要證件與地址證明,例如水電瓦斯帳單,部分情境還有 liveness 活體驗證。這些檢查都由第三方元件執行,UX 要處理的是元件外面的世界:進去之前把要準備的東西講清楚,出來之後把結果講清楚,以及最重要的,驗證跑動的那幾十秒要有等待狀態,讓使用者知道系統正在工作,而不是當機。OTP 彈窗也是一樣的邏輯:預設、錯誤、已填三種狀態都設計,錯誤訊息說明還能重試幾次、什麼時候能重發。

重度模糊的開卡流程:啟用卡片、設定 PIN 與我的卡片頁(深色)
開卡流程(模糊):卡片資料、PIN 設定與我的卡片頁。版型呈現流程長度。
重度模糊的卡片管理板:改 PIN、鎖卡與遺失被竊回報
卡片管理(模糊):改 PIN、鎖卡與遺失、被竊的回報路徑。

深淺雙主題,雙倍狀態

客戶要求深淺兩套主題同時上線。這不是把顏色反轉就好:狀態色在深色底上的對比、卡面在兩種背景下的立體感、錯誤紅在黑底的刺眼程度,全部要各調一次。我的做法是先把結構定死(同一套流程、同一套元件、同一套狀態),再各自鋪一層視覺,Figma 檔案裡兩個版本並排維護。獨立負責整個金融 App 的收穫:每個決定都要能對法遵、工程與商業三方說出理由,設計說服力比畫面產量重要。

重度模糊的淺色註冊板,結構與深色版一致
同一套註冊流程的淺色版:一個結構、兩套完整的視覺系統。