年份
2023
我的角色
UI/UX 設計師
負責項目
功能流程規劃、設計完稿、工程交付
專案背景
欣南瓦斯過去提供紙本帳單為主。為降低印刷成本並提升繳費便利性，公司希望導入手機端帳單查詢與繳費系統。然而，多數用戶屬中高齡族群，數位操作經驗有限，本次設計的挑戰在於：建立一套資訊清晰、操作直覺、視覺安心的帳單體驗，協助中高年用戶首次使用也能順利完成任務。
使用者洞察
欣南瓦斯用戶多為中高齡族群，對行動裝置操作相對不熟悉，且常依賴紙本帳單提醒繳費。在無法進行實際用戶訪談的條件下，我們透過研究與資料歸納，推估其在數位帳單使用上常見的困難，並針對可讀性、辨識性與資訊負荷等問題制定設計原則，協助他們能在首次使用時也能順利完成查詢與付款流程。
設計原則
針對中高齡用戶在視覺辨識、認知理解與操作信心上的挑戰，我們依據無障礙設計原則與使用者特性，從資訊呈現、互動流程與容錯機制三方面出發，訂立三項核心設計原則，提升首次使用的順暢度與安心感。
設計產出
資訊集中設計，強調繳費引導
在帳單首頁，我們將使用者每次查詢最關心的資訊：金額、繳費截止日、帳單明細，整合進單一畫面卡片中，並將「立即繳款」作為主要 CTA 按鈕凸顯。這樣的編排方式不僅減少資訊搜尋時間，也強化行動導向，讓使用者一打開網頁就能直覺進入繳費流程。此外，帳單明細則採用展開方式設計，避免初次開啟時資訊過於雜亂，提升閱讀舒適度。
用戶繳費設計與條碼儲存
延續紙本帳單的繳費方式，我們將條碼資訊設計為獨立畫面，清楚呈現條碼、金額與繳費期限，並加上用途說明與注意事項。為提升使用便利，也加入「儲存截圖」按鈕，協助用戶將條碼存入手機，方便前往超商繳費。
操作流程單一，降低認知負擔
整體流程以線性方式設計，從「查看金額」到「付款條碼」、「歷史查詢」、「發票載具」依序展開，避免複雜跳轉與返回操作。搭配底部選單固定導引，幫助使用者清楚理解目前所在位置與下一步操作，讓中高齡用戶也能安心完成整個繳費流程。
設計系統
為了提升跨頁一致性與後續維運效率，我們同步建立設計系統，涵蓋色彩、字級、間距、元件狀態等基礎規範，並將常用元件如按鈕、表單、模組區塊元件化處理。這樣的作法不僅有助於加快設計與開發流程，也能在未來功能擴充時維持介面一致性，提升整體產品品質。
互動原型
本互動原型展示行動帳單繳費的完整流程，模擬實際操作情境，驗證中高齡用戶在手機端的使用體驗與可行性。
