// Overview · Case study 02
CookLoop
CookLoop is a grocery app built around one idea. A week has three jobs, shopping, cooking and tracking what you ate, and they belong in one loop.
02 · At a glance
Eight weeks, six names, four prototypes. It started as a budgeting app called BudgetBite and ended as a weekly loop.
// Discover · 03 to 07
Discover
Tools
- Claude
- Obsidian
- Mobbin
- Figma
Claude
Obsidian
Mobbin
Figma03 · Two phones at checkout
It started in a grocery aisle. My wife and I had two phones out, one holding the list and one running a calculator. BudgetBite v1 was my first try at replacing both.
04 · BudgetBite v1 did everything
v1 had forty-two screens: budgets, lists, recipes, pantry, household and analytics. It could do a lot and said all of it at once. So I started again from the aisle, and everything else had to earn its way back in.
05 · Four apps, one gap
The apps people already use each own one stage. Cal AI, MyFitnessPal and MacroFactor track what you eat. ReciMe saves recipes. None of them connects what you bought to what you cooked and ate, and that gap became the product.
06 · Six names
BudgetBite and Frugl were both taken on the first day. Around 400 candidates later, the app went from CookCycle to AisleCycle and back, then settled on CookLoop. The name kept failing because I hadn't decided what the app was for yet.
07 · The survey
I built a nine-question survey and published it, but it never got a single response. Instead of inventing users, I leaned on published numbers: about 40% of shoppers want to see their spend while they shop, and most people quit calorie apps within a month.
// Define · 08 to 08
Define
Tools
- Claude
- Obsidian
- Linear
- Figma
Linear08 · The moment before checkout
I narrowed the product to one moment, right before an item stays in the cart. Every item has to answer three questions there: what the trip costs, what's left of the month, and what it adds to the week.
// Develop · 09 to 31
Develop
Tools
- Figma
- Claude
- Mobbin
- Obsidian
- Linear
09 · Every screen, explored
Every MVP screen got three to five low-fi takes, 38 wireframes in all. The one outlined in green is the take that went into the first prototype.
10 · Home and Cart, five ways each
The two most important screens got the most attention. I kept the budget hero for Home because BudgetBite users already knew it. The cart went decluttered, so fewer actions compete while you're shopping.
11 · Ten colourways
I tested ten colourways on the same screen, so only the colour could win or lose. Harvest Modern won because it split green into two jobs: one shade for buttons, one for data.
12 · Ten styles
Then ten visual styles on that colour. Elevated won: white cards separated by shadow instead of borders.
13 · Prototype v1 to v2
The same ten screens, before and after the design system landed. Colour, style and type arrived together, and the app stopped looking like a wireframe.
14 · Nutrition and recipes come back
I had cut nutrition and recipes to protect scope. But without them the app couldn't answer the question in its own name. After four rounds of exploration I brought both back. Calorie apps guess what you ate. This one already knows what you bought.
15 · Five tabs, then a loop
Five tabs listed features, but none of them said what the features were for. So I made the week the home screen. Shop, Cook and Track became stages of one loop.
16 · The loop moved four times
Before the loop took over Home, it lived as a card, then in the screen header, then in a status line. Each version lost for the same reason: the loop is the product, so it belongs at the top of the first screen.
17 · The ring and goals
The ring fills toward goals you set: trips for Shop, meals cooked for Cook, days logged for Track. A goal you chose isn't an invented one.
18 · Shop, rebuilt
Shop now leads with the month, keeps the cart one tap away, and ends every trip on what it cost. There used to be a chooser screen between pressing Start trip and actually shopping. I deleted it.
19 · Two budgets, one promise
The month is the ceiling, and a trip is a slice carved out of it. The worst bug the usability audit found was checkout resetting the month back to full. That was the one thing the app couldn't afford to do. Now the month keeps counting.
20 · Cook, rebuilt
The recipe library was rebuilt five times in one day. Each version made one layout do two jobs. The fix was to split them: cards help you choose, rows help you find.
21 · Save a recipe from a video
Saving a recipe from a video is the core of Cook. It can come from a link, a photo, or be typed by hand. If the app can't read the contents, it still saves where the recipe came from. A failed parse is not a failed share.
22 · Track, and where nutrition went
In v3, nutrition had two views, Eaten and Bought, but only one of them was a meal. A trip's total is a pantry restock, so nutrition left Shop and now lives in Track, one meal at a time.
23 · The app never guesses
It's used inside supermarkets, so everything is stored on the phone. Its only network call is a barcode lookup that gives up after four seconds. AI never supplies a price, and the app never judges your shopping. It says "Day 17 of 30", never "on track".
24 · Two greens, two jobs
Chrome green carries white text at 4.98:1 and fills every button. Data green only draws arcs and progress.
25 · A new typeface, mid-build
Sora set every screen until September 16. Then I measured the numbers: Sora's digits vary 32.3% in width, Schibsted Grotesk's 26.8%. Schibsted is also built for small text. With tabular figures turned on, a running total no longer jitters.
26 · Accessibility, measured
Every fix here started as a number. The quietest grey went from 2.69:1 to 4.77:1, and tag pills from 4.29:1 to 4.98:1. Small controls get a 44pt touch area without growing on screen. The loop keeps gaps between its stages, so they still read without colour.
27 · Every screen, both modes
Every screen ships in light and dark. Dark isn't light inverted. Its shadows, hairlines and greens are each tuned separately.
28 · Empty, and waiting
Data loads instantly, so only real waits get a loading mark, like looking up a barcode or reading a meal. Empty screens still point to what to do next.
29 · A week deserves an ending
Closing the loop gets its own moment. Streaks count weeks, not days. Nobody shops every day, and a daily streak would reward extra trips.
30 · Profile is a place, not a tab
Profile isn't a stage of the loop, so it left the tab bar and became a place you visit. Its blocks are ordered by the question each one answers.
31 · Built, then taken out
A glass tab bar, a tab pop, a halo round a closed ring, a chooser screen, nutrition on trip totals, a paste button. Each one shipped, and each one left. The pop actually worked; it just didn't belong. Every removal made the app clearer.
// Deliver · 32 to 36
Deliver
Tools
- Figma
- Claude
- React Native
- TypeScript
- Supabase
React Native
TypeScript
Supabase32 · Onboarding
Eight short steps ask how your week looks, then hand you your first week. The last step is a moment, not a form.
33 · Five passes at the mark
The icon took five tries. The first read as a closed ring. The second looked like a smiley face. The third had club-shaped ends, and the fourth had dots in the wrong place. The fifth put the dots at the arc ends and turned the mark off twelve o'clock, so it reads as open and can't look like a face.
34 · The mark turns, then settles
On launch, the mark is complete from the first frame. It spins while the app loads, then lands on one of its three resting positions. The spin happens while the app is loading anyway, so even a slow launch doesn't wait on the animation.
35 · The loop leaves the app
The app icon is the loop. Widgets carry the week and the month without opening the app. I cut seven widgets to five, because a widget that repeats the app is just a smaller app.
36 · Where it stands
CookLoop is built end to end: 47 screens in light and dark, five widgets and a Live Activity. Nobody is using it yet, and that's the honest number. Next I want to learn whether people check spend at the shelf, whether a weekly loop holds, and whether it's worth paying for.
Most of the design work was deciding what to take out. Six features shipped and then left, and the app got clearer every time. Next time I'd get the survey in front of real people before the second rename, not after the fifth.