cartd · Founding Product Design · 2024

From a creator's recipe to a full grocery cart in a few taps

I was cartd's only designer, tasked with building the web app that could win its first partnership with a food creator who has 2M+ followers: a branded page where followers cook, shop and subscribe.

Creator home page: Hi, I'm Nat, with a welcome photo and this week's recipes

Recipe page for Caesar Style Pasta Salad with serving size, cook time and nutrition

Cart page listing five ingredients with quantities, a total and a checkout button

ROLEProduct Design Intern
Sole designer, end to end

TEAMcartd's team and the creator, who gave feedback along the way

TIMELINESummer 2024
Remote, London startup

SKILLSInteraction design, rapid prototyping, user flows, dev handoff

THE BRIEF I WAS GIVEN

Design a web app that can secure cartd's first partnership with a creator who has 2M+ followers, one that earns money from their content and shows off everything they offer.

01 · CONTEXT

A young startup, a big creator, and not much time to get it right

cartd is a London startup that helps food creators turn their followers' interest into groceries in a cart. When someone sees a recipe they like, they can add its ingredients to a supermarket cart without writing a shopping list. My job was to design what the followers and the creator would actually use.

2M+ followers: the first big creator cartd was trying to win

1 designer me, from the first sketch to developer handoff

Fast rounds short timelines and limited access to the creator's feedback

So every screen had to do two jobs: make cooking and shopping easy for followers, and give the creator ways to earn and show off their work.

02 · HOW IT WORKS

One page for a creator's fans, with a shop built into every recipe

Here is the whole idea in one flow. The creator shares a link, followers land on her page, and the recipe turns into a cart.

Opens the creator's link Browses recipes Picks a recipe Swaps ingredients Adds to cart Checks out

FOR FOLLOWERS

Cook the recipe without the shopping-list chore

Swap ingredients for ones they prefer
See cost and leftovers before buying
Send the whole recipe to one cart
Join live cook-alongs and comment on recipes

FOR THE CREATOR

A branded home that earns and shows off her work

A subscription (£3 a month or £30 a year) for exclusive content
A pantry and store to feature products
Live events on Instagram, YouTube and in person
A community in the comments

THE IDEA

A recipe, then a shopping list

The recipe is the cart

03 · SOLUTION

A creator page that takes followers from discovery to checkout

I designed a mobile web app that opens right from the creator's link, so followers never have to install anything. It has four areas, each with its own set of features.

Creator home page with welcome photo, intro and this week's recipes — 01 · DISCOVERThe creator's story, this week's recipes and a way to subscribe, all in one scroll.

Recipe page with title, tags, serving size, cook time and nutrition information — 02 · COOKServing size, cook time and nutrition up top, with ingredients, swaps and the cart button below.

Cart with five ingredients, quantity steppers, a total and a checkout button — 03 · SHOPQuantities, one total and a single checkout button. Nothing else to decide.

THE 10+ FEATURES I DESIGNED Grouped by what the follower is trying to do.

DISCOVER Home
About the creator
Recipe browsing and filters

COOK Recipe page
Serving size and units
Nutrition information
Ingredient swaps
Leftovers and cost
Reviews and comments

SHOP Pantry and store
Product pages and offers
Tesco cart
Checkout and payment

BELONG Live events
Subscription and billing
Log in and sign up
Profile and saved recipes

04 · KEY DECISIONS

Three decisions shaped the experience

One button turns a recipe into a grocery cart

Followers decide what to buy while they read the ingredient list, so that is where the cart button lives. Swaps come first, for anyone who needs a different ingredient. Then one button sends everything to a Tesco cart, which keeps things simple: items, quantities, one total, one checkout.

DECISION Keep the whole path from recipe to checkout in one short scroll, inside the browser Instagram already opens.

SAMPLE DATA Recommended substitutions

Crispy chicken goujonsGrilled chicken breast

Swap out

Fusilli pastaWholewheat fusilli

Swap out

CashewsToasted pumpkin seeds

Swap out

Add ingredients to Tesco cart

Cart page with quantity steppers, total and checkout button

Show what a recipe costs, and what's left over, before anyone buys

Ingredients are sold in bigger packs than most recipes need, so a jar of mustard or a bag of cashews mostly goes unused. Each recipe shows its cost per person, total cost and how much will be left over. Below that, the creator's other recipes that reuse those leftovers, so the next meal is one tap away.

DECISION Put cost and leftovers on every recipe page, and use leftovers to recommend what to cook next.

SAMPLE DATA Manage leftovers

52%Leftovers remaining

Cost per person: £4.65Total recipe cost: £18.60

Similar recipes

Arancini, Stuffed Rice Balls Reuses: chickpeas, fusilli pasta

Roasted Tomato Risotto Reuses: chickpeas, romaine lettuce

See all leftover ingredients

Live events that give people a reason to subscribe

The creator's cook-alongs and meet-ups sit on one events page, split into upcoming and coming soon. Each card has a date, place and cost, plus an "Add to calendar" button. Subscriber-only events get their own colour, and a short pop-up shows what a subscription unlocks.

DECISION Show subscriber-only events to everyone, and let them make the case for subscribing.

Events page with upcoming Cook With Me events, a subscribers-only event and an in-person meet and greet

05 · PROCESS

Three quick rounds, shaped by the creator's feedback

Time was short and access to the creator was limited, so I worked in rounds and sorted each batch of changes into "essential" and "nice to have".

ROUND 1StructureWireframes for home, recipes, pantry, store and events, with grey placeholders
ROUND 2Essential vs nice to haveThe recipe page filled out with swaps, nutrition and comments
ROUND 3Launch changesFinal changes for the creator's launch: paywall, sign-up flow and profile

First-pass home page with grey placeholder cards — HOME · FIRST PASSGrey boxes to settle the structure first.

Launch version of the home page with the creator's photo and weekly recipes — HOME · LAUNCHThe creator's voice, weekly recipes and a way in.

First-pass recipe page with a serves slider and a hero ingredient box — RECIPE · FIRST PASSA serves slider and a plain ingredient list.

Launch version of the recipe page with serving size, nutrition dropdown and save buttons — RECIPE · LAUNCHCleaner serving and cook time, a nutrition dropdown, save and completed buttons.

06 · IMPACT

10+ features, a faster launch and better creator conversion

SCOPE 10+ features designed end to end, from first sketch to developer handoff

SPEED 40% faster time to launch

CONVERSION 25% higher creator conversion

CREATOR FEEDBACK After I presented the designs to the creator, the response was positive.

07 · LEARNINGS

What I'm taking with me

Design for two audiences at once

Followers want a quick shop. The creator wants income and a way to show her work. Every screen had to earn its place for both.

Make every round of feedback count

With limited access to the creator, clear before-and-afters and a split between essential and nice-to-have kept decisions quick.

Hand off as if developers are the next users

As the only designer, I documented flows and screens so the team could build without waiting on me.