為電商平台設計商品指定物流功能

以目前的物流設定方式，某些狀況需求無法被滿足：

• 商品會依據種類有不同運送溫層（例如：食品、花卉）
• 運送地區限制差異（例如：本島、離島）
• 商品材積大小不一的運送問題（例如：家具）

• 店家可以針對商品設定適用的運送方式
• 調整結帳流程，讓顧客可以在購物車頁面決定本次下訂商品
• 顧客會知道哪些商品可以一併下單，並且能夠選擇正確的運送方式

除了針對店家後台操作蒐集競品資料參考之外，我們也對顧客結帳流程進行檢視優化

在舊版前台流程中，顧客在調整完需要購買的商品進入結帳頁後，若選擇的運送方式無法使用，就必須重新思考並再度調整商品
這樣重複的思考過程會增加顧客猶豫的時間，也提高了放棄訂單的機率，降低了轉換率

為了讓操作體驗更清晰，我們利用 User Journey map 檢視結帳流程頁面
調整了購物車與結帳頁的使用者需求與體驗目標

• 購物車頁/cart：提供消費者選擇本次需結帳的商品，並選擇到正確可行的運送方式
  
• 結帳頁/checkout：專注於填寫付款方式＝與結帳資訊

同時也將設計討論文件化，以便未來可以更聚焦頁面設計方向

最後根據需求討論出設計解決辦法

• 移除結帳頁可以調整商品的功能，只專注在填寫資料商品確認
  
• 將會影響下單商品項目的運送方式移至購物車頁面一併思考

遵循後台設計規範，新增一商品運送方式管理頁面

設定物流彈窗著重在強調適用指定物流與全店物流兩者概念差異
尤其是指定適用物流全選與適用全店物流的差異，我們使用「手動」或「自動」的解釋文字幫助店家更理解

根據設計解決辦法調整頁面體驗與操作流程

• 將不支援運送商品統一擺放在可支援商品下方，並且顯示每項不支援商品可以使用的的運送方式
  

• 為了讓顧客快速瀏覽、調整物流，我們將所有物流選項展開呈現
  
• 電腦版「前往結帳」按鈕改以置底浮動區塊滑出的方式，讓顧客可以在選擇物流、確認小計後，在固定位置找到下一步按鈕

• 移除運送方式選擇功能外，額外調整了整體資料區塊排序，優化了輸入欄位大小
  
• 付款方式、折抵欄位排序保留在最上方，額外將登入區塊移至頂端，讓已註冊顧客可以在輸入折抵前進行登入，查看剩餘購物金與折抵
  
• 在會員資料區塊，我們改使用引導按鈕，讓顧客亦可以在填寫當下選擇去頂端區塊做登入
  

* 頁面配色依據店家在商店色彩配置設定而定，在此僅示意用

操作步驟與設定流程可以參考 meepShop 教學網站-商品指定物流