項目復盤:跨境電商詳情頁的改版設計總結

1 評論 6495 瀏覽 73 收藏 14 分鐘

很多設計師朋友在做一些比較大的項目改版時,總是會先陷入設計細節當中,導致要么耽誤進度難以推進,要么最后的呈現支離破碎、邏輯混亂。而解決這些問題的一個通用思路,就是借用一套專業的頂層模型來指導全程。本文作者根據在團隊負責過的一次改版項目,跟大家分享具體該怎么做,希望對你有所啟發。

一、改版背景

1. 項目介紹

此次改版對象屬跨境電商領域的Doba項目,它是面向美國市場的Dropshipping(一件代發)平臺,通過一件代發的優勢,來幫助零售商無需任何初始成本即可順利開展電商之路。

當有訂單產生時,零售商將商品信息發送給平臺,再由平臺將商品通過物流交付至終端消費者手中,由此幫助零售商完成銷售獲取利潤。這種新興的業務模式相比傳統的Wholesale(批發)讓零售商免去初始成本和備貨壓力、時間更為自由靈活,讓用戶專注于銷售本身。

面向用戶主要有三類:自建站零售商、第三方平臺零售商和初入門的新手。

2. 現有問題

Doba自上線一段時間后,通過數據調取發現了詳情頁的問題,發現不論是刊登轉化,還是收藏轉化都偏低,并且跳出很高。因此有了這次項目改版,目標很簡單:提升當前詳情頁轉化、并降低跳出。

3. 模型指導

類似這種復雜的、大型的項目改版,就可以調用專業的頂層模型。此次采用了基于雙鉆模型優化后的三鉆模型來指導流程推進。

整個設計流程被拆分為三個階段:洞察、實施和驗證階段,三者形成閉環缺一不可。

另外,它會有階段性的發散和收斂,比如洞察階段,優先通過問題走查、用戶調用、數據分析等方法來發現問題,之后根據業務價值、用戶價值來進行問題收斂,完成問題的定義。這個過程是為了做正確的事。

接著,實施階段,通過競品分析、頭腦風暴、理論搜集等方法來制定設計策略,通過優劣分析、方案評審來確認最終方案。此過程為了把事情做正確。

最后,驗證階段,通過ab測試、定性反饋等方法來衡量指標,通過原因分析、方法沉淀來復盤總結。這個過程是去檢驗有沒有做正確。

以這樣的模式來推進流程,很大程度上避免了因缺失方法或者多早鉆研細節導致的種種問題。

4. 詳情頁的意義

詳情頁是買家了解商品的主要途徑,它所承載的意義是幫助買家查看商品信息從而進行決策,重要性可見一斑。但是相比傳統的C端詳情頁,在用戶側又存在兩大難點:一類是B端,一類是海外。

二、發現、定義問題

1. 用戶研究

關于B類買家:

