.png)
Annie Hsieh
91APP
Sass零售系統｜打造全新購物流程體驗
專案關鍵字
專案角色
專案範圍
產品設計師
Website｜MobileWeb ｜App
專案時程
11 個月
專案簡介
Project Overview
改版目標
-
針對購物車痛點進行設計全面改版，程式架構開放 API 化提供客戶串接 (例如：訪客購物、代替消費者下單、對話式購物、一頁式購物或第三方 API 串接…等)，讓品牌客戶可更靈活應用購物車販售產品提升業績。
-
提高消費者於購物車結帳的操作效率，藉此提升購物車轉換率。
專案挑戰
現況已有百家客戶正在使用我們的購物車產品，在新版購物車中，原有的功能需要完整保留。本次改版將購物車流程從三步驟簡化為兩步驟，這需要全面考量每一個功能的邏輯與限制，對於設計是一大挑戰。
專案成果
-
購物車轉換率整體提升3％
-
於 2023 年 9 月成功將 300 多家品牌客戶從舊版購物車轉移至新版購物車
-
進行改版前後的相比，消費者在新版購物車的停留時間縮短了30%（觀察時長：上線後為期 3 個月）。
-
與某知名美妝品牌合作，透過線上問卷調查詢問購買流程整體滿意度。結果顯示購物車的整體滿意度高達95％。無論是首購客還是回購客，消費者都對新版購物車給予了高度評價(共有 4069 位參與調查)。
現況問題
Current Challenges
透過「認知走查」首先對於舊版購物車流程進行了全面檢查，邀請幾位同事參與，向他們介紹情境、特定購物任務及其模擬角色，並請他們進行操作，同時說出心中的想法。
透過觀察他們的操作流程，將問題進行分類與梳理，擬定以下3大痛點以及優化方向：
舊版購物流程
Previous Checkout Flow
現況數據
與公司的數據團隊跨部門合作，觀察公司百大客戶的數據狀況，整體「購物車轉換率」以業界概略來說轉換率仍然有其進步空間。
Current Data
競品分析
Competitive Analysis
本次藉由研究目前市面上的國際級產品(包含：5家垂直＆水平競品)，分析該平台的購物車特色以及步驟，除了了出功能外，也推敲設計之背後原因，並且從競品調查，找出新版購物車定位。
垂直競品：Shopify、Magento 水平競品：Amazon、淘寶、蝦皮購物
洞察小結
Insights Summary
一、購物車每一步驟功能，有明確定義
垂直競品(EX:Shopify ＆ Megento) ，在購物車的流程設計上，值得參考的是，其每一步驟的功能職責明確，讓消費者在購物車時能專注於每一項小任務。
二、文案開放自訂，升客戶品牌意識
另外從中發現，若能提供客戶自定義購物車內Call to Action 相關文案的口氣，將有助於品牌感的提升(PS.由於本次產品需MVP化，因此提供自訂義語氣功能將放置後續迭代)。
三、從商品頁就開始進行對用戶的導購行為
Shopify從商品頁就開始進行導購的功能，當用戶點擊頁面中的加入購物車或立即結帳，會立刻跳出「小推車」，讓用戶不用進入購物車就能先查看商品，促使結帳。
01
首先須對於現況購物車商業情境、邏輯、互動設計有其了解，透過大量收集現有公司文件並了解當初設計的背後原因與需求，較能兼顧商業場景，同時提升用戶體驗重新設計
Design Process
設計思路
掌握產品全貌
02
使用Prototype讓溝通更順暢
了解每一個功能的現況後，將資訊架構重整，並以「視覺層級」的手法，解決現況問題，初期透過Prototype輔助展示，與產品內部同仁討論時，可以更快速的溝通與被理解，目的是為取得公司內部同仁的一致認可。
產品測試
Design Process
一、上線前邀請同事體驗產品
在開發階段，透過內部測試版的APP與線上問卷，進行內部同仁的易用性測試。
測試結果顯示，總體流程滿意度：70％，透過內部測試發現17 個bug 以及體驗問題 51 項，經由與團隊討論評估後，進行後續修正。
實際參與人數172人 (邀請224人，總參與率70.4%)
測試時間：2023/05/23-2023/05/25
二、上線後進行購物流程體驗調查
新版購物車上線後，與某知名美妝品牌合作，使用者結帳後，會跳出購物流程體驗調查(左方圖示)
結果顯示購物車的整體滿意度高達95％。無論是首購客還是回購客，消費者都對新版購物車給予了高度評價 (共有 4069 位參與調查)。
三、邀請消費者進行用戶訪談
透過上述消費者購物體驗訪談問卷得知，8％ (398人) 反應商品的促購活動提示不好理解，為了釐清問題，最終邀請 5 位受測者，以線上訪談形式進行用戶訪談。另外也請消費者重現購物逛店的流程，搭配放聲思考法，請消費者說出他們的心聲與實際反饋，從中發現消費者的逛店痛點，以利後續產品改善與調整。
受訪者樣貌
為什麼促購活動不好理解？
訪談的發現
商品卡下方的促購活動提示「再湊」會讓人衝動購買，促成消費契機
促購文案的活動規則沒有完整揭露不好理解，需要點進去看才知道 (EX:再湊會送什麼贈品？究竟折扣多少？)
優化與行動
商品卡下方「促購活動文案展示」再湊NT$XXX之後的文案，是由客戶自行建立的活動名稱，因此建議客戶在寫活動文案時，首要考量活動規則的揭露，保持易於理解以及精簡的文案傳達
專案成果
Project Outcomes
01. 數據結果顯示整題轉換率提高3％，且「新版購物車」與「舊版購物車」同期相比，消費者在購物車的停留時間縮短了30%（觀察時長：上線後為期 3 個月）
02. 與某知名美妝品牌合作，透過線上問卷調查詢問購買流程整體滿意度。結果顯示購物車的整體滿意度高達95％。無論是首購客還是回購客，消費者都對新版購物車給予了高度評價(共有 4069 位參與調查)。
從3步驟變2步驟，提升用戶操作速度
解決舊版付款與運送方式拆分在 2 個頁面，操作不連貫問題
商品與折扣決策：是否有符合折扣活動、使用優惠券、點數折抵...等權益。
購買履約決策 ：選擇與填寫運送方式、付款方式、電子發票，最後進行結帳。
增強用戶理解力，加速結帳速度
利用「 視覺層級 Visual Hierarchy」中的大小、顏色、間隔、排序...等，增強用戶對於購物車結帳流程的理解力，例如：是否以符合符合折扣活動、還是要再湊單？付款與運送方式是否是自己想要的...等，進而完成結帳。
優化折扣活動提示
-
以圖標與顏色，增強已符合與未符合的活動提示
-
新版移除商品卡片之外的折扣活動區塊，降低消費者的認知負荷
增強區塊感，加速用戶決策
-
透過卡片式設計，讓每一個區塊功能任務更加清晰，讓使用者更容易辨別功能
商品卡片高度縮減35%，增加購物車瀏覽屏效
洞察與反思
Insights & Reflections
取得設計面與商業面的平衡點
在本次購物車改版中，除了優化使用者體驗，也需要兼顧品牌客戶的商業需求。我們嘗試在「簡化購物流程」與「功能完整性」之間找到平衡，但過程中發現，某些看似多餘的步驟，其實是品牌方希望保留的行銷機制，例如：優惠提示、贈品圖片顯示...等。這讓我們意識到，設計不只是讓流程更順暢，而是需要考量不同利害關係人的需求，找到最適合的折衷方案。
數據驗證與持續優化
改版前，我們透過數據分析了解購物車的轉換率，並與競品比較，確認優化方向。然而，數據的前後對比是可以提供給客戶讓他們安心與交代，並不足以解釋使用者的行為，因此後續加入了購物後的問卷與用戶訪談，發現某些設計雖然直覺，但使用者仍可能感到困惑，例如：購物車商品卡的折扣活動顯示方式。這些質化研究讓我們在數據之外，獲得更深入的洞察，幫助產品可以更精準的調整。