Sample data, working flows
No engineering team or live data. Every core flow runs on 33 sample recipes.
Turning recipe overload into dinner you can cook tonight
Role: Sole UX Researcher, UX/UI DesignerTimeframe: 5 weeks + prototypeStatus: Interactive prototype
I designed a recipe app with a feed that filters out a cook's allergens and an assistant that plans dinner from what's already in the fridge.
- Problem
- Recipe apps overload people with search and choice when what they want is an answer about what to cook.
- Approach
- Designed and tested the core screens in Figma, then rebuilt them as a working prototype and kept revising the design through use.
- Result
- A working prototype you can use on this page, with Sage, an assistant that plans dinner from what's in your fridge.
- 5User interviews
- 3Competitors analyzed
- 5Usability testing participants
- 30Prototype versions
The prototype runs on sample data. Sage's answers and the Instacart hand-off are simulated.
Cooks Wanted an Answer and Got a Search Box
FlavorSync is a cooking app concept that pairs recipe discovery with a community of cooks. Recipe sites bury the recipe under ads, and social platforms favor entertainment over usability, so FlavorSync leads with a clean, recipe-first feed.
How might we design a cooking app that blends feed-based discovery with a cooking community in a way that feels calm and welcoming?
The answer started as a recipe-first For You feed with spaces for groups and events. The working prototype added Sage, an assistant that starts from what's in your fridge.
Working Constraints
A crowded category
AllRecipes and Tasty already own recipe discovery, so FlavorSync had to earn its place.
Five cooks
Five interviews and five testers: enough to point a direction without proving one.
Five weeks, then a rebuild
Five weeks alone from research to hi-fi design. The working prototype came after.
The Recipe Was Buried Under Everything Else
How I WorkedI used ChatGPT as a thinking partner for a first competitive framework, patterns across my interview notes, early persona drafts and naming, which is where FlavorSync came from. I checked every claim against the apps and my notes, and every decision on this page is mine.
Current Pain Points in Recipe Discovery
Recipe sites bury instructions under ads and long stories, which makes them hard to follow mid-cook, and many users don't find embedded videos helpful. (Karbor, 2024; Foodblog Usability, 2020)
Research Goals
- How users explore recipes in feed-based environments
- Why ad-heavy recipe sites feel frustrating during cooking
- How community interaction builds trust in shared recipes
- What makes users feel comfortable participating socially
Competitive Analysis
I compared AllRecipes, Yummly and Tasty on how people found and judged recipes.
Each covers part of cooking, but none pairs a recipe-first feed with a place for cooks to ask questions. That gap became FlavorSync's focus. The AI support row later grew into Sage.
Cooks Needed Recipes That Respect Their Time
User Interviews
I interviewed five home cooks in person about where digital recipes let them down while cooking.
- Frustration with ad-heavy recipe pages
- Three participants described scrolling past ads and pop-ups just to reach the recipe, which broke their focus.
- Difficulty accessing critical information quickly
- Long introductions and cluttered layouts slowed them down mid-cook, when timing matters most.
- Strong emphasis on nutrition visibility
- Calories and macros at a glance decided whether they'd cook a recipe. When nutrition was hidden, they hesitated.
- Lack of ingredient measurements within steps
- Separate ingredient lists meant scrolling back and forth. They wanted measurements inside each step.
Interview Results
Cooks want recipes that respect their time. Social platforms inspire them, but saved recipes are hard to revisit and there's nowhere to ask questions. FlavorSync's community is built for that gap.
Primary Persona
The most consistent needs came from time-pressed cooks worn down by ad-heavy pages and buried nutrition. Jordan Miller became the persona every feature answers to.
Determining the User Flow
The information architecture centers on the For You feed, so people get from opening the app to a recipe in as few steps as possible. Sage and every tab branch from there, and the map shows the flow as it ended up in the final build.
Testers Confirmed the Macros Belonged on the Card
Five cooks tested the Figma prototype in person.
What Worked
Macros at a glance
Made recipes easy to judge from the card.
Ingredient count
Showed the effort before opening a recipe.
Search by ingredient
Cut waste by starting from what's on hand.
Visible events
Made the community feel active.
What Broke Down
Feed control
They wanted to choose what the feed shows.
Diet at sign-up
They wanted allergies and macro goals asked up front.
What Changed Because of It
- Feed control: allergies now filter the feed.
- Ingredient search: became Sage's opening question.
- Diet at sign-up: the next thing I'd build.
From Figma to the Final Build
The first version lived in Figma, and it's the one five cooks tested. Its logo turns sync arrows into a face with a slurping tongue. Bold red marked moments like saving and posting, while warm orange and off-white kept the food photos in front.
The Hardest Call: How Much Goes on the Card
The feed card had to carry enough for someone to decide whether to cook a recipe, without turning the feed into a wall of text.
Option A
A minimal card
Gains: fast to scan in a feed.
Costs: not enough to decide whether to cook it.
Option B
Everything on the card
Gains: the whole decision without a tap.
Costs: the feed turns into a wall of text.
What I chose
Only what the decision needs: the photo carousel, who posted it, the comment count, macros on the thumbnail because interviewees said macros drove their choice, and a short description. Everything else is one tap away.
The working prototype pushed this further: the card's Notes and Ask buttons moved off it too.
Features the Interviews Asked For
Because
One participant tracks changes for family members with different preferences.
01
Notes on every recipe
So
Every recipe has a notes field for modifications.
Because
Interviewees kept scrolling between the ingredient list and the steps, and one wanted to check ingredients off as she cooked.
02
Ingredients inside each step
So
Ingredients are scoped to the step that uses them, with measurements inline.
Because
One participant scales recipes depending on how many she's cooking for.
03
Scaling beside the list
So
1x, 2x and 3x sit next to the ingredient list, with a US/metric toggle.
After testing, I kept designing in a working build. Using it like a cook showed what the frames couldn't, and each round of changes set up the next.
Built with Claude from my Figma frames and a written spec. I made every design call across 30 published versions.
AI assistant
Scattered Ask buttons became one assistant
Cooking questions span the whole kitchen, so one assistant replaced the buttons. It started as Sync, an open-ended chat. Sage now starts from what's in your fridge and answers with recipes.
Figma First build Final
Pantry
I added a pantry, then cut it
Figma had no pantry, so the first build added one. Managing it was too much friction and guesswork, so now you check off what you have on each recipe and Instacart gets the rest.
- No pantry in Figma
Figma First build Final
Recipe page
Planning and shopping joined the recipe page
Figma's recipe page stopped at reading. My first build added a grocery list and meal plan but buried them four screens down, so they became tiles under the title.
Figma First build Final
For You feed
Allergies now filter the feed
My first build tagged matching recipes and hid nothing. Now the feed hides what you can't eat and says how many it hid.
Figma First build Final
Community
A directory became a conversation
A directory gets browsed once. Community now opens on posts from your groups, so there's always something new to read.
Figma First build Final
Discover
Discover starts from the moment
Dinner starts from a situation, like a late night or a tight budget, so Discover now leads with those, DoorDash-style.
Figma Final
Upload
Every step carries its own ingredients
Interviewees wanted ingredients inside each step. The Figma form couldn't capture that, so now each step picks its own.
Figma Final
Color
Red stepped back
Red covered the Figma screens, from titles to icons, and that much of it read as a warning. It now stays on the tab bar and key actions, and warm amber handles highlights.
Figma Final
Live prototype
Try it yourself
Everything above works here. Start with Sage in the top right, or open any recipe.
What I Would Measure If It Shipped
The core question: does the feed get people cooking?
North star: recipes cooked per active user per week, logged by the prototype’s “I cooked this” tile.
Leading indicators:
- Save rate per session
- Time to first save
- Week-1 and week-4 return rate
- Sage conversations that end in a saved or planned recipe
What a win looks like: most new users save a recipe in their first session, and a meaningful share come back the next week to cook something new.
Reflection
What the work taught me, and what I would do differently with the next one.
One interview theme carried the whole product
Macros came up often enough to become the clearest instruction in the research. Putting them on the card became the core of the concept, and testers named it as what worked.
Building it exposed what the frames hid
A working version showed what each screen had to do and surfaced problems no static frame could. Next time I'd build the riskiest flow first.
Personalization belonged in onboarding from the start
Testers wanted control over their feed and diet. The prototype filters by allergies now, but those settings belong in sign-up, where they'd shape the very first feed.
The feed has to be measurable before it's smart
A personalized feed only helps if I can tell it's improving. Before another visual pass, I'd define the events behind saves, skips, dislikes and cooked recipes.
I'd judge this app by how often people close it and start cooking.
Thank you for viewing my work.
Shown below are a few of my other projects.
