JC Zabel: Senior product designer, building in the AI age

Overview

We have three young kids who are picky eaters, and a standing goal of not serving chicken nuggets every night. So every Sunday morning my wife and I sit down and plan the week: what the family is eating, all seven days.

That part is fine. It is the next part that is miserable. You take those seven recipes, cross-reference every ingredient, consolidate the duplicates, remember you are already out of garlic, and then retype the entire thing into a store app that was not designed by anyone who enjoys using it. It is an hour of pure translation, every single week, forever.

So MealMapper follows one straight line and removes the friction at every step:

plan the week → auto-build the grocery list → order it, without retyping a thing.

Planning only works if we are both looking at the same week, so it is built around a household rather than a user. Both of us edit the same plan and the same list from our own phones and see each other's changes live.

There are two versions of this app in these shots. The first got the loop working. The second is what came back after other people used it.

What it does

The week is the home screen. Tap a day and pick from your meal library, filtered by how it cooks (Quick Prep, Slow Cooker, Rice Cooker), or hit Surprise Me. Paste a recipe URL and MealMapper pulls in the photo, ingredients, steps, and times. From the planned week it builds one grocery list, merging duplicate ingredients and sorting them in the order you walk a store. Then it matches each item to a real Kroger product with live prices and sends the whole cart over in one pass, or hands the list to Instacart.

The week view with a meal planned for each day, tagged by cook style and prep time.

The grocery list, consolidated from the week's meals and sorted by store section.

Version one's product matcher: light theme, with availability shown as four differently colored tags. — The same item in both, matched against the same shelf. Version one gave every availability state its own color, so four hues competed on a screen whose entire job is comparing prices. Version two spends color once, on the price.

Version two's product matcher: dark theme, with availability filters on a single accent and the price carrying the emphasis. — The same item in both, matched against the same shelf. Version one gave every availability state its own color, so four hues competed on a screen whose entire job is comparing prices. Version two spends color once, on the price.

Where it stalled

The store integration is the whole product, and only one store cooperated. Getting the Kroger connection working was the moment the thing felt real. Then I went looking for the next store and found that most of them have no usable public API at all. Instacart has effectively cornered that ground. We order from Harris Teeter, whose own app is unfriendly enough to have started this in the first place, so I knew exactly what limited reach would mean.

Then life did what life does. Work hit a busy patch, three young kids plus a demanding job does not leave much for a fifth project, and an afternoon looking at how crowded meal planning is on the App Store did not help. So it sat for six months.

What handing it to other people changed

What got me back into it was putting the app in front of friends and family and watching what happened. Version one had been reviewed by exactly two people who already knew how it worked. Everything I had built was legible to me, so none of it looked broken to me.

The list that came back was not about meal planning at all. People got stuck at the door: password reset was reachable but not actually completable, and there was no Google sign-in, so the first thing the app asked of a new person was to invent another password. The tab bar icons were decoration rather than signage. And nobody arriving at an empty week had any idea what to do with it.

Underneath that was a structural one. I had organized meals into collections: folder cards you tapped into, like a file system. Everyone I watched used them once, during setup, and then never opened them again. Nobody wants a second job filing their dinners.

Version one's meal library: collections rendered as folder cards you drill into. — Folders you maintain became tags you apply, and shelves like On Heavy Rotation build themselves once a household has cooked enough to rank. A migration turned every old collection into tags, so nobody lost their filing.

Version two's meal library: search, a tag chip row, and a grid of meal cards with favorite stars. — Folders you maintain became tags you apply, and shelves like On Heavy Rotation build themselves once a household has cooked enough to rank. A migration turned every old collection into tags, so nobody lost their filing.

The second pass

Version two fixed what testing surfaced and rebuilt the look. The design system, Deep Teal & Mango, defaults to dark with hard outlines and offset shadows, and runs a light theme off the same tokens. Google sign-in, a password reset that actually completes, a monochrome icon set in place of the emoji, and a four-slide tour on first run that shows the loop before handing anyone an empty week.

Then there is the class of thing only real use finds. Recipe steps could only be appended, so fixing one typed out of order meant retyping every row after the mistake. They drag to reorder now. And in the Kroger matcher, the last unmatched item could not be skipped: press Skip and the same item came back forever. Every one of those is invisible in a demo and infuriating on a Sunday.

Version one's week view: light cards with system-default styling. — Same information, restated. Outlined panels, a real type scale, and today carrying the accent instead of every card competing for it.

Version two's week view: outlined panels on a dark teal canvas with mango accents. — Same information, restated. Outlined panels, a real type scale, and today carrying the accent instead of every card competing for it.

Everyone who eats here

The shared account started as two logins on one plan. It got more useful once I started treating the household as a list of people. A member is anyone who eats at the table, which is not the same as anyone who can sign in. Our four-year-old is a member. She is never getting a password. So members carry an age range and dietary notes, and separately an optional login.

That made the obvious next feature possible. Any member can react to a meal: 😋 liked, 😐 fine, 🙅 nope. Every row is tappable, not just yours, because somebody has to record the toddler's opinion, and tapping an active reaction clears it, because the phone is getting passed around a dinner table. When every current member likes a meal, it joins the Clean Plate Club. That is recomputed from the current member list every time, so adding a kid re-derives the club instead of leaving a stale trophy on a meal half the house dislikes.

The Verdict panel: one row per household member, each with liked, fine, and nope reactions.

A meal in the library carrying the Clean Plate Club badge and a green ring.

I designed and built all of it, from the Supabase schema and the edge functions that talk to Kroger through to the Expo app that ships to iOS, Android, and the web.