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