B類和海外用戶這兩類屬性距離我們相對遙遠,所以需要通過用戶研究來提前了解用戶?;谇捌诘膯柧碚{研,發現B類買家基本都會存在以下這些決策點:本地倉發貨、免郵、變體豐富、熱賣變體、方便變體對比、利潤空間、庫存夠、商品質量好。

專注Dropshipping(以下簡稱DS)的B類買家和以自身喜好為決策的C類買家有明顯差別。他們主要訴求是完成銷售獲取利潤,因此他們所關注的信息明顯更為綜合和全面。但是目前線上的信息權重分布,并不符合B類買家的心智。

關于美國用戶:

密歇根大學心理學系的Hannah教授基于一系列實驗在《Cultural variation in eye movements during scene perception》這篇論文指出,相比關注均衡、強調集體主義的中國用戶,美國用戶更關注單個對象,更強調個人主義。

《News Week》一篇專欄文章,從生理學的角度提出,亞裔美國人和非亞裔美國人在面對復雜、繁忙的場景時,會使用到不同的大腦活動區域。亞裔美國人的大腦活動集中在處理圖形與背景關系的區域,而非亞裔美國人的大腦活動集中在識別物體的區域。

這些差異導致了中美用戶面對同一界面的不同感知,中國人相比美國人更擅長接受理解復雜的界面。淘寶、京東那樣的復雜界面對于國內用戶來說琳瑯滿目,但對于美國用戶來說非常眼花繚亂、認知困難。

因此,面向美國用戶的詳情頁在視覺上可能需要更加克制、減負。

2. 數據分析

當前用戶設備中,1280px、1366px的小屏用戶占據近30%以上。但是由觸達率數據發現,小屏用戶一屏內無法看全主圖、變體,而且物流信息以及四個行動點都處在盲區,這可能是導致高跳出的主要原因。

3. 問題走查

通過團隊的問題走查,也發現了幾個明顯問題:

  • 比如頁面層級過于雜亂、視覺噪音較多;
  • 主圖尺寸過大、占用大量空間;
  • Price(現價)和MSPR(建立零售價)不易區分,利潤難認知,尤其對于注重利潤的買家來說很致命;
  • 先變體后行動的動線產生SKU維度誤解;
  • 查看多變體信息時,需要手動一個個切換,較多操作負荷。

三、定義問題

通過前期發散得到了一系列問題,總體來說可以定義為四個方面:視覺噪音、層級混亂、屏效過低和操作低效。因此,接下次的設計策略就可以圍繞這四個方向來制定:信息降噪、層級清晰、提升屏效和鏈路優化。

四、設計策略

1. 層級優化

層級優化前需要先進行信息分級?;贐類買家問卷調研的結果,與項目側重新確認信息優先級并達成一致,后續的層級優化將主要參考此分級結果。

然后,通過一維分析法梳理現有層級的問題,并按照上述分級結果重新調整。比如合并層級、并通過兩端布局提升屏效;大幅度的去色降噪;垂直布局來易于買家的閱讀比價;行動點前置來降低買家觸達成本等等,具體細節不再贅述。

2. 網格布局

確立最小原子為5px,建立margin=40px,gutter=10px,總寬1200px的柵格系統;以及5px、10px、15px、20px、40px的間距系統。所有的元素盡量按照此框架進行布局,進一步優化層級,建立頁面秩序感和舒適的閱讀節奏。

3. 鏈路優化

對應走查中的鏈路問題。對于B類買家來說,他們并非和C類買家一樣出于自用的目的,他們需要全面對比商品的變體、價格、庫存等因素。但當前變體的呈現和對比很不直觀,買家查看不同變體子商品信息時需要大量的操作成本,重復低效,不便于買家快速決策。

這里調研了四類包含了變體表格的主流競品:Modalyst、Spocket、Eprolo和Oberlo。Spocket和Oberlo使用了彈窗來承載,Modalyst和Eprolo分別使用了下側tabs和右側功能區進行承載。

考慮到觸達成本以及空間利用率,借鑒了Spocket、Oberlo的做法,新增鏈接入口,以彈窗的形式承載所有變體子商品的信息,幫助買家直觀比對促進決策;同時在子商品右側提供加購操作,便于加購意向買家的快速操作。

五、方案呈現

以下便是評審時最終達成一致的方案(具體的細節呈現有出很多方案,這里就不放了)。

再上一波方案對比。項目側認為比以前的更清爽、干凈了,不過不太確定數據的走向,畢竟整體改動很大,所以就需要最后的驗證階段。

六、驗證、復盤

上線后觀察數據的表現,發現基本都是正向(以下數據均脫敏處理)——收藏轉化提升了6.0%,刊登轉化提升了2.6%,跳出降低了10.2%,人均會話時長提升了16.6%。由此基本能得出一個結論:這是一次成功的設計改版,并且對業務側貢獻了價值。

為了能夠復用到團隊其他項目,就需要做一些方法的沉淀。比如對美國用戶的降噪、對B類買家的信息分級等,甚至是三鉆模型本身都可以沉淀下來。讓大家拿來即用,不用花時間去重復思考。

這個過程不限形式,可以像我一樣寫篇文章、可以ppt匯報、也可以專門做個設計分享。

七、最后

以上便是基于宏觀模型指導下進行的一次項目改版,每個小伙伴都可以結合自己具體的業務、用戶情況來參考使用。希望對你有所啟發。

我是設計師Andrew,我們下期再見。

參考文章:

張宏波:方寸屏幕,指尖空間——設計雙鉆模型的延展及運用

Sharon Begleyo:How different cultures shape the brain

Hannah Faye Chua:Cultural variation in eye movements during scene perception

專欄作家

Andrewchen;微信公眾號:轉行人的設計筆記,人人都是產品經理專欄作家。中科院碩士自學轉行,擅長通過文字幫助年輕設計師成長和提效。延遲滿足、長期主義。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 寫的太棒了

    來自中國 回復