Product
Shoppable Recipe Widget（iframe）
Role
Product Designer (UX/UI)
Collaboration
PM, Engineering
TimeLine
May–July 2025
My Ownership & Scope
SideChef provides shoppable recipe widgets that brands embed into their own websites via iframe.
These widgets allow users to shop ingredients without leaving the brand page.
I owned the end-to-end design and product strategy for introducing Substitution AI into this embedded environment—from problem definition to measurable business impact.
SideChef 通过 iframe 形式的 Shoppable Recipe Widget，帮助品牌将可购物菜谱嵌入到自有官网页面中，实现不跳转的食材加购体验。我负责 Substitution AI 在嵌入式 Widget 场景下的完整产品与体验设计，从问题定义到业务结果交付。
Research & Data Analysis
Research Focus
Before designing a solution, I analyzed event-level behavioral data across the shopping flow, focusing on:
Add-to-cart events
Checkout completion
Manual swap interactions (ingredient replacements)
The goal was to understand why users with clear purchase intent still failed to complete orders.
Key Finding 1
Intent was high, checkout was low
Users reached add-to-cart but didn’t finish checkout. They used swaps instead of exiting.
Key Finding 2
Swaps showed clear patterns
Most swaps were for diet needs or lower price.
Core Insight
High purchase intent was not converting because adapting recipes to diet and budget needs was too costly to do manually.
Problem Statement
|
Design Goals × Metrics
Turn high purchase intent into completed orders by reducing recipe-level adjustment effort while preserving trust and usability.
Minimize Manual Adjustment Effort
Reduce repetitive, ingredient-by-ingredient swaps required to complete an order.
Adapt the Entire Recipe, Not Just Ingredients
Ensure substitutions update both ingredients and cooking steps to keep recipes coherent and usable.
Address Real User Constraints
Support the most common adjustment needs: dietary restrictions and budget sensitivity.
Preserve Trust Without Disrupting Conversion
Provide AI assistance that is transparent, reviewable, and seamlessly integrated into the existing flow.
Solution & Key Features
Enable users to update all relevant ingredients in one action using Substitution AI, instead of performing repeated manual swaps.
Solution & Key Features
Automatically regenerate corresponding cooking steps after ingredient changes, and add step images to ensure the recipe remains clear and executable.
Results & Impact
Drag the slider to see the before & after.
