top of page

熱門品類實驗

透過設計優化與實驗測試，找出最合適的方案，提升版位點擊率

HotCategory_1.png

Project Background & Issues

透過數據觀察到，電商平台每個月的新客數是高的，但轉換率與回購率沒有比照相同比例增長 如何讓新客願意留下來、讓舊客持續回購，是本次探討的議題

​

以 app 端用戶使用行為來看，navigation bar 最多瀏覽量的是首頁，故本次先從首頁著手進行優化

首頁的各個版位中，發現「逛分館」的點擊率，竟然與首屏的重點版位「最新開團」幾乎一樣高！「逛分館」是在首頁往下滑到第三屏才會看到的版位，並不是強檔重點版位，而是輔助型，幫助媽媽用戶在被五花八門的團購商品吸引之餘，有一個直覺、簡單的分類索引供參考

 

而它的點擊率高，表示它能夠更精準打中用戶，是個有潛力去更強化的位置

HotCategory_2.png

Challenge

上面說到本次的議題：如何讓新客願意留下來、讓舊客持續回購

盤點促成用戶購物的的幾個面向：

  • 供給端：商開們挖掘產品的策略 → 人為開團

  • 需求端：用戶實際狀況 → 喜好、背景資料等

 

而母嬰電商領域有一個很必要的資訊是「寶寶月齡」，育嬰隨著寶寶成長的每個階段，面臨的挑戰與需求都不同，透過寶寶月齡能夠準確推薦適合的商品給目標用戶

目前「逛分館」就是按照用戶月齡，推薦適合的商品分類，不過都是固定的六個分類，沒有變化性，等於每次用戶都會看到一樣的內容，本次希望透過「重新定義資料的呈現方式」，做到內容有變化、更能彈性調整來吸引用戶的版位

Deliverable

我針對首頁「熱門品類」（原名為逛分館）版位

✔ 提案多款設計版型

✔ ​提案資料來源方式

 

本次的實驗目的是找出用戶點擊率較高的版型，在探索過程中，我運用設計幫助資訊理解，提案兩款版型設計，各別搭配兩種推薦邏輯，呈現出各種組合供大家評估討論，因而讓我們得以將 phase 2 實驗變因，收斂成方向明確的兩個面向去做實驗：

  • 推薦邏輯：固定型 L1 vs 成長型 L1

  • 版型設計：2X3 六格直排 vs 3X1 三格橫滑

Outcome

從數據來看，佔整體量最大的 iOS 用戶，點擊率微幅增加了0.6%

Android 則稍微低了 0.41%，雙平台總體來看，前後點擊率是差不多持平的狀態

HotCategory_3_mask.png

Role

Product designer

Phase 1.

小標實驗

Situation

目的：未來要採用「非固定分類」，那麼各個分類是否需要小標，對點擊率的影響？

如前面提到，舊版逛分館推薦方式是「各月齡推固定六個分類」沒有變化性，所以新版將會動態推薦非固定的分類

由於目前版位上的元素是「分類名稱 + 小標 + 固定圖片」，屆時改成動態分類後，就需要將所有商品分類加上小標，這會動用到商品開發端的人力資源，故我們評估在做下去之前，先用實驗來確認目前版型的可行性

Task & Action

   設計要點   

推測相較其他團購卡片的多重資訊，此版位的元素單純很多，可能是促成點擊的因素之一 所以在「維持元素單純」的基礎做以下版型調整：

  • 文字樣式：強化主標視覺重點、可容納字數多的分類名稱不被截斷

  • 分類圖：讓圖片與文字的比例配置更平衡

  • 背景圖：讓焦點集中在圖片上

   設計要點  

參考其他電商平台做法，會在定位相似的版位放上「促銷文字」，我們猜測這能更吸引用戶 但由於人力資源有限，我們無法做到隨各檔期活動來更動優惠文字，權衡之下決定先寫死優惠文字，在各月齡固定的六個分類中，由我們分別寫上固定的促銷字眼（為確保可信度，那些折數、件數確實都是取自該分類），這就是C版的由來

實驗選手

  • 大標 + 特色小標（類似舊版）

  • 大標

  • 大標 + 促銷小標

Result

實驗結果稍微令我們感到意外，是只有大標的B版點擊率最高！

HotCategory_11_mask.png

Takeaways

