Year:
2025
Bing answer
Recipe
Project overview
Recreate recipe answer with a sophisticated magazine-style layout sits directly beneath the top two rows of the thumbnail carousel. This high-density card beautifully aggregates rich media, step-by-step instructions, ingredient checklists, and nutritional breakdowns into a cohesive, scannable interface.
Before we start
We conducted a UX research study with 200 qualified participants to identify the specific details users prioritize when searching for recipes on search engines. Beyond the most fundamental information, the top five features respondents cared about most include:
-
Main Image of Recipe: 106 / 200 (53%)
-
Step-by-Step Directions: 104 / 200 (52%)
-
Nutrition Facts (calories, macros, etc.): 96 / 200 (48%)
-
User Ratings (star ratings and review count): 90 / 200 (45%)
-
Step-by-Step Images: 83 / 200 (41.5%)
UXR result
Currently, our UI displays dish information in a dark-mode modal pop-up. Essential nutritional facts are tucked away inside a secondary tab, while step-by-step instructions are relegated to small, low-contrast text at the bottom. As shown below:
Old recipe page - a dark mode dialog
Magazine Layout & User test
With a clear understanding of user priorities, we plan to replace the current L2 detail page with a magazine-style experience. The page will feature five core components:
-
Hero Section: High-impact visual, clear title, and prominent quick actions
-
AI Summary Module: A compact, collapsible summary outlining key ingredients and core steps.
-
Modular Recipe Cards: Dedicated blocks for ingredients, nutrition facts, substitutions, step-by-step instructions, and video content.
User test for 3 layouts
While user priorities were clear, the optimal hierarchy and content distribution remained uncertain. To determine the ideal flow, we conducted a follow-up test comparing three distinct layouts:
-
Layout A (Minimalist): Visual Media → Ingredients → Instructions
-
Layout B (Standard): Visual Media → Ingredients → Instructions → Nutrition & Substitutions
-
Layout C (Comprehensive): Visual Media → Ingredients → Overview → Instructions → Nutrition & Substitutions
Test result:
The winner of test is Layout C (Comprehensive): Visual Media → Ingredients → Overview → Instructions → Nutrition & Substitutions
Test result, C is the Winner
Visual iterations
Now that we’ve nailed down user priorities and layout structure, it’s time to bring the design to life with rich visual styling and editorial personality.
Overview card with chart
Explorations for Nutritions
Final
