Start a project

Olio

giving food away faster than throwing it away

Mobile AppService designFlowsWireframesPrototypeMap UX
Brand
Olio, London
Discipline
Mobile app · service design
Our role
Research, blueprint, flows, prototype, UI system
Timeline (concept)
5-week design sprint

17:30 · a Tuesday on a London street

01 · The brief

Giving food away should be faster than binning it.

Olio began with a failed handover: on moving day in 2014, co-founder Tessa Clarke couldn’t find anyone to take her good food. With Saasha Celestial-One she founded Olio in London in 2015, an app where neighbours give away, request, borrow and lend food and household things, mostly for free. Businesses pay Olio so that trained volunteer Food Waste Heroes collect their unsold food and list it in the app. Its mission: a world where “nothing of value goes to waste”. Its 2023 rebrand traded green for warm colours and an idea it calls “urgent optimism”.

2015
Founded in London; tested first in a 12-person WhatsApp group
8.8M
Users in 60 countries at its 10th anniversary (2025)
120M
Meals shared through the app by its 10th anniversary
150k
Food-safety-trained volunteers, collecting from 8,500 locations a month

Design problems we chose

  1. 01

    Speed is the product

    Good food goes in minutes. Discovery and alerts must surface local, time-critical items fairly, without notification overload.

  2. 02

    Trust between strangers

    The doorstep handover has to feel safe and polite on both sides: clear pickup etiquette, visible reliability, no awkward no-shows.

  3. 03

    Make the volunteer engine scale

    A Food Waste Hero bag holds 10–40 items. Listing it should be a 60-second job, not thirty forms.

Our goal

Photo to live in under a minute, reserved in minutes, collected without awkwardness, for one loaf or a whole bag.

02 · Research

Three neighbours, one shared clock.

Olio is a two-sided market that happens on a doorstep. We modelled a collector, a giver and a volunteer from Olio’s public audience, then timed every step of their journeys. For all three, the enemy is the same: minutes.

Personas are NUUKE research assumptions built from the brand’s public audience, not real customers.

03 · Service blueprint

Two journeys that meet on a doorstep.

A normal journey map follows one person. Olio needs two, plus the backstage systems that connect them. Both lanes converge on the handover, the twenty seconds where trust is won or lost. Tap any moment for the insight and the opportunity we found.

Time0 min+1 min+5 minHandover+1 hNext dayNext weekGiverDeclutter DianeOlio (backstage)App & systemsCollectorSaver Sam

Swipe sideways to follow the timeline →

Both lanes · the middle of the journey

The doorstep handover

What happens

Sam knocks (or collects from the porch). Diane hands over the bag. Twenty seconds between two strangers.

Insight

This is the moment of truth for trust. If it feels awkward or unsafe, neither comes back.

Opportunity

Address revealed only after reserving, clear etiquette (“contactless porch pickup OK”), and a pickup window both agreed in chat.

04 · Speed is the product

Watch a loaf find a new home in 34 minutes.

We played our design rules forward, minute by minute, for a single listing. The key proposal is fair waves: alert the closest neighbours first, widen the circle only if nobody asks, and stop the moment it’s reserved. Press play, or drag the timeline.

Park300 m600 m1 km · not neededS

Illustrative scenario · not Olio data

Scenario clock17:30Real time
Photo → live
…
Neighbours alerted
0
Live → reserved
…
Extra alerts avoided
…

This is an illustrative scenario we wrote to test our own design rules: the times, distances and neighbour counts are invented for the walkthrough. It is not Olio data, and the “fair waves” rule is our proposal, not a description of how Olio works today.

05 · User flow

Three ways in. One purple button.

Collectors browse, givers add, volunteers batch. Every path is reachable from the Nearby feed, and the purple Add button sits in the same spot on every screen. Tap a screen to open it in the prototype.

browsevolunteerpublish allGet / Give / VolunteerNearby feedMap viewListing detailRequestChatPickupAdd · cameraAI-ify draftPickup timesLive!Hero dashboardAdd CollectionImpact

Tap any screen to open it in the prototype ↓

06 · 3D wireframe

The Nearby feed, taken apart.

Five layers make the home feed. Scroll to assemble it, and drag to look around. Notice how little is purple: we kept it for the actions that make sharing happen.

Scroll to assemble · drag to orbit

  1. L1

    Layout grid

    4-column grid, 20pt margins and an 8pt rhythm. The thumb zone (bottom third) is reserved for Add and Request.

  2. L2

    Wireframe

    Freshest first: one large “just added” card, then compact rows. Distance and age sit on every card.

  3. L3

    Content

    Real copy with a clock: “2 min ago · 350 m”, a pickup window, and a single verb on the button.

  4. L4

    Colour & type

    Warm on oat: coral marks freshness, purple is reserved for the one action that matters (Add / Request).

  5. L5

    Motion & states

    New listings pulse once, the age ticks up live, and a card flips to “Reserved” the moment a neighbour is chosen.

