以 A/B 測試將推薦食譜最佳化

  • 我的角色UI 設計與網頁前端
  • 成員2 位產品設計師與 1 位資料工程師
  • 時間2 - 4 週
Switch LanguageEnglish

簡介

愛料理是台灣最大的食譜社群。在愛料理,每個人對產品提出的疑問,都因為可以進行 A/B 測試,挑戰原有設計或內容。這是跟前後端工程師緊密合作,重新設計 UI 元件的成果。

遇到技術問題

愛料理網站在 2010 年左右,只有桌上型電腦版本的時候獲得市場驗證。為了適用行動裝置,用了許多過渡方法,只要改變一小塊地方,就有可能會搞砸其它某處。設計系統的概念興起後,產品與行銷團隊經常提出進行實驗的想法,卻被更新的複雜度所限制。

為了製作 UI 元件的準備

想把打結的過渡方法解開,就要知道工程師的方法與工具。

網頁開發

CSS 以有規律的命名原則,讓 UI 元件外觀是各自獨立的。在 JavaScript 用到的名稱也要調整。

Git 與 GitHub

就跟工程師一樣,在 GitHub 使用 Git 流程存取程式碼。

進行 A/B 測試:推薦食譜最佳化

團隊之前構想的「推薦食譜」,用來推測訪客想繼續看下去的內容。把不同資料放入重新設計過的 UI 元件,即可進行 A/B 測試。

問題

Bounce Rate Icon

從搜尋引擎找到愛料理食譜的訪客,大多只看了 1 篇就離開。

目標

是否有可能推薦訪客想再多看幾篇的相關食譜?

原有情況

從相同的情境或分類裡,推薦 3 篇食譜。例如:宵夜或海鮮。

假設

5分鐘酒蒸蛤蜊食譜

訪客看過「5 分鐘酒蒸蛤蜊」食譜後,想要繼續看的種類是:

  • 找情境?

    🍶居酒屋或🍻熱炒店料理的食譜?

  • 還是

  • 找類似的料理?

    更多「酒蒸蛤蜊」食譜?

實驗結果

+100% ~ 200%

看到「類似食譜」的點擊數比起「情境」增加了 100% 至 200%。

5分鐘酒蒸蛤蜊食譜

深入瞭解

如果是很多人都這樣做的步驟和食材,就有信心順利完成。因此,不同作者撰寫的相似食譜會讓人繼續點擊。

影響

由資料工程師把此實驗結果,根據標題與步驟內容,製作成演算法。

學到的事情

必備的、可選擇的內容與型別

記載良好的 UI 元件,會標示以下資料狀態:

  • 必備的,還是可選擇的
  • 是「文字」、「數字」或「是/否」…等

版本標籤的規則

軟體開發的「語意化版本」是開發者之間的溝通橋樑。很輕鬆知道為什麼要更新,還有得小心處理的狀況。