AI-Native Design Process

The Ingredient Substitution Assistant

Using AI as an exploration partner to build an 8-state fallback flow.

Role Product Designer

Focus Agentic UX & Fallbacks

8-screen functional flow showing working, uncertain, wrong, and empty states

Live Interactive Prototype

Test the 8-state substitution flow exactly as the user experiences it. You can tap the unavailable flour row to run the happy path, or use the test chips to jump straight to the low-confidence and failure outcomes.

Open Prototype in Full Screen

1. The Problem

Most of my case studies show a finished screen. This one shows the process instead. A home cook is following a recipe and an ingredient is unavailable. They need a substitute but the system cannot just swap it in silently. It has to protect the recipe's dietary requirements like gluten-free rules and functional requirements like binding.

The main constraint was to never silently modify the recipe. Every AI suggestion has to stay a suggestion until the user confirms it.

2. Architecture Before Screens

Instead of jumping straight to Figma, I prompted an AI agent to help generate three competing interaction architectures.

Option A

Inline Card Replacement

The flagged ingredient expands in place. It has low cognitive load but falls apart if more than one item is missing at a time.

Option B (Chosen)

Bottom Sheet Flow

Tapping the ingredient opens a sheet that moves through loading, options, and confirmation. The recipe stays dimmed underneath.

Option C

Side-by-Side Split View

Great for comparing options but does not fit on a 375px mobile screen without collapsing into something else.

I picked the Bottom Sheet. It fits a mobile-first approach, helps with accessible focus management, and creates a hard separation between an AI suggestion and a permanent recipe change.

3. Designing Every State

I built an 8-screen functional flow instead of one hero screen. The point was to make sure the system had an honest answer for every possible state.

Handling Latency

Abstracting the wait into visible, conversational steps so users don't abandon the flow.

Building Trust

Surfacing the reasoning behind each option with a short rationale tag rather than just a name.

Graceful Fallback

If confidence is low, the UI degrades to a manual search to avoid compliance and health risks.

Recipe View: Calm checklist with an entry point to flag missing items.
Bottom Sheet Loading: Dimmed recipe showing step-by-step progress.
3 Options: Choices with dietary tags, ratios, and a chip explaining the logic.
Confirm Substitution: Explicit outline of what changes and what stays the same.
Low Confidence: Amber state for risky substitutes that defaults to manual search.
Failure State: Empty state when no match is found.

4. Self-Critique & Iteration

Once the prototype existed, I asked the agent to critique its own work. It found five concrete risks. I treat generated prototypes as a first draft to interrogate, not a finished product.

Ambiguity Risk

Confusing Buttons

The "Choose" button did not actually mean choose. I fixed this by renaming the button to set correct expectations without changing the architecture.

Cognitive Load

Judging Health Risks

Asking users to judge AI confidence on health risks is dangerous. We have to hard-gate low-confidence suggestions for allergy tags.

5. What's Next

This is an unfinished loop. The next step is to put this prototype in front of 3 to 5 real home cooks. I want to watch where they hesitate on the loading, option comparison, and low-confidence screens. Then I will feed those exact breaks back to the agent to fix them.