- Role
- Senior Product Designer
- Scope
- Design system Responsive layouts Prototyping Motion
- Team
- Diesdas studio, Red Bull Racing in-house digital & engineering team
- Tools
- Figma Cosmos UI React
- Timeline
- Nov 2023 – Jul 2024
- Platform
- Responsive web (desktop + mobile)
Case study · Consumer web · 2023–24
Oracle Red Bull Racing
A responsive redesign of the Oracle Red Bull Racing website after their record-breaking 2023 season, built on a dev-first design system so design and engineering could ship at the same pace.
Problem
The site no longer matched the team's standing after a record-breaking season.
What I did
In collaboration with Diesdas, built a dev-first component library in Figma on top of Cosmos UI.
Result
A redesigned site with responsive layouts, interactions and motion, built for the in-house team to run day to day.
Context & problem
Oracle Red Bull Racing had just closed a record-breaking 2023 season, and the website was the main place fans, partners and candidates met the team. The brief was as much about enabling a faster design-to-dev process as about new visuals, so the design itself had to be structured for the people implementing it.
Scope & my role
I joined through Diesdas, working closely between the studio and Red Bull Racing’s own digital product and engineering team, to set up the design side of the relaunch and keep it close to code. Here is what I owned and where I worked with others.
I owned
- A 30+ component library in Figma, extending Cosmos UI
- 15+ page templates, desktop and mobile, across ORBR and other sites
- Interactions and scroll motion
Worked with
- Red Bull Racing's in-house digital product & engineering team
- Diesdas studio, from Berlin, supporting on the creative direction side
Constraints
Two things shaped almost every decision.
Live content, every week
Standings, the upcoming race and the current session change during the season, so components had to handle real-time data, not fixed layouts.
An existing component base
Engineering already worked with Cosmos UI. The work was to build on top of it, rather than coming up with a system of our own.
Key decisions
Three choices that decided how the rest of the project went.
Extend the existing UI library
Components engineers already had could ship as they were. New ones followed the same naming and structure, so nothing needed translating at handoff.
Specify responsive behaviours for new components
Responsive behaviour lived in the Figma file instead of being left to interpretation in code, which removed a whole round of handoff questions.
Create component variants for flexibility
To adapt to changing pieces of content, components had to be ready for other teams, the editorial team especially, to move faster once everything was in place, with the variants they were likely to need already built in.
The solution
We built a web component library on top of Cosmos UI, then delivered mockups for every page template, each showing the components in their different variants. The result is a set of page templates that keeps the site consistent across desktop and mobile, and can absorb a new race every week.
One library, multiple teams
The library didn’t stay a one-off for ORBR. Once it existed, the same Cosmos UI foundation and component set carried over to sibling Red Bull Racing properties, each restyled for its own team or purpose without touching the underlying structure.
Visa Cash App Red Bull (VCARB), the sister team’s own site, reused the same hero and quote components under a different livery: Red Bull’s grid blue in place of ORBR’s navy and red.
Red Bull Sim Racing (SR), the team’s esports arm, got the same treatment again: its own homepage and race detail page, built from the same components with a different type and colour system on top.
Other Red Bull experiences
REBL CUSTMS and REBL ARTFCTS, two fan-facing campaign sites (one for submitting car designs to win race tickets, the other for winning collectible pieces of racing history), pushed the same components furthest from the source: technical, blueprint-style ornament for CUSTMS, a grungier, collaged look for ARTFCTS.
From design to code
Instead of static screens, engineers got a system that was named, structured and specced the way they would build it. A few things made the handover smoother:
Named like the code
Layer and component names followed the same Cosmos naming convention used in code, so a component in Figma and its counterpart in the codebase were recognisable at a glance, with nothing to translate at handoff.
Defined once
Variables, desktop and mobile text styles, and colour and effect styles were defined once in the library and reused everywhere, so a single change propagated across every screen instead of being repeated component by component.
No unspecified states
Every component shipped with all of its variants and states specified up front, so engineers never had to guess what an edge case (an empty state, a long title, a loading row) should look like.
Outcome
The system shipped across more than the one site: Oracle Red Bull Racing (ORBR), the Visa Cash App Red Bull livery site (VCARB), Red Bull Sim Racing (SR), and campaign sites like REBL CUSTMS and REBL ARTFCTS all launched on it, each as its own hub for race highlights, team news and fan programmes.
- Websites
- 5+
- Page templates
- 15+
- Components
- 30+