top of page
Cover.png

91APP

Sass零售系統|打造全新購物流程體驗

​專案關鍵字

UI設計
介面設計
資訊架構設計
消費者訪談
易用性測試

​專案角色

​專案範圍

產品設計師 

​Website|MobileWeb |App

​專案時程

11 個月

​專案簡介

改版目標

  1. 針對購物車痛點進行設計全面改版,程式架構開放 API 化提供客戶串接 (例如:訪客購物、代替消費者下單、對話式購物、一頁式購物或第三方 API 串接…等),讓品牌客戶可更靈活應用購物車販售產品提升業績。

  2. 提高消費者於購物車結帳的操作效率,藉此提升購物車轉換率。

專案挑戰

現況已有百家客戶正在使用我們的購物車產品,在新版購物車中,原有的功能需要完整保留。本次改版將購物車流程從三步驟簡化為兩步驟,這需要全面考量每一個功能的邏輯與限制,對於設計是一大挑戰。

專案成果

  1. 購物車轉換率整體提升3%

  2. 於 2023 年 9 月成功將 300 多家品牌客戶從舊版購物車轉移至新版購物車

  3. 「新版購物車」與「舊版購物車」同期相比,消費者在購物車的停留時間縮短了30%(觀察時長:上線後為期 3 個月)。

  4. 與某知名美妝品牌合作,透過線上問卷調查詢問購買流程整體滿意度。結果顯示購物車的整體滿意度高達95%。無論是首購客還是回購客,消費者都對新版購物車給予了高度評價​(共有 4069 位參與調查)。

現況問題

透過「認知走查」首先對於舊版購物車流程進行了全面檢查,邀請幾位同事參與,向他們介紹情境、特定購物任務及其模擬角色,並請他們進行操作,同時說出心中的想法。

透過觀察他們的操作流程,將問題進行分類與梳理,最終擬定以下三大購物車痛點以及優化方向:

舊版商品卡.png
舊版購物車.png

​現況數據

與公司的數據團隊跨部門合作,觀察公司百大客戶的數據狀況,整體「購物車轉換率」以業界概略來說轉換率仍然有其進步空間。

數據&洞察.png

競品分析

本次藉由研究目前市面上的國際級產品(包含:5家垂直&水平競品),分析該平台的購物車特色以及步驟,除了了出功能外,也推敲設計之背後原因,並且從競品調查,找出新版購物車定位。

垂直競品:Shopify、Magento

水平競品:Amazon、淘寶、蝦皮購物

調研.png

​競品小結

購物車每一步驟功能,有明確定義

垂直競品(EX:Shopify & Megento) ,在購物車的流程設計上,值得參考的是,其每一步驟的功能職責明確,讓消費者在購物車時能專注於每一項小任務。

文案開放自訂提,升客戶品牌意識

另外從中發現,若能提供客戶自定義購物車內Call to Action 相關文案的口氣,將有助於品牌感的提升(PS.由於本次產品需MVP化,因此提供自訂義語氣功能將放置後續迭代)。

從商品頁就開始進行對用戶的導購行為

Shopify從商品頁就開始進行導購的功能,當用戶點擊頁面中的加入購物車或立即結帳,會立刻跳出「小推車」,讓用戶不用進入購物車就能先查看商品,促使結帳。

設計思路

01

​全盤了解購物車商業情境、邏輯、互動設計

定義義購物車的功能範圍,進行全面的功能盤點,在不影響商業情境下,提昇用戶體驗

02

重新設計資訊架構 & 視覺層級

由於購物車步驟縮減 (3步驟簡化為2步驟),​對於功能有一定的了解後,對於功能的順序擺放與產品設計內部進行多次討論,並將功能明確定義,進行模組化設計,更能對應本次程式架構面 API 化的目標。(下方為新版購物車模組化示意)

模組化步驟.png

03

製作 Prototype 加速專案對焦討論

從購物車流程的設計交互至介面UI的視覺樣式,透過Prototype反覆與產品團隊以及設計師們共同討論,進行了多達數十次的測試,獲得反饋後能快速進行調整,確保上線時能達成目標與獲得一定的產品品質。

prototype.png

上線前,邀請同事體驗產品

總體流程滿意度:70% (對比舊版購物車70%受測者認為新版體驗較好),透過內部測試發現17 個bug 以及體驗問題 51 項,經由與團隊討論評估後,進行後續修正。

  • 測試時間:2023/05/23-2023/05/25

  • 測試人數:實際參與人數172人 (邀請人數224,總參與率70.4%)​

購物車反饋.png

04

​專案成果

ui system.png

1. 重新定義用戶任務,解決操作不連貫問題

舊版購物流程的選擇與填寫付款與運送方式,被拆分在兩個不同頁面,用戶任務動作不連貫,新版購物流程由3 步驟縮減成 2 步驟,並重新定義該步驟的明確用戶任務。

STEP 1 商品與折扣決策:確認最終商品內容,包含:是否有符合折扣活動、使用優惠券、點數折抵...等權益。

STEP 2 購買履約決策 :選擇與填寫運送方式、付款方式、電子發票,接著結帳去。

購物車2步驟.png

2. 解決視覺設計屏效不佳問題

舊版商品卡-1.png

原先舊版設計安排留白空間多,一屏幕可看到的商品數量少,本次縮減近35%商品卡片高度,用戶能更快速地看完商品,完成商品與折扣確認的行為。

3.提高活動資訊易讀性

折扣活動於不同區塊重複溝通,資訊重複容易造成認知負荷,且資訊層級扁平無凸顯,影響用戶閱讀與理解。

舊版商品卡.png

若有工作機會或設計專案想聊聊,歡迎與我聯繫

unnamed.png
下載 (1).png

Hsieh Tsai-Ying 2024 Copyright. All Rights Reserved.

bottom of page