A self-initiated concept exploring how Formula 1 fans could follow a race in real time, without ever opening an app.

Following a race on your phone means unlocking it, opening an app, and waiting for live timing to load. As a long time F1 fan, that always struck me as backwards, position changes are the most time sensitive data in the sport, and they sit three taps deep.

I gave myself one day to explore an alternative.

This project reimagines F1 race updates as a set of Dynamic Island states. Glanceable, motion driven, and built to be understood in under a second.

Timeline: 1 day

Tools: Figma (design, prototyping, animation), ChatGPT for car and flag asset generation

Live race information is dense by nature. Twenty drivers, twenty gaps, tyre compounds, sector times, pit windows. Most F1 apps solve this by showing everything at once.

But the fan's actual question during a race is much narrower, especially when they are busy out:

Did my driver overtake, or get overtaken?

Is the race still running?

Who won?

One second comprehension. Each state leads with a single dominant signal, so the event registers before you finish reading.

Motion as hierarchy. Animation wasn't decoration here, it was the point. Speed became a way to encode severity.

The moment I built this for. Both drivers, both positions, top down car renders in real team livery.

The names sit on the same side as their cars: Lewis on the left, Max on the right. Position and layout say the same thing, so you read the pass spatially instead of decoding it.

The "OVERTAKE" wordmark is oversized and cropped by the island edge so it reads as speed, not as a label.

My first version used an arrow: POS 2 → POS 1, one driver, one badge pair. It looked cleaner and it was more compact.

But it failed the one second test. The arrow describes the change in the abstract, so you have to process the notation before you get the event. And with only one driver named, the cars sitting right there had no labels attached to them.

Splitting the names back out and anchoring each one to its own car fixed it. The layout itself carries the information now, and the badges just confirm it. Less compact, faster to read.

The state that had to feel different from everything else.

Solid F1 red carries the entire message. The text only confirms what the color already said. The lap counter gives context on how much race is left to resume.

This one animates in with no easing at all. A stopped session should feel stopped, not slide in politely like a delivery update.

Winner, team, race time, lap count and pit stops in a single glance.

The chequered flag does the work a "Race Complete" label would have done, so the headline space goes to the driver instead. Unlike the red flag, this state resolves slowly, because a result is worth sitting with.

Tbh, most of the day went into smart animate, not layout. Layers that looked identical to me weren't identical to Figma, so transitions would cross fade or snap instead of tween, and every small fix meant replaying the whole thing to check.

That's the honest cost of animating in Figma: fast to design, slow to tune. But the tuning is the whole point. A pass that eases in feels like a UI transition. A pass at the right speed feels like an overtake.

All three states in sequence. Overtake, red flag, race finish — each one animated to a different speed, because not every update deserves the same urgency.

This started as a fan project, not a portfolio piece. But it clarified something I bring into client work now: motion is a layer of information architecture, not a finishing pass. Deciding how fast something appears is a hierarchy decision, and most interfaces leave it to chance.

What do you think? Always happy to talk it through. Currently available for new projects. Feel free to reach out 🙌