Apple Developer Academy · 2025 Figma · design only

Recipe App

Cook with what you already have.

My first UI/UX exercise, in my first weeks at the Apple Developer Academy. No code: the brief was to learn the process — desk research, wireframes, Apple’s Human Interface Guidelines, then a clickable prototype. These are the screens that came out of it.

My Ingredients: a pantry list grouped into fruits, meat and fish

The recipes home screen: cuisine filters and rows of recipe cards

A recipe screen for Mayo Meatball with its ingredient list and a Let’s Cook button

My role: Design — research to prototype
Context: Apple Developer Academy, early 2025
Tool: Figma
Status: Prototype only — never built

01The idea

Not “what should I cook?” but “what can I cook right now?”

Desk research kept landing on the same small frustration: people don’t lack recipes, they lack the ingredients those recipes assume. So the app keeps a pantry, and every recipe shows how much of it you already own.

My ingredients

Tick what’s in your kitchen. The list on the right reorders itself.

What you could cook

02The screens

Nine screens, drawn in Figma.

Finding something to cook

A home screen you can scan: cuisines along the top, then rows you’d actually browse.

Recipes home: cuisine chips for Indonesian, American, Japanese and Afghanistan, then rows for popular, cheap ingredients and previous cookings — Cuisines across the top, then rows for popular, cheap-to-make, and what you’ve cooked before.

The recipes list filtered by an Indonesian chip that can be removed — One cuisine at a time, as a filter chip you can drop.

The popular recipes grid, each card showing a price and an owned-ingredients ratio — Every card carries its price and how many of its ingredients you already have.

The pantry, and a search that respects it

The part the research pointed at: what you own decides what you see.

My Ingredients: checkboxes grouped into fruits, meat and fish, with an A to Z index down the side — The pantry, by category, with an A–Z index down the side.

Search with ingredient chips for fish, cheese and mayo, and filters for ingredients owned: any, all or partially — Search by ingredient, then filter by what you own: any, all, or partially.

The liked recipes grid — Liked recipes, kept for later.

Then actually cooking

One step per screen, so nothing is lost in a wall of instructions.

The Mayo Meatball recipe with its price, description, fully-owned ingredient list and a Let’s Cook button — Cost, description, and the ingredient list marked as fully owned.

Cooking step one: peel potatoes, with numbered instructions and a step pager — Cooking is one step per screen, starting with the boring part.

Cooking step four: serve and enjoy, with the finished dish — …and ending with the good part.

03What it taught me

A first pass at a process.

It was never built, and it wasn’t meant to be. It’s where I learned the order of operations I’ve used on every screen since.

Research before pixels

Desk research on how people decide what to cook came first. The pantry idea came out of it, not out of a nice layout.

Wireframes, then hi-fi

Grey boxes until the flow held up, and only then type, colour and food photography — followed by a clickable prototype.

Apple’s HIG

Tab bars, list styles, type sizes and touch targets taken from the Human Interface Guidelines, so it would feel like an iPhone app rather than a poster.