Acomponentsystempoweringlivesportscontentacross8brandsand8countries.
Sportal365 is the technology platform behind Ringier Sports Media Group — Europe's fastest-growing digital sports media network, home to brands like A Bola (Portugal), Sportal, Sport.ch and GSP.ro. I designed the library of sports widgets — and reimagined the backoffice editors use to compose them — turning complex, real-time sports data into modular components that any brand in the group can theme and any of its 380+ journalists can publish.
Head-to-head comparison — pick any two teams.— the same component re-skins per brand, in light & dark.
Open full playgroundUnderstanding the full picture.
Ringier Sports Media Group runs 8 sports brands across 8 European countries — 23M engaged fans a month, 380+ journalists, and 1,400+ pieces of content published every day. Every brand needs to show the same kinds of things: live scores, lineups, head-to-heads, standings, player stats and odds.
Rather than rebuild those for every brand and every sport, Sportal365 provides them as reusable widgets. My job was to design that widget system — and the editorial experience around it — so one set of components could serve many brands, many sports, and hundreds of non-designer editors.
The result is a library where the same widget renders in any brand's identity, in light or dark, populated with real-time data — and can be dropped into any article by an editor in a couple of clicks.
One library, every sport.
A suite of widgets — head-to-heads, lineups, standings, live scores and more — each designed for football, basketball, tennis and beyond, in light and dark.
How do you design one system flexible enough for every brand, yet simple enough for every editor?
one component, many identities (colours, logos, type), in light and dark
football, basketball, tennis and more, each with different data and layouts
380+ journalists compose with these widgets, so they had to be foolproof
every widget is populated with live match data, so states and edge cases matter
I designed the full library of sports widgets and every variant, and reimagined the backoffice flows editors use to build and publish content. The system lives in Storybook as the shared source of truth between design and engineering.
A single source of truth.
Every widget and variant is documented in Storybook — the shared reference between design and engineering, where each component can be inspected, configured and embedded.
Built to scale in Figma.
The library is organised for reuse — components and variants for light and dark, structured so every brand and sport shares the same foundation.
Man City
LiverpoolManchester City382873+6291Arsenal382855+6289Liverpool3824104+4582Tottenham3820612+1366
Chelsea3818911+1463
Newcastle3818614+2360From understanding to execution.
Designing for many brands at once
Every component had to carry a brand's identity without forking into a dozen copies. I separated what's structural from what's expressive, so a single widget could be skinned per brand.
- Shared structure, brand-level skinning
- Light and dark for every component
- Consistent behaviour across brands
Making complex data feel simple
Sports data is dense and real-time. Each widget had to turn a flood of numbers into something a fan can scan in seconds — comparisons, standings, timelines, live states.
- Clear hierarchy for dense stats
- Comparison layouts (H2H) that read at a glance
- Live, loading and empty states designed, not forgotten
Designing for the editor, not just the reader
The widgets are only half the story — journalists compose with them in the backoffice. I reworked those flows so inserting and configuring a widget takes a couple of clicks, no design knowledge required.
- Insert-a-widget flows inside the editor
- Live preview before publishing
- Configuration without design decisions
Where editors compose.
Journalists build articles and live blogs in the backoffice, inserting and configuring widgets in a couple of clicks — no design knowledge required. I reworked these flows so the system is as easy to publish with as it is to look at.
Powering the network.
The system powers sports content across the entire Ringier Sports Media Group network — and beyond, through Sportal365's external clients. 23M fans a month experience these components every day.
Great systems are invisible — they show up as thousands of consistent, on-brand pages published every day by people who never think about the system at all.
A design system isn't a set of components — it's the agreement that lets a brand, an editor and an engineer all move fast without stepping on each other.
The hardest constraint wasn't visual, it was human: designing for people who aren't designers.
If an editor can't use it in two clicks, elegance doesn't matter.
Designing for many brands forces you to separate the essential (structure, behaviour) from the expressive (colour, identity) — that separation is the whole game.
Bestseller
Fashion & Retail Mobile App