Prep.ly
Designing a Reliable AI Meal-Planning Experience
B2C
Product Design
Role
Product Designer
Timeline
1 week
team
platform
Web/ tablet/ mobile
Context
Prep.ly is an AI meal-planning product built around three connected surfaces:
Plan → Cook → Pantry
The core proposition is that users make a weekly plan once, and the rest of the experience — cooking suggestions and pantry tracking — follows from that decision.
The most distinctive interaction was Plan Focus, a 2D drag-based control combining budget, ingredients available, time and effort into one interaction.
Problem
The challenge was not to redesign the entire application.
It was to determine whether the product's most distinctive interaction actually worked under scrutiny — and identify usability problems that could later become support tickets, abandonment or "why did it do that?" moments.
Three primary problems emerged:
Users couldn't understand what the different areas of the Plan Focus grid represented.
The interaction relied entirely on mouse/touch dragging.
Presets and the main control represented overlapping functionality through separate UI patterns.
Two surrounding workflow problems also surfaced:
Changing the timeline could silently regenerate the user's plan.
Duplicate meal types could be created without warning.
My role
My role: Product Designer
I owned: UX audit, interaction analysis, accessibility review, workflow redesign and interaction specifications.
Collaborated with: The portfolio does not document a project team for this concept.
Research & insights
I conducted a self-directed UX audit across the Plan → Cook → Pantry journey and specifically stress-tested Plan Focus.
The key evidence:
Finding 01 Ambiguous interaction space
Only the axis ends were labelled, leaving intermediate areas open to interpretation.
Finding 02 No alternative input method
The control had no keyboard interaction, visible focus state or incremental adjustment mechanism.
Finding 03 Duplicate interaction models
Presets and the dial both changed the same setting but behaved like separate features.
Finding 04 Destructive timeline change
Changing the timeline could regenerate an existing plan without an explicit confirmation or undo.
Finding 05 Duplicate meal types
Adding a custom meal type could create a second "Snack" row without warning.
Product opportunity
The opportunity was to make the AI/planning experience more understandable, accessible and reversible.
Rather than removing the distinctive interaction because it was complex, I redesigned it so the system communicated:
What does this setting mean? → What will happen? → Can I change my mind?
Design principles
1. Make invisible system logic visible.
2. Never make a high-impact action irreversible without warning.
3. One concept should have one understandable interaction model.
4. Accessibility should be built into the interaction, not added later.
5. AI-assisted experiences need to explain consequential changes.
Key decisions
Decision: Label every region of Plan Focus
Alternative: Keep the minimalist unlabeled grid.
Why: Visual simplicity isn't useful when users cannot predict the outcome of an interaction.
Decision: Make the control keyboard-operable
Alternative: Keep drag-only interaction.
Why: A distinctive interaction shouldn't become an accessibility barrier.
Decision: Integrate presets into the grid
Alternative: Keep a separate preset list.
Why: Presets are shortcuts to states within the same interaction model.
Decision: Add a regeneration confirmation
Alternative: Continue using a toast after regeneration.
Why: A toast communicates what already happened; a confirmation helps users understand a consequential action before it happens.
Decision: Prevent duplicate meal types
Alternative: Allow duplicates and resolve later.
Why: The system already knows the conflict and should prevent avoidable ambiguity at input time.
System/architecture
The redesign establishes a clearer relationship between:
User input → Plan configuration → Generated plan → Cook/Pantry consequences
The interaction model now makes the relationship between a setting and its resulting plan more explicit.
The timeline flow additionally introduces:
Change → Preview → Confirm → Regenerate
rather than:
Change → Regenerate → Toast
Final experience
The redesigned experience includes:
Persistent labels and outcome descriptions across Plan Focus
Keyboard-operable control
Visible focus state
Integrated presets
Reversible timeline changes
Explicit regeneration confirmation
Duplicate meal-type detection
Merge behavior for near-duplicate meal types
Validation
Drop-off at Plan Focus
Reverts after timeline changes
Keyboard vs pointer interaction
Duplicate meal-type attempts prevented before save
Impact
The immediate design impact was the identification and resolution of five high-risk interaction problems before user testing.
What I learned
The interaction I was most proud of initially was the one that needed the most scrutiny. A visually distinctive interaction isn't successful until users can understand, control and recover from it.
