為知名慈善企業設計的儲值券 Webview
這是一個為知名慈善企業設計的 B2C 與 B2B2C 儲值券 Webview，服務多個國家市場，介面同時提供英文與印尼文。使用者在裡面購買儲值券、選擇付款方式、分享給別人，或在店頭核銷。這篇整理第二版 UI Flow 的七張流程圖。畫面刻意使用低解析度，商家與客戶品牌一律模糊處理；流程結構、狀態與決策才是重點。
購買、折扣與每一條付款路徑
購買彈窗看似簡單，實際要涵蓋單張、大量訂購與手動輸入數量三種行為，系統還會限制每種券的購買上限。付款是整個專案最複雜的部分：電子錢包一條路，ATM 與銀行轉帳另一條，中間經過第三方金流選擇銀行，每家銀行的轉帳步驟都不同，所以我為每家銀行寫了雙語的逐步指引，並加上付款倒數，讓「等待入帳」這段時間有明確的狀態可看。
分享、核銷與長尾情境
買完之後的世界更長：使用者會寫備註、複製券號、把券透過訊息軟體傳給朋友，收到的人再從連結打開。卡片本身有新券、已使用、歷史紀錄與單張券四種狀態，「已使用」還能復原。核銷則要支援六種方式：OTP、條碼、QR code、卡號、條碼加 PIN 碼與網址，因為每個合作商家的收銀系統都不一樣。畫這七張圖的心得是：流程圖的價值不在畫面，而在把長尾情境攤開，讓工程與客服在上線前就看見每一條路。