與其在空間有限的版位放上各種資訊（即使是用戶很喜歡的促銷資訊），其實更能抓住用戶的是簡潔的呈現，讓用戶的理解成本降到最低，他們會更樂意走向我們提供的後續步驟

Phase 2.

圖片使用方式、UI 形式實驗

Situation

上個實驗結束後，我們得到關於版位的元素取捨，接著要嘗試的是「哪種圖片使用方式」與「哪種版型」更能吸引用戶？

→ 系統推薦分類「同月齡用戶在一段時間內購買的品類」

舊版逛分館推薦方式是「各月齡推固定六個分類」沒有變化性，所以新版將會動態推薦非固定的分類，使用演算邏輯為「同月齡用戶在一段時間內購買的品類」，讓用戶每天看到的分類都有變化

Issue 1: 固定圖 vs 變化圖

   設計要點  

圖片吸睛先決 認為提升點擊意願的一大因素是圖片，圖片本身若夠吸引人，就能很大機率促成點擊

我提出這次優化圖片的議題：要使用各個分類既有的固定圖，還是使用該分類內的最熱銷商品圖？

後端提出是否能直接用固定圖的疑問，但我認為使用熱銷圖才合適，能夠呈現出較具吸引力的商品圖，有些季節性商品也較能符合當時需求（e.g.童裝、流行女裝）

透過模擬圖發現使用變化圖的 pros & cons（細節說明 用示意圖呈現）

  • Pros：

    • 季節性的商品類型使用變化圖的確非常合適，能夠呈現當季的時效性或話題性商品（e.g.童裝、流行女裝、消毒/抗菌/防護）

  • Cons：

    • 有配件的類型較不適合，如兒童睡袋、兒童水壺的熱銷單品是收納袋及吸管

    • 某些多種花色的類型不適合，如防曬涼感衣物、寢具床包的熱銷單品款式是樸素型的，但固定圖使用繽紛浮誇、富有情境感的圖片，更能吸引目光。我推測是反映出人們容易被誇張的款式吸引，但最後下單的常常還是安全好搭的基本款

Issue 2: Grid vs Swipe row（六格 vs 橫滑）

這裡嘗試版型的更多可能性，提出幾種不同的款式設計​

橫滑版型更強調圖片，我們認為可能是更能吸引點擊的方式，於是針對此版型做了多種設計樣式的嘗試，對於強化後的版本非常有信心（笑）

Action：實驗選手

  • 比較圖片使用方式：

    • 固定圖

    • 變化圖

  • 比較設計版型：

    • A版 六格

    • B版 橫滑

Result：實驗結果

  • 圖片的實驗結果符合預期，是「隨著熱銷單品變化」的版本獲得更多點擊率

  • 而設計版型再次令我們對實驗結果感到驚訝，點擊率較高的是樣式較樸素的A版六格！

HotCategory_16_mask.png

Takeaways

lesson learn：因應各方意見，做各種設計提案調整…忙了這麼久，最後用戶根本不在意，而是一次能看到最多商品的版型命中率才高！ 因為首先露出的前三張商品很重要，若沒有被吸引到，用戶通常就不太會繼續橫滑看更多，而是離開版位往下滑走！

Result

Mock up 成果

熱門品類

這是個位於 app 首頁的個人化推薦版位，我們希望用戶在滑過上面豐富的團購活動之後，接收的是截然不同的形式呈現：有別於上面的熱鬧繽紛、趨於更單純、更直白的分類商品

經過兩階段實驗，所得出更能引起用戶點擊的最佳形式

Wrapping Up

運用設計收斂實驗方向

這兩次的實驗目的是找出用戶點擊率較高的版型，在探索過程中，運用設計幫助資訊理解，我提案兩款版型設計，各別搭配兩種推薦邏輯，呈現出各種組合供大家評估討論，因而讓我們得以將 phase 2 實驗變因，收斂成方向明確的兩個面向去做實驗

理解到做實驗的必要性

兩次實驗結果都出乎我們預料，每次大家胸有成竹地認為X版會贏，結果卻是Y版勝出

由此看出開發者們真的不能夠太自以為是，自認足夠了解用戶

即使是自己也有過身處用戶角度的產業領域，也不能只憑少數團隊成員就蓋棺論定，因為我們身處的角色就是會有偏誤！

開發產品的路，就是不斷試著去理解實際用戶的過程，沒有所謂的終點

bottom of page