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

簡介

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

遇到技術問題

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

為了製作 UI 元件的準備

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

網頁開發

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

Git 與 GitHub

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

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

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

問題

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

目標

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

原有情況

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

假設

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

• 找情境？

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

• 還是

• 找類似的料理？

  更多「酒蒸蛤蜊」食譜？

實驗結果

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

深入瞭解

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

影響

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