Battlefy — Esports from the ground up
0–1'd an entire design system for the world's top esports tournament platform, targeting a 50% reduction in design and dev cost per project.
Arcade Design System
Starting at Battlefy it became clear that a single source of truth was sorely needed when it came to design and developer assets. The goal was to create a system which cut developer and design involvement by over 50%, in order to speed up delivery for clients such as Riot, Apex Legends, Zotac, NHL and MLB.
I ran workshops with senior stakeholders including our CTO and Director of Design to understand what would be needed from a design system. It quickly became clear that Arcade needed to work across both our platform team and our "workhorse" ESO team — capturing complex brand requirements from partnerships and outputting comprehensive, cohesive Portals.
Arcade — the Battlefy design system
Portal architecture
Portals are external pages created entirely in the style of a brand partner to advertise a tournament or event. By focusing on Portal components first, we hit our ambitious 50% cost reduction target while ensuring our components covered a large scope of usage.
Our Portals followed a consistent layout: global nav, hero, subnav, onboarding, prizing, tournament cards, FAQ, and footer. Building these organisms atomically gave us a solid baseline for everything Arcade would become.
Examples of existing Portal layouts
Token Studio + Storybook
By building within the Token Studio plugin, we converted Figma library data directly into developer-first items pullable into Storybook. Components were fully customisable — the Modal, for example, could toggle elements on and off, edit text, and change entire styling through Token Studio without detaching the component.
Components implemented in Storybook
After three months of work alongside developers and senior staff, we had a full component suite built and ready for use on-site:
Homepage redux
When I joined, the Battlefy homepage was purely utilitarian — a game selector, a carousel of featured tournaments, and a list below. For new users and brands evaluating Battlefy as a partner, it completely failed to communicate what Battlefy actually did.
Briefed on a two-week sprint to launch an MVP, I prioritised two things: a clear explanation of what Battlefy does, and a reel of major partners — Riot, Coca-Cola, Madden, Premier League, EE — to establish credibility.
An element that resonated strongly with stakeholders was the use of 3D assets, which I self-taught through Blender during the project. Mixing Figma with Blender opened up directions that felt genuinely different from what was out there.
Desktop and mobile design explorations
3D explorations
Teaching myself Blender during the project opened up a direction for the homepage that felt genuinely distinctive. The Anvil — Battlefy's mascot — became the centrepiece of the hero, rendered in various configurations to find the right combination of impact and brand alignment.
3D explorations built in Blender
Three stages to ship
The redesign rolled out in three stages — MVP in two weeks, then two rounds of improvements as stakeholder feedback came in and the brand direction solidified.
First stage — MVP
Second stage — homepage overhaul
Final stage — full build