信用額度
透過 B2B 電商網站的信用額度設計，促進準時付款
專案時長
Nov 2025 - Dec 2025
團隊
1 位 UIUX 設計師
2 位工程師
1 位產品負責人
我的角色
UIUX 設計師
從零到一規劃功能，包含規模、需求、資訊架構和網頁佈局
制定設計策略
設計 UI 視覺稿
背景
以信用額度作為改善延期付款的機制
在 B2B 貿易情境中，客戶通常在收到商品後才付款，容易導致公司營收無法即時入帳並造成現金流風險。為了降低風險，我們實施了信用額度機制，並由業務與財務團隊來管理。當客戶達到信用額度時，我們將暫停接受新訂單，直到付款後才恢復可用額度。
目標
設計一項新功能，讓客戶掌握信用額度，並促進準時付款
目前電商網站缺乏信用額度資訊，導致客戶無法得知付款狀態。這項新功能將直接在網站上提供即時的信用額度資訊。
設計策略
制定一套設計策略，確保決策一致並緊扣目標
設計亮點
設計將關鍵資料視覺化的儀表板，讓使用者清楚掌握剩餘額度、信用上限與未付帳款
亮點 1
設計 My Credit 專區，整合所有付款資訊
我最初將信用額度圖表放在 My Account 頁面中，並將發票顯示於現有的訂單頁面內，以避免資訊重複出現在網站不同的頁面中。與產品經理討論後，發現發票被放在更深層的子頁面中，因此我決定建立 My Credit 獨立專區，整合信用額度資訊和未付發票，讓使用者更方便且容易查看。
亮點 2
重新定義信用額度呈現方式，從強調「已用額度」改為強調「剩餘額度」
信用額度功能常見於信用卡和數位銀行應用程式中。大多數的信用額度功能都著重強調已使用額度，因為此功能可輔助 B2C 用戶控制消費。然而在 B2B 電商網站中，仍希望促進客戶完成下單，並非限制消費。因此，我決定強調剩餘額度資訊，而非已用額度。
將剩餘額度視覺化，讓客戶更有感
為了提高資訊透明度，我對比了長條圖和圓環圖的視覺化效果。最終選擇了長條圖，因為它具有更佳的易讀性。用戶能一目了然立刻掌握剩餘額度。當額度降至 20% 以下時，進度條會變成紅色作為警示，並提醒付款。
亮點 3
在購買流程的關鍵節點設計通知提醒，清楚提醒信用狀態並提供處理指示
我設計了通知提醒，以告知客戶目前的信用額度、潛在後果及提供恢復信用額度的引導，並在購物車和透過 Excel 訂購的頁面顯示此元件。
亮點 4
設計正向回饋機制，肯定使用者的準時付款行為
由於付款本來就是客戶的責任，我們無法為提早或準時付款提供實質的獎勵或誘因。因此，我著重使用正向的圖示和文字，來肯定客戶的行為。
成果
此新功能讓客戶清楚掌握自己的信用狀態與未付款項，不再因為資訊不清而延遲付款
客戶能自行查詢額度與帳款資訊，同時減輕業務與財務團隊的負擔。
學習反思
設計能結合用戶需求與商業目標以創造價值
透過這個專案，我學習到透過介面設計來滿足用戶需求（例如：釐清所需資訊及需採取的行動）以創造實質價值，同時也支援了促進營收即時入帳的商業策略。此外，我對 B2B 的購買旅程、其與 B2C 購買行為的差異，以及貿易產業的運作方式有了更深入的理解。
下個專案
為 The ColdHub 建立品牌能見度並促進客戶轉換率
