enplace

Nothing skipped, nothing doubled

TRY THE PROTOTYPE

Product Designer

UX Systems & Mobile App Design

Self-directed · Working prototype in react

Lemon zest and poppy seeds on a kitchen counter beside a phone showing a recipe

Problem

A step says add the oil. It doesn't say how much, or if half of it went in two steps ago.

Insight

A recipe isn't two lists. It's things that combine, split, wait, and come back.

Outcome

A working app beta where every ingredient-step connection is tappable in both directions.

I cook a lot. Recipes still get the better of me.

I cook from recipes three or four nights a week, half from cookbooks and half from the NYT Cooking app. I'm also a skimmer and a bit of a frantic cook. That combination means I'll read a step, miss an ingredient buried in it, and find out three steps too late.

So I cook with a finger holding two places at once, going back and forth between the steps and the ingredient list to make sure nothing slips through. When a step says "add the oil, garlic, ginger, salt and pepper," I'm suddenly hunting five separate lines to find out how much of each and how it's prepped.

The worst is an ingredient split across steps. 2 tablespoons of oil, check. Next step: turns out half of that was for a later step. There had to be a better way. Everyone was talking about vibe coding, so I tried it: designed in Figma, then directed the React build with Claude until I had an app I could actually cook with.

Garlic? Crap, when was I supposed to use that? Oops. That was the last step.

My first idea died on a phone screen.

Before I did any design, I wanted to get the logic and interaction right so I knew what I was designing for. The instinct was two windows: ingredients on top, steps on the bottom. Tap anything and its connections light up across the divide. On an iPad it might have worked. On an iPhone half of what lit up was off screen.

So I started designing indicators to point at highlighted items you needed to scroll to. That was the tell: when you're designing to fix the limitations of the layout, it's the layout that needs to change. Quick functional prototypes helped me figure that out early.

The pivot: stop trying to show everything.

The a-ha was giving up on one screen that does it all. Tap a step, get a focus screen with just that step and the ingredients in it, quantities and prep right there. Tap an ingredient and it flips: every step it touches, including the two tablespoons of oil you were about to pour in all at once.

Same connection, both directions, no hunting. Happy with the functionality, I could finally focus on high fidelity design, Figma first, then coded.

Tap a step, see what it needs. Tap an ingredient, see where it goes.

Then Coq au Vin broke everything.

An app like this is useless if you can't get recipes into it. The plan: import anything with standard recipe markup and use AI to map which ingredients each step actually adds.

Feeling confident, I imported the Coq au Vin I'd made the week before. Disaster. Easy connections came through, but ingredients split across steps got lost, and the marinade mixed early, set aside, added back later, vanished entirely. The logic had no concept of a thing the recipe makes.

That flaw became a strength. I worked on the AI import logic to adjust to real language and follow the ingredient in any form it becomes. Now it could understand that the ingredient "wine" became marinade and even add the new ingredient to the step it was used in. It works in reverse too.

Wait, where did the marinade this step is talking about come from? Ah, the wine.

Mid-build, NYT Cooking shipped Cook Mode. I panicked.

Near the end of the project I discovered NYT Cooking had added a Cook Mode that lists ingredients under each step, the exact step I set out to solve. Crouton and Pestle, the two most design-respected indie recipe apps, already show amounts inside steps too. A gut punch. Had I spent all this time building something that already existed?

So I swept the landscape properly instead of taking my early glance on faith. Steps with ingredients listed had been solved. But ingredients? Tap an ingredient, see every step it touches. I couldn't find that anywhere. Nor was split-ingredient tracking, or components that get made and set aside. In one recipe-app community survey, users were describing my exact problem. Requested but never built.

The best find came from professional kitchen software, which models a recipe as connected components, things made, held, and folded back in. Consumer apps model it as two flat lists and, at best, draw lines between them in one direction. Turns out that in trying to solve one small problem, I solved a much deeper one

Users were asking for exactly this. Nobody had built it.

The real usability lab was dinner.

I had mocked every screen in Figma, down to spacing, type scale and touch targets, then carried the system back into the build. I kept the UI minimal but used red as an indicator for connections you could follow. Everything that isn't a connection stays quiet, making the functionality easily discoverable.

Then I cooked. Round after round of actual dinners surfaced what you only catch with wet hands: tap targets you can hit while stirring, error messages that say something useful, where your eye lands mid-step. The navigation, the import language, the empty states all got tuned at the stove. It's in solid beta now.

On the branding.

I went minimal and utilitarian with one flourish. Fraunces Light Italic carries the editorial voice, IBM Plex Sans keeps it business-first, its full-height fractions alone earned it the job in an app full of measurements. I used just one color, a Braun-inspired red. The restraint around the color is what makes it land.

The name is a play on mise en place, everything in its place. In the wordmark, the red "en" ties into "place" with a hand-drawn ligature: two things joined across a boundary, which is the whole app in one stroke.

Nothing skipped. Nothing doubled.

The outcome.

A working beta, cooked through round after round of real dinners. Both directions of the core interaction hold: tap a step to see the ingredients, tap an ingredient to see every step it touches, including the ones split across the recipe. Recipes import from the web, and the component tracking held across half a dozen test recipes, Coq au Vin included.

What I'd do differently.

The testing pool was me, my wife, and a lot of dinners. That's real use, but it's not research, and a feature this unfamiliar needs strangers. The import logic held up across the recipes I threw at it, but the long tail of recipe sites is unproven, and shipping it for real would mean moving the AI work behind a proper backend. The demo above runs the full experience on one recipe, bake the pie. If you want the real app with import, email me.