recipe app
Sous-Chef
Cook with your hands, not your screen.
The goal was to explore how a recipe app can work when your hands are busy: voice-guided cooking that adapts to what is in your pantry, without asking you to touch the screen.
Timeline
5 days from research to a clickable prototype.
Background
Awesomic briefed an exploration of a food recipes app, covering recipe search with advanced filters and an active cooking flow. The audience is young adults who cook at home and want something faster and more flexible than following a recipe step by step.
The core problem is friction during cooking: dirty hands, a screen that turns off, and a missing ingredient that forces you to stop and search. Sous-Chef Mode addresses this with hands-free voice navigation and ingredient substitution that keeps the recipe going without pauses.
From market research to a working prototype, with accessibility checked against real contrast values along the way.
Research & Planning
Research was AI-assisted, using Gemini and a deep-research pass structured with Claude. Each accessibility claim was then checked against its original source.
Concept & USP
Narrowed the concept to a single mechanism: voice-guided cooking where ingredient substitution happens inside the same spoken flow. Close alternatives exist, so the pitch is framed as a specific gap, not an empty market.
UX Flows & Wireframes
Mapped onboarding and pantry setup, recipe search with advanced filters, and the active cooking flow, including the decision logic behind a spoken substitution. Wireframes fixed the structure before any visual work.
Design System & UI
Built colour, spacing and radius tokens as Figma variables, a Lexend type scale and a component library with variants. High-fidelity screens were assembled from these components: Home, Search Results, Filter Sheet, Recipe Detail and Cook Mode.
Accessibility Audit
Measured contrast on the real colour pairs. White text on the original primary green reached only 2.54:1, so the action colour was darkened to 5.48:1, which passes WCAG AA. Cook Mode uses large, high-contrast step text for reading from a distance.
Functional Prototype
Used Claude Code to translate the Figma tokens and components into a React and Tailwind app, reading the file directly through the Figma MCP. My role was the spec, the review against the designs, and fixes such as the contrast correction.
Sous-Chef is a mobile recipe app designed so you can cook from start to finish without touching the screen, and that adapts the recipe when your pantry does not match it.
Voice-Guided Cooking
Cook Mode reads each step aloud and responds to commands such as "next step", "repeat" and "how much salt". Step text is large and high-contrast, with a sticky timer and a clear mic-active indicator.
Live Substitution
Say "I don't have butter" and the app swaps the ingredient, recalculates quantities, cook time and nutrition, and keeps narrating. There is no confirmation step to interrupt the flow.
Pantry-Aware Search
Onboarding captures what is already in the pantry. Recipe cards show how much of each recipe you already have, and filters cover diet, intolerances and equipment.
Accessible by Design
Colour, spacing and type come from a single token system. Primary actions pass WCAG AA contrast at 5.48:1, and the tap targets follow Material Design's 48dp guideline.
Way of work 💡
What I delivered
Research & USP
A review of existing recipe apps and a USP framed against the closest alternatives, not as an empty market.
UX Flows & Wireframes
Flows for onboarding, search with filters and active cooking, with wireframes that fixed the structure before visual work.
UI Design
High-fidelity screens for Home, Search Results, Filter Sheet, Recipe Detail and Cook Mode, in one consistent visual language.
Voice Interaction
The decision flow behind spoken substitution: what the app hears, what it swaps and recalculates, and how narration keeps going.