企業後台補款自動化
完善客戶體驗
企業後台補款自動化
完善客戶體驗
角色
角色
產品設計
產品設計
協作對象
協作對象
產品經理*1
軟體工程師*2（前端、後端）
產品經理*1
軟體工程師*2（前端、後端）
專案期間
專案期間
2023/12-2024/2
2023/12-2024/2
平台
平台
Web
Web
Background
Background
Autopass for Business 是管理企業加油與停車費的服務，讓企業客戶（以下簡稱企客）底下大量車輛，能透過統一儲值的方式，支付車輛加油、停車等出行費用，簡化企業車輛的費用管理與支付流程。
企客的合作模式採用預存金制，企客於指定帳戶存入金額，用來支出旗下車牌的交易費用，當餘額不足時將無法繼續交易。原先的補款流程完全仰賴人工，營運與會計需每日對帳與補款，企業匯款後也需填寫表單回報，並等候一天才能入帳。隨著企客數量增加，這套流程的負擔也同步放大。
因此，團隊決定推動補款流程自動化，將企客匯款串接銀行虛擬帳號，系統自動比對入帳並增補儲值金額。
Autopass for Business 是管理企業加油與停車費的服務，讓企業客戶（以下簡稱企客）底下大量車輛，能透過統一儲值的方式，支付車輛加油、停車等出行費用，簡化企業車輛的費用管理與支付流程。
企客的合作模式採用預存金制，企客於指定帳戶存入金額，用來支出旗下車牌的交易費用，當餘額不足時將無法繼續交易。原先的補款流程完全仰賴人工，營運與會計需每日對帳與補款，企業匯款後也需填寫表單回報，並等候一天才能入帳。隨著企客數量增加，這套流程的負擔也同步放大。
因此，團隊決定推動補款流程自動化，將企客匯款串接銀行虛擬帳號，系統自動比對入帳並增補儲值金額。
Goal
Goal
1
補款流程串接銀行虛擬帳號
補款流程串接銀行虛擬帳號
後台串接銀行虛擬帳號，讓對帳流程自動化，減少人工對帳補款的資源耗費
後台串接銀行虛擬帳號，讓對帳流程自動化，減少人工對帳補款的資源耗費
2
設定「預存金帳戶」不同水位通知
系統建立多階段通知，減輕營運即時人工催促的負擔，並降低企客因餘額不足，導致交易中斷的頻次
系統建立多階段通知，減輕營運即時人工催促的負擔，並降低企客因餘額不足，導致交易中斷的頻次
Process
Process
設計過程
設計過程
1
重整帳戶卡片的資訊層級
重整帳戶卡片的資訊層級
當匯款帳號從固定改為虛擬後，每個預存金帳戶都有了各自專屬的匯款資訊，因此，原先集中呈現的設計邏輯不再成立，帳戶卡片需要重新思考資訊的呈現。
當匯款帳號從固定改為虛擬後，每個預存金帳戶都有了各自專屬的匯款資訊，因此，原先集中呈現的設計邏輯不再成立，帳戶卡片需要重新思考資訊的呈現。
在匯款帳號的呈現方式，我比較了彈出視窗與展開收合兩種路徑。彈出視窗雖能爭取更完整的版面空間，但企客往往需要在多個帳戶間來回比對餘額，彈出視窗等於中斷這個比對過程。因此最終選擇收合在各自卡片內。
同樣的邏輯也延伸到警示訊息。餘額不足原是每個帳戶各自的狀態，卻放在金額下方，視覺上像是附屬說明。因此我將帳戶警示移至卡片最上方，直接傳遞「這是該帳戶當下狀態」的訊息；連帶也重新調整了帳戶名稱與金額的層級，讓使用者能一眼辨識。
在匯款帳號的呈現方式，我比較了彈出視窗與展開收合兩種路徑。彈出視窗雖能爭取更完整的版面空間，但企客往往需要在多個帳戶間來回比對餘額，彈出視窗等於中斷這個比對過程。因此最終選擇收合在各自卡片內。
同樣的邏輯也延伸到警示訊息。餘額不足原是每個帳戶各自的狀態，卻放在金額下方，視覺上像是附屬說明。因此我將帳戶警示移至卡片最上方，直接傳遞「這是該帳戶當下狀態」的訊息；連帶也重新調整了帳戶名稱與金額的層級，讓使用者能一眼辨識。
2
強化警示通知
讓補款期限更明確
強化警示通知
讓補款期限更明確
首先，在研究階段與營運同仁討論後，我發現多數企客是中小型公司，對接窗口通常是會計或老闆，較少主動操作後台，遇到問題習慣直接透過電話或客服反映。這代表我們最容易觸及到企客的地方，可能是簡訊或 Email，而非後台頁面。
因此我設定了一個原則：
首先，在研究階段與營運同仁討論後，我發現多數企客是中小型公司，對接窗口通常是會計或老闆，較少主動操作後台，遇到問題習慣直接透過電話或客服反映。這代表我們最容易觸及到企客的地方，可能是簡訊或 Email，而非後台頁面。
因此我設定了一個原則：
重點資訊應在第一層通知就露出，而非仰賴使用者登入後台查看。
重點資訊應在第一層通知就露出，而非仰賴使用者登入後台查看。
隨團隊定義更多階段的水位通知（水位是預存金餘額的門檻），例如預警水位、凍結水位等，我也重新梳理各階段的通知內容與溝通方式，皆優先以簡訊與 Email 分階段通知，讓企客能在交易受影響前就能掌握狀況。
隨團隊定義更多階段的水位通知（水位是預存金餘額的門檻），例如預警水位、凍結水位等，我也重新梳理各階段的通知內容與溝通方式，皆優先以簡訊與 Email 分階段通知，讓企客能在交易受影響前就能掌握狀況。
在原先的設計，我發現無論是餘額不足或帳戶即將被凍結，後台都只用黃色橫幅做提示，Email 也僅以文字說明請儘速補款；然而像這樣「車輛即將無法使用服務」的情況，我認為在設計上需做更有力的調整。
因此，我重新設計警示的呈現方式：將帳戶凍結相關的警示改為紅色，並在文案中明確標示補款期限為 N 工作天，取代「儘速」這種模糊的說法。
在原先的設計，我發現無論是餘額不足或帳戶即將被凍結，後台都只用黃色橫幅做提示，Email 也僅以文字說明請儘速補款；然而像這樣「車輛即將無法使用服務」的情況，我認為在設計上需做更有力的調整。
因此，我重新設計警示的呈現方式：將帳戶凍結相關的警示改為紅色，並在文案中明確標示補款期限為 N 工作天，取代「儘速」這種模糊的說法。
3
整合後台設計系統
提升一致性與維護效率
整合後台設計系統
提升一致性與維護效率
在設計過程中，我也發現後台原有的設計存在一致性問題，例如同類型元件的 padding 不一，或是功能相同、樣式不同的重複元件。這些差異不僅讓介面缺乏一致的操作體驗，長期下來也增加系統維護的複雜度。
在設計過程中，我也發現後台原有的設計存在一致性問題，例如同類型元件的 padding 不一，或是功能相同、樣式不同的重複元件。這些差異不僅讓介面缺乏一致的操作體驗，長期下來也增加系統維護的複雜度。
因此，我著手整合企業後台既有的設計系統，統一元件的樣式與使用方式。
由於本次功能開發也會新增及調整多個元件，團隊便將設計系統更新同步納入開發時程，讓整理後的元件能直接應用於本次專案。
因此，我著手整合企業後台既有的設計系統，統一元件的樣式與使用方式。
由於本次功能開發也會新增及調整多個元件，團隊便將設計系統更新同步納入開發時程，讓整理後的元件能直接應用於本次專案。
Final Design
Final Design
Takeaways
Takeaways
這次專案讓我更重視使用者與不同接觸點之間的資訊串連。
當使用者不習慣主動操作後台時，Email 與簡訊就成為重要的溝通管道，尤其在緊急情況下，應讓使用者不登入後台也能快速理解狀況並採取行動。
這次專案讓我更重視使用者與不同接觸點之間的資訊串連。
當使用者不習慣主動操作後台時，Email 與簡訊就成為重要的溝通管道，尤其在緊急情況下，應讓使用者不登入後台也能快速理解狀況並採取行動。
Next Project
© Yuan Chiu 2026 Copyright. All Rights Reserved.