07 · Prototype

Get, give, volunteer. Try all three.

Fourteen screens, fully tappable. Follow the tasks on the left, then flip to Sketch or Wireframe to see how each screen started.

Interactive prototype

Olio · list → request → pickup

Eight tasks across all three personas. Chips, switches and AI-ify are live.

Final UI, fully tappable.

Your journey 0/8

Hi neighbour · 1 km around you

What do you want to do?

Alert me about food within
Closest first. Never more than you ask for.

Nearby

Within 600 m · 17:33

Just added

🥕🥬Veg box, slightly wonky
600 m · 9 min agoFood
🥾Kids’ wellies, size 10
800 m · 21 min agoNon-food
🍋🍋Lemons ×6 from a party
950 m · 34 min agoFood
Food · within 600 m
Map view · Supporter perk
🥖🥯
FoodAdded 2 min ago350 m

Sourdough + 4 bagels

Baked yesterday, too much for one. Lovely toasted. Bagged and ready on the porch.

🕕Today, 6–8 pm
Porch pickup OK · address after reserving
DDiane
★ 4.9 · 212 shares · usually replies in 5 minID ✓

Sample listing for this concept.

Request this?

Pick a time. Diane sees it first, so she can choose quickly.

Hi Diane! Would love the bread for dinner 🙂
DDiane
Sourdough + 4 bagelsReserved for you

I can come at 6pm 🙂

Perfect, it’s yours! Porch pickup is fine, blue door.

✓ Reserved · today 6:00 pmAddress shared with you only · 4 min walk

Brilliant, thank you!

Pickup confirmed

Leave in 18 min

350 m · 4 min walk · blue door, porch

Doorstep etiquette

Up to 10 photos · we’ll write the rest

New listing

🍎＋
Title
Description
Category

When can people collect?

Porch pickup OK
You don’t need to be in
Remember these times
Next listing is one tap faster
📡Alert in fair waves
Closest neighbours first, wider only if needed

You’re live

Good food goes in minutes.

Your closest neighbours are being told first. We’ll widen the circle only if nobody asks, and stop as soon as it’s reserved.

Food Waste Hero

Tonight’s collection

Partner store · 21:151 bag collected
CollectListHand out

Photograph the whole bag. We split it into listings and give them all the same pickup window.

Bags this month18
Next slotThu 21:15

Sample data for this concept.

9 listings from 3 photos

Tap an item to tick it off. Two need a date check.

Same pickup for all
Tonight 21:30–22:30 · my porch›
🎉 Collected! Diane got your thank-you.
SSam
Neighbour since March · ★ 5.0
Collected21
Given17
Things kept out of the bin, by month

Badges

🥖⚡🤝🦸
Bread & veg alerts within 600 m
Tuned after your last pickup

Sample data for this concept.

…

08 · Design system

Urgent optimism, in a warm palette.

Colour tokens · click to copy

Type scale

  • DisplayGood food goes in minutes.Montserrat 800 · 34/38
  • Card titleSourdough + 4 bagelsMontserrat 800 · 18/22
  • BodyPorch pickup OK, address after reserving.Inter 400 · 15/22
  • Meta / clock350 m · added 2 min agoInter 500 · 13/18 · tabular

Live components · tap them

🥖🥯just now

Sourdough + 4 bagels

350 m · today 6–8 pm

Listing card

The age label counts up live and pulses once when a listing is new. Distance and pickup window always share the meta line.

Request button · 3 states

Request → Requested (waiting) → Reserved for you. Tap it to cycle. Purple means “act”; sunshine means “it’s yours”.

Filter chips

The Add button: 64 pt, thumb-reachable, centred in the tab bar on every screen. It is the brand’s most important pixel.

Colours are our working approximation of Olio’s 2023 warm palette. The purple Add button is documented in Olio’s help centre; the hex values are our inference, not official brand values. Olio’s typeface isn’t public, so Montserrat and Inter stand in.

09 · Measure

How we’d know it got faster.

KPI 01

Time to list

We expect: AI-ify plus remembered pickup times bring a food listing from photo to live in under a minute.

How we’d measure: Median and p90 time from opening the camera to publish, split by first vs. repeat listings.

KPI 02

Time to reserve, without the noise

We expect: Fair waves get food reserved within the first wave or two while sending each neighbour fewer alerts.

How we’d measure: Publish → accepted request time by density; alerts per user and opt-out rate. A/B: waves vs. broadcast.

KPI 03

Pickup completion

We expect: Agreed windows, a clear “Reserved” state and reminders reduce no-shows.

How we’d measure: Share of reserved listings marked collected; no-show reports per 100 pickups.

KPI 04

Volunteer batch time

We expect: A Food Waste Hero can list a whole bag in a couple of minutes.

How we’d measure: Time from “Add Collection” to all items live; items unclaimed at the end of the window.

These are the success measures we would agree with the client before launch. As a concept project, no results are claimed.

Sources for brand facts

In good company