Optimizing Recipes Recommendation by A/B Tests

  • RoleUI Design, Web Front-End
  • Team Members2 Product Designers and 1 Data Engineer
  • Time Span2 - 4 Weeks
Switch Language中文

Intro

iCook is the largest recipe community in Taiwan. At iCook, everyone’s questions to the product had the chance to challenge current designs or content by A/B tests. It results from working closely with front-end and back-end developers to redesign UI components.

The Technical Problem

iCook started as a desktop-only website and hit product-market fit around 2010. There were a lot of workarounds to be mobile-friendly, and updating a piece of the interfaces had the chance to break something. The product and marketing team often proposed UI experiments as the concept of design systems went popular. However, the difficulties of replacing some parts of the webpages limited the ideas.

What I Have Prepared for Building UI Components

Knowing developers’ workflows and tools was essential for untying the workarounds.

Web Development

Organized naming convention in CSS enabled the appearance of UI components to be independent. Updating the names which JavaScript used was also a must.

Git & GitHub

I accessed the codebase and used Git workflows in GitHub like the developers.

A/B Testing Recipes Recommendation

We designed “Recipes Recommendation” to assume the content that visitors wanted to read more about the recipe. I put different data sets into the UI component I have built, and we could start an A/B test.

The Problem

Bounce Rate Icon

Most of the visitors from search engines reached only 1 recipe in iCook and left.

Question

How Might We Recommend the Recipes which the Visitors Want to Read Further?

Current Strategy

iCook picked 3 recipes from the same context or category for every recipe. For example, the dishes for late-night supper or seafood.

Test Groups

Recipe: Wine-boiled Clams within 5 Minutes

What kind of recipes did the visitors reaching “Wine-boiled Clams within 5 Minutes” want to browse next?

  • Same Context

    The recipes of the dishes from 🍶izakayas or 🍻stir-fries restaurants

  • or

  • Similar Dishes

    More recipes for “Wine-boiled clams.”

The Outcome

+100% ~ 200%

The total clicks for the same dish are up to 3 times as many as those with the same context.

Recipe: Wine-boiled Clams within 5 Minutes

Digging Into it

If it was the steps and ingredients that many people did, they were confident completing it. Therefore, the same dish by different authors triggered them to click.

Impact

The data engineer developed an algorithm based on recipe names and instructions.

What I Have Learned

Required and Optional Data, and Their Types

Well-documented UI components indicate the following data situations:

  • Required or optional
  • Text, number, or true/false, etc.

The Rules of Release Tags

Semantic Versioning” in software development is the communication bridge among developers. It is easy to know why the update existed and what to be careful of.