背景
隨著谷歌廣告投入的增加和跨平臺開發框架（RD）的興起，我們的目標是將原有的Mweb使用者體驗與我們的應用程式設計相融合。目前的應用程式透過持續最佳化，顯著提升了使用者的購買體驗。我們計劃將這些改進應用到改版後的Mweb中，以便新使用者能夠體驗到我們在應用程式中精心設計的購物流程。這樣，透過廣告訪問Mweb的使用者無需在下載應用程式後適應不同的體驗，即可快速熟悉使用者介面。此外，我們相信應用程式的購買體驗能夠提升使用者的購物體驗，從而增強團隊實現目標的信心。
作為該專案的唯一設計師，我負責整個流程，從使用者畫像研究和資料分析到可用性測試。
釋出會上，我與產品經理、工程團隊、市場營銷和運營團隊緊密合作，並向他們提交設計方案以供稽核。
設計主管。
業務目標
➊ 在第一階段，我們將利用 VeryBuy 九月週年慶帶來的使用者流量，讓使用者熟悉並體驗重新設計的移動網頁。我們將追蹤關鍵指標，以檢驗其是否達到或超過舊版本的標準，作為衡量改版成功與否的基準。
➋ 如果週年慶業績達到預期並取得成功，我們將提升雙十一期間的購物體驗。我們的目標是增加購物車商品數量（ATC）、提高淨推薦值、延長平均瀏覽時間以及增加使用者平均瀏覽的商品數量。
設計目標
由於應用程式和瀏覽器之間的平臺互動方式不同，以應用程式體驗介面為基礎進行重新設計，使用者可能會發現難以在瀏覽器上流暢瀏覽。
人物角色
我們的設計目標使用者是誰？三種型別的成熟女性使用者
根據我們的使用者畫像，我們將三種型別的成熟女性使用者作為我們的主要目標受眾，因為她們的特徵和偏好對於實現我們的目標至關重要。
這些使用者畫像是透過一對一訪談、文獻綜述和資料分析構建的。我們針對這三種型別的成熟女性使用者建立了使用者畫像，以瞭解她們的目標、期望和購買動機。
為了提高新使用者的加入購物車率和網站平均瀏覽時間，我們重點關注以下三 個主要使用者畫像。
我們根據使用者的偏好，設計和制定產品展示邏輯、文案和使用者體驗佈局策略，以提高使用者的參與度和忠誠度。
主要體驗旅程最佳化
➊ 產品尺寸/顏色選擇體驗提升
問題：
在舊版MWeb中，使用者需要點選多個下拉選單才能選擇產品規格，這導致選擇和確認規格的處理時間更長。這也增加了使用者做出訂購決定所需的時間。
解決方案：
改版後，所有規格引數都整合到一個對話方塊中。使用者可以快速準確地確認產品詳情，從而縮短處理時間。點選規格引數即可檢視相應的產品圖片，避免下單錯誤，並進一步縮短下單時間。
➋ 優惠券體驗最佳化
問題：
在舊版 MWeb 中，使用者只能獲得折扣碼，這些折扣碼難以記憶和輸入，延長了訂購流程。
解決方案：
Ⓐ 新版 MWeb 設有專門的“優惠券專區”，使用者只需點選一下即可輕鬆收集和儲存優惠券。儲存優惠券時，還會顯示令人愉悅的動畫效果，讓使用者感受到超值優惠，從而鼓勵他們下單。在結賬過程中，使用者可以從可用選項列表中選擇折扣力度最大的優惠券。
Ⓑ 結賬流程已從單頁格式拆分為兩個步驟，以提供更清晰的資訊：“確認訂單列表和優惠券”以及“收貨地址和付款方式”。“前往結賬”按鈕始終位於兩步付款頁面的醒目位置，方便使用者輕鬆點選。這種設計策略減少了完成購買所需的時間和精力。
➌ 增強物品發現和推薦
.png)
問題：
首頁佈局是使用者對電商網站的第一印象，其目的是迅速吸引使用者的注意力並鼓勵他們進行探索。在舊版網站中，產品展示位置受限，產品數量較少，引導性也較弱。營銷人員不得不不斷設計熱門商品和時尚主題來吸引使用者，但這種方法難以滿足所有使用者的多樣化偏好。
解決方案：
Ⓐ 改版後，我們的產品推薦邏輯基於新使用者首次訪問的商品詳情頁的“產品標籤”。這樣可以顯示更多使用者可能感興趣的相關商品，方便他們自由瀏覽。推薦系統還會包含高點選量商品，幫助使用者瞭解當前熱門商品。
Ⓑ 在設計策略中，除了設定特定區域（例如新品、熱門商品）供使用者瀏覽外，我們還在首頁底部實現了名為“您可能喜歡……”的無限滾動功能。該功能結合現有的產品展示邏輯，使使用者能夠持續瀏覽並發現更多感興趣的產品。
我們正在使用哪些設計策略來提升移動網頁瀏覽體驗？
解決什麼問題？
由於 Mweb 和 App 的平臺互動方式不同，我們需要改進 Mweb 上的相關瀏覽體驗，使其更加使用者友好。
問題與解決方案：
「在整個 RNWeb 加入頂部欄與漢堡選單設計，藉此改善瀏覽體驗，解決使用者瀏覽不夠流暢的問題。」
全站的頭部和漢堡選單佈局旨在為使用者提供便捷直觀的瀏覽體驗，以便他們繼續瀏覽。
在購物過程中，我們不提供頂部選單和漢堡選單，因為這符合我們的首要目標：“讓使用者順利下單”。我們希望使用者在購物過程中專注於下單。
搜尋頁面和產品詳情頁面針對不同的場景設計了專門的漢堡選單佈局，如下所述。
➊ 頭部配置的更改
Ⓐ. 商品詳情頁
Ⓑ. 首頁
功能佈局：搜尋、分享、新增到收藏夾
⬅️ 功能佈局：通知、個人資料、購物車
在商品詳情頁，我們首先會引導使用者點選漢堡選單進行瀏覽。搜尋、分享和新增到收藏夾等功能會突出顯示，並固定在右側邊欄。如果使用者被某個廣告吸引，但又不太喜歡該商品，他們可以輕鬆地使用關鍵詞搜尋。
分享按鈕方便使用者與親朋好友分享產品，輕鬆傳播資訊。此外，新增到收藏夾功能讓使用者能夠追蹤心儀的產品，以便探索更多選擇。
如果使用者被引導至首頁，首頁頂部的功能將側重於引導使用者“輕鬆”瀏覽電商平臺。在首頁上，關鍵功能將主要引導使用者訪問重要頁面，同時鼓勵使用者註冊成為新會員，並突出顯示購物車的位置。
➡️ 功能佈局：通知、搜尋欄、個人資料、購物車
當使用者向下滾動首頁時，頂部會顯示一個包含熱門關鍵詞的搜尋欄。這樣，如果使用者在首頁找不到想要的商品，就可以直接搜尋。
Ⓒ. 搜尋頁面
功能佈局：搜尋欄、熱門關鍵詞佈局
當使用者將注意力集中在搜尋欄上時，他們將進入搜尋頁面，該頁面佈局包含更多相關的熱門關鍵詞和服裝搭配建議，以幫助使用者瀏覽。
➋ 漢堡選單頁面的佈局策略
Ⓐ
Ⓑ
Ⓒ
Ⓓ
Ⓔ
Ⓕ
Ⓐ 首先是“註冊和登入”部分。為了實現我們的業務目標，使用者註冊成為會員至關重要。然而，考慮到使用者開啟漢堡選單後通常希望自由瀏覽，因此本部分的設計力求簡潔輕便，在空間和視覺效果上都力求簡潔。
Ⓑ. 所有產品均已分類整理並歸入“精選產品”版塊，使該版塊更具吸引力。我們還設計了與 VeryBuy 風格相符的圖示。
Ⓒ。“政策”和“關於 VeryBuy”部分闡述了相關法規，併為可能尚未信任我們的新使用者提供資訊。他們可以瞭解品牌故事。與“註冊/登入”部分相比，本部分的設計較為簡潔，以免影響主要瀏覽體驗。
Ⓓ. 此處將放置APP下載橫幅。主要考慮因素是，使用者瀏覽後會對我們的平臺產生一定程度的信任。如果使用者感興趣，漢堡選單頁面上醒目的橫幅將引導他們下載APP並註冊成為我們的新使用者。
Ⓔ. 此外，我們還會提供一些相關的社交媒體和服務平臺，供使用者繼續瞭解我們並探索我們的相關社群。
最後，它還提供了一個友好的選項，允許使用者切換到經典的 Mweb 介面。這樣，不習慣新介面的使用者就可以繼續像以前一樣瀏覽內容。此舉的主要目的是觀察使用者對新版 RNWeb 的接受程度。
➌ 全新 RNWeb 公告與教學
Ⓐ. 創作慶祝插圖，告知使用者 RNWeb 已更新！
Ⓑ. 點選“馬上體體驗”後，使用者首先可以看到他們在廣告中感興趣的商品。當使用者瀏覽到第二個商品時，會出現一個簡短的教程，幫助他們熟悉新的 RNWeb 系統。
Ⓒ. 本輕量級教程圍繞“商品詳情頁”的三大主要操作展開，包括：“頁首介紹”、“客服頻道”和“放大檢視商品詳情”。我們選擇這三大操作是為了避免教程過長，從而影響使用者的購物體驗，甚至導致使用者離開平臺。我們也理解部分使用者可能對彈出式教程有所牴觸，因此我們提供了一個友好的“跳過”按鈕，方便使用者選擇是否跳過教程。
可用性測試
業務目標驗證專案
確保使用者在透過付費廣告被引導後，能夠自然流暢地瀏覽 VeryBuy 的商品詳情頁面（點選廣告後的著陸頁）。
此外，還要評估使用者成功將商品新增到購物車、下單以及與新版 Rnweb 上的任何頁面進行互動的難易程度。
設計目標驗證專案
透過可用性測試，觀察和了解使用者在新版 RNWeb 上的購物行為和期望。利用獲得的洞察，確定設計優先順序並進行最佳化，更好地滿足使用者需求，提升 RNWeb 的整體使用者體驗，並達到初始上線體驗標準。
Ⓐ. 聚焦三大關鍵流程：瀏覽、結帳流程與訂單追蹤，並針對這些體驗歷程設計詳細的觀察項目與任務。
Ⓑ. 由於 Android 和 iOS 平臺上的新使用者數量相近，我們將從每個平臺上選擇兩名新使用者。他們將使用 Chrome 和 Safari 瀏覽器進行測試（根據我們的資料，這些是移動電子商務中最常用的瀏覽器）。
.png)
.png)
Ⓒ. 使用 SUS 測量可用性
使用 SUS 問卷來衡量和評估可用性評分，以增強團隊對新版本的信心。
.png)
➊ 使用者透過付費廣告進入後，可以流暢地瀏覽 RNW 商品頁面。
➋ RNW 頁面元素清晰明瞭，互動層級也減少了👍。從 SUS 評分 89 分以及測試後訪談來看，使用者普遍認為更新後的頁面更加清晰易懂。“購物車”、“我的訂單”和“配送資訊”等選項的查詢也非常直觀。與舊版本相比，首頁元素也更具吸引力。“功能隱藏過深”、“漢堡選單令人困惑”以及“缺乏新意”等問題都得到了顯著改善！
➌ 漢堡選單和首頁的“分類商品”版塊極大地提升了購物和瀏覽體驗：RNW 的首頁突出顯示了分類商品，完美契合了喜歡瀏覽的使用者的需求👍。與舊版本相比，瀏覽和探索體驗的提升顯而易見！（如圖所示）
使用者不知道漢堡選單中的個人資料部分可以點選，也不知道點選後會跳轉到哪裡。在購物過程中，使用者想要檢視“我的訂單”，並嘗試點選漢堡選單查詢。他們沒有意識到頂部的個人資料部分可以點選進入個人主頁。使用者向主持人反映他們遇到了問題，不知道如何查詢訂單資訊。測試後的訪談揭示了主要原因：使用者不知道頂部部分可以點選，並且對“我的”標籤理解不足，因此不知道點選後會跳轉到哪裡。
表現
👍發現：
🔧 最佳化
表現
➊ “加入購物車 (ATC) 費率略有上漲，從 4.85% 升至 5%。” 👏
.png)
使用者問卷：
實際傳送數量：16,761
回收樣本數量：804
有效應答率：50.13%
➋ 修訂版釋出後，網路/應用程式的流暢度達到了良好👍靜態評分的水平。
研究方法：淨得分：
淨得分值代表“最高重疊度”與“最低重疊度”之間的差值。發展中國家通常使用淨得分值來計算各項指標（規模）的範圍。要點：60～100分為優秀，40～59分為良好，30～39分為較好，低於30分為劣勢。
Rnweb 改版九週年慶典圓滿成功，達到了團隊的預期。在即將到來的雙十一購物節之前，我們不僅對新版 Rnweb 更有信心，還計劃進行一些針對性的最佳化，以提高加入購物車率 (ATC%) 和平均瀏覽時長，最終提升整體結賬轉化率。
雙十一的進一步最佳化
➊腰帶
目標：
Ⓐ. 增加雙十一期間使用者瀏覽的商品數量和平均瀏覽時間。
Ⓑ. 腰帶欄應該允許使用者快速檢視他們感興趣的物品。
Ⓒ. 腰帶槽不應占用過多螢幕高度。
在考慮商品詳情頁上的使用者互動以及螢幕高度與資訊顯示之間的關係時，這一點非常重要。
基準 ：
增加平均持續時間和空中交通管制
表現：
自 10 月 29 日推出腰帶功能以來，每人平均瀏覽的商品數量達到了 3 倍以上。
➋ 活動橫幅
目標：
Ⓐ. 透過優質折扣吸引新使用者註冊成為會員。
Ⓑ. 使用者應該能夠快速關閉產品，以避免感到沮喪。
基準 ：
提高註冊率
表現：
11/5 橫幅廣告上線後，註冊率提高了0.4%。
其他演出
➊ 雙十一期間，MWeb 的瀏覽時長表現與之前類似，但略有改善。
➋ 雙十一期間，在 MWeb 上下單 2 次或 3 次的使用者比例增加。
.png)
.png)