Dario Codipietro

Case study · 2023 · Lead Product Designer

Samsung Food: Ingredient Substitutions

As Lead Product Designer at Samsung Food, I designed ingredient substitutions, the most requested feature in the Premium research, for Basic, Beta and Premium users at once.

Role
Lead Product Designer
Team
PM, engineering, research, content design
Shape
Six iterations, two test rounds, one release
The released swap across five screens: the recipe page, the item sheet, the replacement list, the substitution caveat and the Recipe Builder with the swapped ingredient.

Context

Users could save, plan and shop a recipe but had no way to edit its ingredients. Of the recipe edits logged in Amplitude in November 2022, 30% changed an ingredient.

In the Premium survey one user wrote: “My husband is sensitive to alliums and I need a low sodium diet. It’s hard to figure out if I can modify a recipe or not.” The brief was to suggest substitutes by diet and preference, for Basic and Premium users, before the Premium v1 date.

Mapping the brief

I took the workstream from Iteration 4, in April 2023, after three iterations and a first user test in December 2022. From there I designed the swap as one journey, from the ingredient row to a saved copy.

User Test v1, December 2022. 95% of testers worked out how to swap an ingredient, and the team recommended going ahead with the implementation.

Open in Figma ↗ Get password →

01Round one

Swapping from the recipe page

Each iteration is one Figma page, reviewed with the PM and engineering, and the next iteration builds on the outcome. Tapping anywhere on an ingredient row opens the item sheet, and after the swap the recipe opens in the Recipe Builder to save as the user’s own copy.

Round one, Iteration 4. The swap as first drawn in April 2023, with dialogs asking whether to save the edit and update the meal plan.

Open in Figma ↗ Get password →

Concept tests

I run user research to inform a direction or to validate a solution.

InformWhere the team disagrees or is undecided on direction, research gives it findings to decide on.

ValidateOnce direction is agreed, research checks that the solution holds up with users.

The concept tests, run to inform the direction, showed that users expected a list of alternatives to be free, and vegan testers asked for options outside their diet to be removed.

Splitting the feature across Basic and Premium

We kept the swap in Basic and made the diet filter the Premium layer.

For Premium, the list leads with the matches for the user’s diet and keeps the rest behind a count that expands, since removing them outright took control away from users.

Iteration 9, replacement settings. The Premium setting, on by default, beside the swap list with it on and off.

Open in Figma ↗ Get password →

02Round two

Edge cases and one save path

A replacement can be two items, chia seeds and water for an egg, and one line with both quantities held the longest names without the text jumping. When an ingredient has no replacement, the list falls back to search and logs the gap for the food graph team.

The recipe page has no save state, and a lighter edit screen meant a second editor to build. Engineering review moved every edit into the Recipe Builder, and the swap sheet went into the Builder as well, so several ingredients can be swapped before one save.

Iteration 9, swap list states. The filtered and full lists, the empty state for an ingredient that cannot be replaced, and a two-item replacement on one line.

Open in Figma ↗ Get password →

Iteration 9, save recipe. The review prompt, the save dialogs for a first edit and for an existing copy, and the original recipe linking to the edit.

Open in Figma ↗ Get password →

Usability and comprehension

Growth had retired tooltips, and design review wanted rows that read as tappable without help text. Testers found the tap in all three variants I ran on Maze in May 2023, so the lightest went forward, with a Braze slide-up at launch.

Iteration 6, variants for testing. Three ways into the swap, prepared for the Maze test in May 2023, below the options for showing a two-item replacement.

Open in Figma ↗Play the prototype ↗ Get password →

03Handoff

Handing over the swap

I handed over Iteration 9 with the released journeys and their states, and the Premium layer went behind feature flags so the swap could reach every user first.

Iteration 9, basic replacement. The released flow, with the caveat that a substitute can change the taste, texture and appearance of the dish.

Open in Figma ↗Play the prototype ↗ Get password →

What was cut, and what was released

Explored

  • Help text and a one-time tip on each row
  • A subtle swap icon on every row
  • A lighter edit screen on the recipe page
  • Removing options outside the user’s diet

Released

  • A swap on every ingredient row
  • Replacement lists, two-item replacements included
  • Search when nothing matches, with the gap logged
  • One save path through the Recipe Builder
  • The diet-first list and setting for Premium
  • A Braze slide-up at launch

Each cut came from a test result or an engineering review.

Outcome

The swap reached every user in release 4.78 on 26 June 2023, and the Premium layer went live after it, behind its flags. Most swaps adapted a recipe to a diet.

The technical limits of the time meant months of work for a single-ingredient swap. Today I would build substitutions and whole-recipe conversion on generative AI from the start. That became the focus of the next workstream, Recipe AI.

Get the Figma password

Enter your work email to get the password.

Contact

Get in touch

Product design lead across research, design systems and handover, with coding agents in the loop. Contract, outside IR35, or a permanent lead role.

Available
Now
Location
London, remote or hybrid, UK and EU
Right to work
UK settled status, EU citizen
  • RolesLead Product Designer, Principal Product Designer, Design Engineer
  • Experience10+ years
  • ScopeResearch, design systems, prototyping, handover, QA with agents
  • LanguagesEnglish, Italian, Spanish
  • Email[email protected]
  • LinkedInlinkedin.com/in/dariocodipietro

Professional profile

Copy into your coding agent

Skills

  • Product design, end to end
  • UX and interaction design
  • Visual design and motion
  • Prototyping in Figma and code
  • Design systems at scale
  • User research and testing
  • A/B testing and analytics
  • Strategy and discovery
  • AI product design
  • Design to code, with agents
  • Accessibility, WCAG 2.2 AA
  • Leadership and mentoring

Platforms

iOS, Android, responsive web, smart TV and connected devices

Sectors

  • AI products
  • B2B SaaS
  • Consumer apps
  • Streaming, media and sport
  • Health, wellness and food
  • Legal tech
  • Telecoms and utilities

Tools

  • Figma
  • FigJam
  • Figma Make
  • Claude Design
  • Framer
  • Axure RP
  • Storybook
  • Claude Code
  • Cursor
  • Codex
  • MCP
  • GitHub
  • Linear
  • Jira
  • Confluence
  • Notion
  • Miro
  • Prolific
  • Lyssna
  • Maze
  • PostHog
  • Amplitude

Send a message

Tell me about the role and when it starts, and I will reply by email.