- RoleUI Design, Web Front-End
- Team Members2 Product Designers and 1 Data Engineer
- Time Span2 - 4 Weeks
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.
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.
Most of the visitors from search engines reached only 1 recipe in iCook and left.
How Might We Recommend the Recipes which the Visitors Want to Read Further?
iCook picked 3 recipes from the same context or category for every recipe. For example, the dishes for late-night supper or seafood.
What kind of recipes did the visitors reaching “Wine-boiled Clams within 5 Minutes” want to browse next?
The recipes of the dishes from 🍶izakayas or 🍻stir-fries restaurants
More recipes for “Wine-boiled clams.”
The total clicks for the same dish are up to 3 times as many as those with the same context.
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.
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.