top of page
電商行動網頁全新改版
背景
隨著Google 廣告帶來更多新使用者，VeryBuy 展開 MWeb 購物體驗改版，希望提升廣告導流後的購物體驗，並讓 MWeb 與 App 維持一致的使用體驗。
由於 App 經過持續優化，已建立相對成熟的購物流程，因此新版 MWeb 延續 App 既有的設計基礎，並針對行動瀏覽器不同的操作行為，重新調整關鍵體驗，包含商品探索、規格選擇與結帳流程。
改版後，團隊透過九週年流量高峰驗證改版成效，觀察加入購物車率、瀏覽行為與使用體驗等指標，作為後續雙 11 進一步優化的依據。
商業目標
➊ 第一階段：九週年慶
利用 VeryBuy 九週年慶帶來的流量，讓使用者熟悉並體驗改版後的 MWeb。
透過追蹤關鍵指標，確認新版表現是否達到或超越舊版標準，作為評估改版成效的依據。
➋ 第二階段：雙 11 購物節
若週年慶期間的表現符合預期，便進一步優化雙 11 的購物體驗。
設 計目標
由於 App 與行動瀏覽器的互動方式不同，若直接沿用 App 的介面設計，可能導致使用者無法在瀏覽器中順暢操作。
因此，改版需要在延續 App 使用體驗的基礎上，考量行動網頁的操作特性，確保使用者能順暢地瀏覽與購物。
目標使用者
我們為誰而設計？三種類型的成熟女性使用者
根據人物誌研究，我們將三種類型的成熟女性使用者設定為主要目標族群。
這些使用者的特徵與偏好，是達成專案目標的重要依據。
人物誌透過一對一訪談、文獻研究及數據分析建立，協助團隊理解不同使用者的目標、期待與購買動機。
為了提升新用戶的加入購物車率及網站平均瀏覽時間，我們將設計重點聚焦於這三類人物誌。
根據她們的偏好，規劃商品呈現邏輯、介面文案及使用體驗配置，以提升使用者參與度與忠誠度。
核心購物流程優化
➊ 商品尺寸與顏色選擇體驗優化
BEFORE
舊版 MWeb 中，使用者必須透過多個下拉式選單選擇商品規格。
這使得選擇及確認商品規格的操作時間增加，也延長了使用者做出購買決策的時間。
AFTER
改版後，將所有商品規格整合至同一個對話視窗中，讓使用者能快速且準確地確認商品資訊，縮短操作時間。
點選不同規格時，也會同步顯示對應的商品圖片，避免選錯商品，並縮短完成下單所需的時間。
➋ 優惠券使用體驗優化
BEFORE
舊版 MWeb 僅提供優惠代碼，使用者需要自行記住並輸入代碼，增加操作負擔，也延長了下單流程。
AFTER
Ⓐ 新版 MWeb 新增「優惠券專區」，讓使用者可以一鍵領取並儲存優惠券。成功領取時，搭配愉悅、正向的動態效果，讓使用者感受到獲得優惠的喜悅，進一步提高下單意願。結帳時，也能直接從可用優惠券中選擇最優惠的折扣。
Ⓑ 將原本的單頁結帳流程拆分為兩個步驟，讓資訊呈現更加清楚：「確認訂單商品與優惠券」以及「填寫配送地址與付款方式」。
在兩個結帳步驟中，皆固定並強調「去付款」CTA，讓使用者能輕鬆以右手點擊操作。透過這樣的設計，減少完成購買所需的時間與操作負擔。
➌ 商品探索與推薦體驗優化
.png)
BEFORE
首頁是使用者探索商品的重要入口，但舊版可呈現的商品有限，主要由行銷團隊規劃熱門商品與穿搭主題，較難兼顧不同使用者的瀏覽偏好。
AFTER
Ⓐ 個人化商品推薦
根據新用戶首次瀏覽商品的商品標籤推薦 相關商品，並納入高點擊率商品，讓使用者能探索符合個人偏好的內容與熱門商品。
Ⓑ 首頁商品探索
除了新品與熱門商品等探索區域，也在首頁底部加入「你可能喜歡……」無限捲動，讓使用者能持續瀏覽並發現更多感興趣的商品。
如何透過設計策略改善 MWeb 瀏覽體驗？
要解決什麼問題？
由於 MWeb 與 App 在平台互動方式上存在差異，因此需要針對 MWeb 的瀏覽操作進行調整，使整體體驗更符合行動網頁使用者的操作習慣。
問題與解決方案
"在新版 RNWeb 中加入全站共用的 Header（頁首導覽列）與 Hamburger Menu（漢堡選單），改善使用者瀏覽不夠順暢的問題。"
全站導覽列與漢堡選單的配置，主要是為了讓使用者在持續探索商品時，能享有方便且直覺的瀏覽體驗。
然而，在結帳流程中，我們不顯示 Header 與 Hamburger Menu，這是因為團隊最重要的目標是讓使用者順利完成訂單，因此希望減少其他操作干擾，讓使用者專注於結帳。
此外，搜尋頁與商品詳情頁也根據不同使用情境，設計了相應的漢堡選單配置。
➊ 頁首導覽列配置調整
Ⓐ. 商品詳情頁
Ⓑ. 首頁
功能配置：搜尋、分享、新增到收藏夾
⬅️ 功能配置：通知、個人頁面、購物車
在商品詳情頁中，首先透過漢堡選單協助使用者探索其他內容；搜尋、分享與加入收藏則固定於右側頁首導覽列，方便使用者快 速操作。
若使用者透過廣告進入商品頁後，也可以直接使用關鍵字搜尋其他商品。
分享功能讓使用者能將商品分享給親朋好友；加入收藏則能保留感興趣的商品，方便繼續探索其他選擇。
進入首頁後，頁首漢堡選單功能以較自由的商品探索情境為主。主要功能引導使用者前往重要頁面，同時鼓勵新用戶註冊會員，並凸顯購物車的位置。
➡️ 功能配置：通知、搜尋欄、個人頁面、購物車
當使用者向下捲動首頁時，頁首會顯示包含熱門關鍵字的搜尋欄。若使用者沒有在首頁找到偏好的商品，可以直接透過搜尋尋找其他商品。
Ⓒ. 搜尋頁面
功能佈局：搜尋欄、熱門關鍵詞佈局
當使用者點擊搜尋欄後，會進入搜尋頁面。頁面提供更多相關的熱門關鍵字與穿搭推薦，協助使用者繼續探索商品。
➋ 漢堡選單配置策略
Ⓐ
Ⓑ
Ⓒ
Ⓓ
Ⓔ
Ⓕ
Ⓐ 註冊／登入
配合商業目標，引導新用戶註冊會員是重要任務之一 。但開啟漢堡選單的使用者通常以自由瀏覽為主，因此註冊／登入區採較輕量的設計，避免干擾探索。
Ⓑ 精選商品
將所有商品分類整合於「精選商品」區域，並搭配符合 VeryBuy 品牌風格的圖示，讓使用者能快速探索不同商品類別。
Ⓒ 服務政策／關於 VeryBuy
提供服務政策與品牌資訊，協助尚未建立信任的新用戶進一步了解 VeryBuy。視覺上採 較低的層級，避免干擾主要的商品瀏覽體驗。
Ⓓ App 下載
當使用者瀏覽商品並對平台建立一定信任後，透過 App Banner 引導有興趣的使用者下載 App，進一步轉換為 App 新用戶。
Ⓔ 社群與服務
提供社群媒體與相關服務入口，讓使用者能進一步認識品牌並探索 VeryBuy 的社群內容。
Ⓕ 切換經典版 MWeb
提供切換回經典版 MWeb的選項，讓尚未適應新版介面的使用者仍能以熟悉的方式瀏覽，同時觀察使用者對新版 RNWeb 的接受程度。也計畫過渡期之後會把這個功能下架。
➌ 新版 RNWeb 公告與操作引導
Ⓐ 改版公告
以慶祝感的視覺與插畫告知使用者有進行改版。
Ⓑ 引導出現時機
點擊「馬上體驗」後，先讓使用者查看原本從廣告感興趣的商品；瀏覽至第二件商品時，再出現輕量化操作引導，協助使用者熟悉新版行動版網站。
Ⓒ 輕量化操作引導
引導聚焦於商品詳情頁的三項主要操作：頁首導覽列、客服入口、放大查看商品細節。
僅保留關鍵操作，避免過長的教學干擾購物體驗；同時提供「略過」選項，讓不需要引導的使用者能直接繼續瀏覽。
易用性測試
商業目標驗證
確認使用者透過付費廣告進入商品詳情頁後，能自然且順暢地瀏覽商品，並順利完成加入購物車、下單及新版 MWeb 的相關操作。
設計目標驗證
透過易用性測試觀察使用者在新版 MWeb 的購物行為與操作期待，並根據研究結果安排後續優化優先順序，提升整體使用體驗。
Ⓐ 測試任務
聚焦於三項核心流程：商品瀏覽、結帳流程、訂單追蹤，並針對各流程規劃觀察項目與測試任務。
Ⓑ 測試對象
Android 與 iOS 各招募 2 位新用戶，共 4 位受測者，分別使用 Chrome 與 Safari 進行測試。
.png)
.png)
Ⓒ SUS 易用性評估
使用 SUS 評估新版 MWeb 的整體易用性，最終獲得 SUS 89 分。透過易用性測試觀察使用者在新版 RNWeb 的購物行為與操作期待，並根據研究結果安排後續優化優先順序，提升整體使用體驗。
.png)
👍 研究發現
🔧 待優化
① 廣告導流後的商品瀏覽流程順暢
使用者透過付費廣告進入商品詳情頁後，能順利開始瀏覽與探索商品。
② 資訊更清楚，操作層級減少
使用者認為「購物車」、「我的訂單」與「配送資訊」在新版 Mweb 更容易找到。
相較舊版，首頁吸引力提升，過去功能入口過深、漢堡選單不直覺等問題也獲得改善。
測試中發現，使用者不知道漢堡選單上方的個人資料區可以點擊，因此在尋找「我的訂單」時遇到困難。
主要有兩個原因：
1.區域缺乏明確的互動提示，因此後續加入淺色底色強化可點擊區域。
2.「我的」標籤語意不夠明確，調整為「查看我的個人資料」，讓使用者更清楚點擊後的目的地。
③ 商品分類改善探索體驗
漢堡選單與首頁的商品分類讓使用者能更直覺地探索不同商品，尤其符合偏好自由瀏覽的使用者需求。
上線成效
➊ 新版上線後維持既有轉換表現，ATC 由 4.85% 提升至 5%。
➋ 網頁／App 使用流暢度 Net Score 47｜良好
- 回收樣本數量：804
- 有效應答率：50.13%
九週年改版成效符合團隊預期，也驗證了新版 MWeb 的設計方向。
下一階段將針對加入購物車率（ATC）與平均瀏覽時間持續優化，為雙 11 購物節進一步提升整體轉換表現。
雙 11 進一步優化
➊ 商品推薦帶
為提升雙 11 期間的商品瀏覽數與平均瀏覽時間，在商品詳情頁加入橫向商品推薦，讓使用者不需離開當前頁面，也能快速探索其他感興趣的商品。
同時控制推薦區域的高度，在增加商品曝光的同時，避免影響原有商品資訊的瀏覽與操作。
10/29 商品推薦帶上線後，平均每人商品瀏覽次數提升至 3 次以上。
bottom of page