Lottie Animation

Matcha delivery, illustrated end to end..

Order tracking for a matcha delivery app, illustrated end to end: five states, one courier, and the screen most apps never design — the delay.

Service: Lottie Animation
Platform: —
Deliverables: 5 Lottie (.json)5 Static illustration (SVG + PNG)
Timeline: —
Year: —

The challenge

Order tracking is the longest screen in a delivery app and the emptiest. Once the customer taps "order", there is nothing left to interact with — a number counting down and a status label that changes three times. Most apps fill the space with a map. A map earns its place when you're following a car across a city; it's noise when you're waiting twenty minutes for one cup of matcha from a shop four blocks away.

So we set ourselves a brief: what happens if the waiting screen tells a story instead? Cover every state of a matcha delivery — including the one nobody designs for, when the order runs late — using a single illustrated character the customer follows from the whisk to their front door.

Our approach

01
We storyboarded the wait, not the status
The five states came out of writing the order as a scene list rather than a state machine: brewing, on the way, delayed, almost there, delivered. Each got its own setting — a tea counter, a city street, a jammed road, a park path, a front gate — so progress reads from the background before you read the label.
02
One courier, five moments
Same woman, same apron, same bike in every frame. Continuity is what turns a progress bar into a person: by the third state you aren't waiting on an order, you're waiting on her. We built the character sheet first — proportions, palette, three-quarter and profile turns — so every scene stayed on-model.
03
We designed the bad news too
Most tracking flows only illustrate success. We gave the delay its own scene: the ETA climbs from 15 back to 20, and the picture shows exactly why — a car blocking the bike lane. The illustration does the explaining, which lets the copy stay light ("Ugh! Delivery was slightly delayed") instead of defensive.
04
Built to loop, not to perform
This screen gets reopened a dozen times per order, so the motion is deliberately low-energy: a slow pedalling cycle, steam drifting off the bowl, a background that pans a few pixels. Nothing resets hard, nothing demands attention twice.
05
A palette borrowed from the drink
Everything is pulled from matcha itself — sage, olive, deep forest — over warm cream. Keeping the illustration desaturated leaves the dark green status bar and the two action buttons as the only saturated elements on screen, so the interactive parts stay obvious.

The result

5States

Order states, including the delay

1Character

Character across five continuous scenes

60FPS

Playback on iOS and Android

What we learned

The delay state took the most passes. Early versions leaned apologetic — a slumped character, a drained palette — and looking at it felt worse than no illustration at all: it made a five-minute delay look like a failure. The version we kept leaves her upright and still pedalling, and moves all the explaining into the background: a car in the way, and nothing more. Same information, none of the alarm.

The second thing we'd carry forward is that a rising ETA is the real design problem, not the artwork. A number that climbs breaks trust unless something on screen accounts for it. Once the illustration explained the cause, the copy could stay casual — and a delay stopped reading as a broken promise.

If we extended the set, the next states worth illustrating are the ones that stay plain text in almost every app: order accepted, shop is closed, courier couldn't reach you. Those are the moments where an app feels most like a database, and where a character does the most work.

What was delivered

5 × Lottie (.json) One per order state, drop-in for iOS, Android, and React Native.
5 × Static illustration (SVG + PNG) Reduced-motion and first-paint fallbacks for every state.
1 × Character sheet Turns, proportions, and palette so future states stay on-model.
1 × After Effects source Layered project with named comps for future edits.