★
Overview
台灣迪卡儂的 B2B 報價系統是門市與業務處理企業交易的內部平台，但部分流程仍需 End user 回傳確認，使用體驗將直接影響溝通效率與品牌感受。因舊系統流程繁瑣、資訊不清，導致使用者容易出錯，本次改版聚焦於提升報價效率、操作體驗與品牌一致性。
UI/UX 設計、使用者研究、使用者訪談、 資訊架構規劃、需求定義、原型設計、易用性測試、開發協作溝通
2 months
Tools
Figma
Draw.io
Jira
SurveyCake
Notion
★
Key Results
減少使用者建立報價單平均時間
減少常見錯誤回報率
提升使用者滿意度
分析 tickets 來找出問題及了解系統流程架構
在舊版的 B2B 報價系統中，使用者需要透過多個角色協作完成一張報價單，但流程中存在許多問題，影響日常作業效率與使用體驗，因此我先分析系統錯誤回報 tickets 中的問題以及了解創建報價單的 user flow
B2B 報價單系統分析
最多被提到的三個問題主要反應：
01
流程不直觀
02
手機不友善
03
金額結算錯誤
User flow 黃底粗字部分代表著要完成一張報價單需要經過不同部門人員協作
跨部門操作報價單系統的 user flow
我透過建立使用者旅程地圖作為資訊架構重構與介面設計的依據並幫助以下挑戰：
重新檢視系統功能：聚焦易用性、必要性與可讀性，找出核心痛點
定義專案範圍：與 PM 多次討論，釐清需求並確立優先順序
促進跨部門協作：協助成員從自身角色理解用戶流程，對齊優化重點與設計目標
使用者旅程地圖
透過使用者訪談以理解需求及行為
➡️ 難追蹤報價進度
➡️ 折扣管理複雜
➡️ 報價歷程難查詢
➡️ 手機操作不便
➡️ 難以即時修改或追加產品
➡️ 價格不透明
➡️ 缺乏明確的報價步驟
使用者訪談筆記和腳本
Solution & Outcome
在掌握所有必要資訊和準備工作後，我開始設計 B2B 報價單系統介面。首先，我們優先規劃「建立報價單」頁面，因為它是系統中最核心且使用頻率最高的功能，也是大部分用戶都必須操作的。
減少使用者閱讀負擔及增加搜尋效率：優化初始頁面架構
1
精簡導航與有效搜尋
😡
舊版導航列佔據大量螢幕空間，且重要搜尋功能不直觀。
😄
我將高頻率使用的「顧客姓名」、「報價單號」及「統一編號」等搜尋條件整合至頂端導航列，並以下拉選單與輸入框呈現，讓使用者能快速且精準地找到關鍵資訊。
2
清晰菜單與權限管理
😡
舊版側邊菜單圖示不明確，並顯示了用戶無權限的功能，造成視覺干擾。
😄
移除無權限項目以避免誤導，並為每個功能選項新增圖文相符的標籤，提升導航效率與易用性。
3
智慧化列表資訊排列
😡
舊版訂單預覽的欄位順序不符合使用者習慣，關鍵資訊難以快速瀏覽。
😄
依據使用者最關注的「狀態、日期、金額」等資訊，重新排列列表欄位，確保用戶能一目了然地獲取核心數據，有效減少認知負擔與操作錯誤。
舊版與新版訂單預覽頁面差異
4
簡潔高效率的篩選機制
😡
舊版寬幅篩選面板不僅佔用大量空間，更導致列表壓縮迫使使用者頻繁捲動。
😄
更改為按鈕觸發的側滑抽屜式設計，同時新增更多篩選選項，使介面更簡潔美觀，操作流程也更流暢直觀。
操作篩選功能
提升使用者填寫效率：設計應對複雜的使用流程
我將原本多頁面的流程簡化成單頁互動介面，並採用展開式卡片設計，避免使用者頻繁切換畫面，明顯縮短操作時間，並降低使用者疲勞感提升工作效率。
整個流程透過訪談了解欄位必要性及符合填寫習慣的順序，建立清晰的層級結構並進行欄位群組，提升填寫直覺度。
建立報價單一頁式介面設計
有效降低錯誤率：強化訂單項目管理
1
導入自動計價模組
😡
在使用者訪談中，我們發現使用者過去在手動計算產品費用、折扣和運費時容易出現錯誤，不僅耗時也影響報價的準確性。
😄
系統能智慧自動計算產品折扣、運費及其他成本差異，有效降低人為錯誤，確保報價的精準度，並快速回應客戶需求。
2
優化商品清單管理
😡
操作流程過於重複，是造成效率低落的主因之一。
😄
採用了更直觀的卡片式設計（適用於行動版）與列表形式（適用於桌面版）來呈現商品清單。介面支援多選取功能，讓使用者能夠批次勾選、編輯或刪除商品項目，大幅簡化了重複操作的步驟。
訂單項目區塊設計（手機版與桌面版）
降低跨部門溝通障礙：優化備注與記錄機制
為了降低因資訊落差造成的誤會與作業錯誤，我導入了訂單修改記錄，清楚標示每次報價變動的時間、負責人與修改內容，讓整個報價過程更具透明度與可追朔性，減少溝通誤會與作業錯誤，提升團隊協作透明度。
由於一張報價單會經由不同的操作人員，因此新增了備註回覆機制，讓使用者可以針對報價單內容留下訊息提醒，作為彼此溝通的渠道。
訂單資訊預覽頁面 (含歷史記錄)
新增備註回覆
訂單修改紀錄詳情
提升報價回傳率：解決客戶資訊模糊問題
根據用戶訪談發現，客戶回覆率偏低的原因在於資訊呈現不夠清晰，難以一目了然，因此我們新增了即時預覽、簡潔的付款明細與回傳步驟，客戶能快速確認並回覆，顯著提升整體回覆率，達成業務效率的提升。
客戶回傳報價單頁面設計
透過易用性測試驗證構想
為驗證系統的易用性，我製作了接近最終成品的高保真互動原型（支援桌機與手機版），涵蓋 UI 元件、配色、版面與核心功能，便於提前發現並修正潛在問題。
我事前撰寫測試腳本與使用情境，邀請 5 位不熟悉專案的內部同仁進行線上測試，透過實作操作與問卷訪談，收斂關鍵使用痛點，作為後續優化依據。
易用性測試前的準備
主持易用性測試會議
新挑戰出現我是如何與夥伴合作
在開發 B2B 報價系統時，我與工程師緊密合作，在設計理想與技術限制間不斷協調。為確保 MVP 如期上線，同時保留核心功能與良好體驗，我們針對每項挑戰制定折衷方案，以下為實作階段的關鍵協作與決策整理：
倉儲入帳時機限制 – 即時入帳功能
😡
倉儲出貨後需批次入帳，導致業務與財務無法即時掌握營收，影響決策與回報；對帳也因倚賴倉儲操作而延遲，增加跨部門溝通成本。
😄
在了解流程及財務方系統操作後，新增「我要入帳」功能，讓業務與財務可自行入帳，不用等倉儲方操作。系統會自動同步相關資料到 ERP，並且還有權限限制和二次確認，避免誤操作。
二次確認機制
門市發票類型限制 – 自動啟用轉單功能
😡
由於 B2B 團隊的開發票作業程序於後期有做調整，門市在建立報價單並選擇「三聯式發票」後，須立即將該單轉交給 B2B 團隊負責後續開票與處理，因此新增了自動轉單流程。
😄
我與 PM 及工程師確認了技術可行性與流程細節後，當發票類型欄位選擇「三聯式發票」時，系統便自動啟用並預設選中「轉單」單選按鈕，確保報價單能即刻轉交給 B2B 團隊處理，減少跨部門溝通成本並提升整體效率。
自動啟用轉單功能
更了解以使用者為中心設計背後的意義
在 B2B 報價單系統專案中，我運用自身的產品設計技能發現並解決問題，最終打造出直覺且以使用者為中心的體驗，幫助使用者有效率地完成任務。
這段經歷讓我學會拆解複雜流程，將真實需求轉化為可執行的介面設計；在與 PM、工程師的密切協作中，我也練習用數據與邏輯說服不同角色的能力。從使用者訪談、資訊架構規劃到最終交付設計，全程參與的經驗不僅是我首度主導完整系統改版，更讓我對產品設計充滿信心。
更重要的是，我深刻體會到「設計不只是好看」，而是要真正幫助使用者高效完成工作。在這過程中我相信這些努力為未來的發展奠定了堅實的基礎。
＊ More Projects
