訂單追蹤
提升訂單細節的易讀性，以改善售後體驗
專案時長
May 2024 - Jul 2024
團隊
1 位 UX 設計師
1 位 GUI 設計師
6 位工程師
1 位專案經理
我的角色
UX 設計師
設計資訊架構、使用者介面及線框圖
進行競品分析
背景
顧客無法在會員中心找到完整的訂單資訊
客服團隊提出顧客無法在會員中心找到完整的訂單資訊。因此，我開始重新設計會員中心內與訂單細節相關的頁面，包含訂單總覽、訂單細節、取消訂單以及退貨頁面。
設計範圍包含會員中心裡四個與訂單相關的頁面，其中以訂單總覽和訂單細節頁面的問題最多。因此，在接下來的內容中，我將著重介紹這兩個頁面。
目標
協助顧客輕鬆查找訂單相關資訊、查詢訂單狀態，並使用售後服務
為達成此目標，訂單相關頁面應提供完整且易懂的訂單明細。
問題分析
原本的訂單總覽頁面包含多餘的元件，且難以快速瀏覽
原本的訂單細節頁面資訊零散，影響易讀性
訂單資訊分散且未進行適當的分類，同時呈現資訊的版面不夠井然有序，降低了易讀性。
設計亮點
基於功能用途與極簡主義原則進行重新設計
亮點 1
重新設計訂單總覽頁面，提供清晰且易於瀏覽的總覽畫面，以便輕鬆查找特定訂單
訂單總覽頁面的目的是提供訂單的概覽，讓顧客能快速瀏覽並輕鬆找到特定訂單。因此，該頁面應具備易讀性，並提供清晰的版面配置與邏輯化的分類。
亮點 2
重新設計訂單細節頁面，以提供完整的訂單資訊與清楚的後續行動指引
訂單細節頁面的目的在於提供每筆訂單完整的資訊，並利於使用售後服務。因此，應包含完整的訂單資訊及提供後續行動的指引。
亮點 3
建立顯示進度的元件以視覺化訂單流程
我將訂單狀態從純文字重新設計為顯示進度的元件，讓顧客能清楚看到目前所處的階段以及後續流程。
針對正向與逆向物流設計三種進度元件
我設計了三種進度元件，包含適用於正向和逆向物流的類型，協助客戶清楚了解訂單流程的所有階段與目前狀態。
確保一致性的同時，也為特定地區的物流系統保留彈性
由於各區域的訂單流程有所不同，我分析並重寫了複雜或不明確的訂單狀態文字，以提高可讀性。接著，我將訂單狀態進行分類並歸納至共同的階段，確保在適應各區差異的同時保持一致性。
針對較小尺寸的裝置設計垂直進度元件，以提高易讀性與易用性
在較小的裝置上，水平進度元件會導致內容超出螢幕畫面，進而造成複雜的互動並增加開發成本。為了解決這個問題，我將進度元件重新設計為垂直呈現，讓使用者在小螢幕上更容易閱讀和使用進度元件。
成果
改版設計讓訂單資訊更容易取得且增加易讀性，並提升售後體驗
主管對設計成果感到很滿意，因為除了達成主要目標，我還獨立完成了這個專案。
學習反思
透過清晰的設計依據說明，獲得利害關係人的共識
透過這個專案，我學會了如何清晰地溝通設計決策並說服利害關係人。當歐洲區域主管建議將管理訂單專區置於首屏頂部時，我解釋了該頁面結構優先考慮的是核心資訊與操作，而非鼓勵取消和退貨。同時，我也強調了新版設計如何透過結構化佈局、清楚的標題和顯眼的行動呼籲（Call-to-Action）來提高資訊清晰度，確保管理訂單專區不會被顧客忽略。最終，他們接受了這個設計提案。
下個專案
只需透過單一帳號，即可順暢使用多項 BenQ 服務
