重新設計購物流程
專案期間
JUN.2026 - SEP.2026
角色
產品設計師
使用工具
Figma
Gemini
Gemini Notebook
專案重點
User Research
UX
Interaction
UI
挑戰
在某服飾品牌App中，跟使用慣例不同，使用者在將商品加入購物車前就必須選擇配送方式，產生痛點
我的設計決策
將配送決策後移至購物車，並透過使用者測試來驗證是否能提升購物體驗
發生了什麼事
先分訂單 vs. 先好好購物
商品有「宅配」、「超商取貨」、「門市取貨」、「門市快速取貨」四種配送方式。由於配送方式會影響系統從哪裡調度庫存，以及訂單是否需要拆分，因此系統要求使用者在加入購物車前先做決定。然而，這個決策時機也讓使用者在還沒決定要買什麼之前，就必須先思考「要怎麼拿」以及「是否有免運」等等。
要解決的問題
如何在系統需要提前決定配送方式的限制下，讓使用者更自然地完成購物？
設計決策
將配送方式的決策延後至購物車階段，讓使用者先完成選購，再決定如何取貨。
把複雜的判斷交給系統，幫助使用者輕鬆完成階段性任務。
01 將配送決策移回結帳流程中
將購物車分成三格，幫助使用者判斷什麼商品放哪一區
新的購物車介面有三個Tab：待選分類、門市取貨、宅配或超取。將商品加入購物車時，系統進行第一次分類，將僅能使用特定配送方式的商品分到該類，需要使用者選擇的商品則放到待選區。透過介面上的badge與notification提醒使用者商品狀態發生變化，幫助使用者理解新的介面及功能。
優先呈現「最多商品可最快領取」的門市
02 提供資訊，避開衝突
多階段提醒配送限制，幫助使用者避開多訂單狀況
在各階段提供判斷依據，提供使用者主動查看的選擇，避免直接打斷購物心流。
加入購物車前提醒配送限制
優先呈現「最多商品可最快領取」的門市
查看所選商品在各門市的取貨狀況
03 排解衝突
引導使用者解決問題
當使用者選擇會造成多訂單的門市時，協助使用者發現問題，並提供更換門市、配送方式、貨源等解決方案。
系統提醒狀況發生，並指引解決方法
針對單一商品採取行動，解決問題
使用者測試
Happy Path｜單一訂單情境
商品A及商品B可在同一門市取貨。
測試目標：使用者是否能理解新的購物車及流程。
Sad Path｜可合併之多訂單情境
商品A及商品B有門市現貨，適用門市快取；商品C須從倉庫調貨至該門市，系統判定為兩張訂單。
測試目標：使用者可理解狀況，並將商品A及商品B調整為倉庫調貨，合併訂單。
Edge Case｜不可合併之多訂單情境
商品B及C無法與商品A在同一門市取貨，將分為多張訂單，使用者須重新選擇商品B及C的取貨門市。
測試目標：使用者可理解狀況，並完成多訂單結帳。
測試結果
降低了前期購物的干擾，但也造成結帳流程的認知過載。
隨著訂單變多，需要使用者判斷的步驟增加，使用者的任務完成率及信心程度也迅速下降。
Happy Path
Sad Path
Edge Case
任務完成率
信心程度
洞察01
在遇到問題前，使用者不會主動閱讀系統提示或複雜資訊
即便系統一再提醒，使用者的行為卻是「反正先選下一步，遇到問題再說」。
洞察02
使用者不想理解或思考，希望系統直接提供最佳方案
在Sad Path中，比起快速取貨，使用者更重視是否能同一訂單取貨、使用優惠券，並希望系統能直接替他們決定，並不想花時間理解原因。
要解決的問題
如何降低使用者在結帳過程中的認知負荷，幫助使用者最輕鬆地完成目標？
01 調整系統判斷
以「最少訂單量」取代「最多商品可最快領取」
選擇門市取貨後，優先呈現可用最少訂單取貨的門市，幫助使用者初步排除複雜的訂單情境。
02 提升系統提示的視覺層級
將系統提示的位置移到視野中心
將系統提示移到主要按鈕的上方，與下一步行動產生關聯，提高使用者的警覺性及閱讀意願。
03 縮減文案
系統提示更精簡扼要
僅留下與使用者最相關的系統提示，並提供補充資訊的按鈕，幫助使用者瞭解無法同訂單取貨的原因。
