UI/UX CASE STUDYEC DESIGN
一頁式
獨立分潤賣場
商家已有頁面編輯器、商品與庫存管理，卻仍需外部工具搭建團購頁。這次從賣場設定到選購結帳，將 KOL 團購接回既有系統，再以 A/B 方案測試釐清設計取捨。
查看一頁式體驗
02 / ONE-PAGE SHOPPINGDESKTOP & MOBILE
從看商品到送出訂單，
沿著同一頁完成。
商家將推薦分潤活動綁定賣場，由團主分享專屬連結；顧客無需註冊，就能瀏覽商品並填寫訂單。頁面上半部展示品牌與商品，下半部承接購物車、優惠、收件與付款資訊。
DESKTOP
SHOPLINE / ONE PAGE STORE
MOBILE
03 / DESIGN DETAILSMERCHANT BACKEND
商家後台設置，
沿用既有系統建立賣場。
前端團購頁由後台生成。商家在原有的 SHOPLINE 後台新增賣場、設定分潤活動，再用既有的頁面編輯器與商品資料編排銷售頁，不必再依賴外部工具。
04 / A/B TESTINGWHY → FINDINGS → DESIGN
WHY / 為什麼要測試UI 完成後，
UI 完成後，
有兩個疑問未解答。
優惠資訊要完整列出，還是精簡收合？快速結帳、Tab Bar 這些快捷操作，是否真的讓人更快完成購買？團隊因此做了 A、B 兩版原型，讓熟悉團購的使用者實際操作比較。
6 位熟悉團購的內部受測者
A→B / B→A各 3 位，平衡測試順序
任務/訪談/SUS每位約 1 小時
- 商品區有「快速結帳」浮鈕
- 結帳區有 Tab Bar 切換
- 每項商品顯示未達優惠
- 沒有快速結帳按鈕
- Header 固定購物車入口
- 未達優惠集中在下方顯示
FINDINGS / 研究結論
使用者要的不是更快，而是更清楚。
- 比起快速結帳，更在乎資訊完整、清楚。
使用者會先確認優惠是否達成、買了哪些商品才去結帳；清楚的購物車入口能降低焦慮。
- 快捷操作該用在商品之間，而不是結帳欄位之間。
遇到長介紹或多組商品時，希望在商品與購物車之間來回；也希望點優惠標籤就能找到對應商品。
SYSTEM USABILITY SCALE
A 版完整版79.1/ 100
B 版精簡版78.7/ 100
兩版都接近「易用性優良」的 80 分，只差 0.4 分；
因此決策看的是行為與訪談回饋。
EVIDENCE / 對應頁面
切換主題，看結論從哪裡來。
FINAL DESIGN / 最終方案
把「快速結帳」換成購物車入口。
保留 A 版完整的優惠資訊，搭配 B 版容易找到的購物車：商品區的浮動按鈕先開啟側欄購物車確認內容，再前往結帳；滑到購物車區後，浮鈕換成回到頂部。結帳區的 Tab Bar 則拿掉。
① 開啟購物車→
② 確認後結帳→