Social Gaming Platform
A free social platform that tied a player's profile across multiple games so stats, ranks, and performances lived in one place instead of five.
Client
Battlelog.gg
Year
2021
Role
Co-Founder. Senior Product Designer. Owned design, design system, and frontend implementation. Partnered with one engineer on backend and game APIs.
Stack
Figma · Vue · Sass · PHP · Laravel
Context
In 2021, if you played more than one competitive game, your identity was fragmented. CSGO stats lived on one tracker, World of Warcraft ranks on another. Fortnite, COD, Overwatch — each had its own profile, its own ranking logic, its own idea of what counted as a match. There was no single place to see yourself as the player you actually were.
Problem
One engineer and I wanted a profile that held everything. Not a stats aggregator — a social platform. Somewhere a player could point to and say this is me across the games I play. Rankings, kills, match history, compared against friends playing the same titles.
Approach
The first decision was whether to use an off-the-shelf kit or build the system from scratch. Bootstrap or Tailwind would have got us to a working product weeks faster. I built from scratch. A side project is the one place where you're not paying the cost of someone else's design decisions on a deadline — I wanted to own every variable and see how far I could push a system when nobody was waiting on the output.
The second decision was how design and code would connect. The common path in 2021 was Figma-first, hand off, then implement. I designed the system in Figma and implemented it directly in code at the same time, using Tokens Studio to keep both surfaces in lockstep. A token change in Figma propagated to the stylesheet without a translation step. Design-to-code pipelines weren't something most teams had adopted in production yet — this was a chance to test the approach on a project where I could break things without consequences.
The third was cross-game comparison. Each game speaks its own language — a rating in WoW is not a rating in CSGO, a kill in Fortnite is not a kill in COD. Rather than forcing a universal stat model, I kept games siloed inside each player's profile and only surfaced comparison where it was meaningful. If two players both played CSGO, their stats could be compared. If one played WoW and the other didn't, WoW simply didn't appear in the comparison view. The UI made the overlap the subject, not the absence.
Work
The system was built from primitives up: tokens, semantic layer, components, then mirrored directly in Sass. Theming lived at the token layer so surfaces could shift without rewriting components.
The product was organised around the player profile. Each connected game surfaced its own stats panel. The leaderboard and comparison views were built from the same components, styled by game-specific tokens.
Outcome
We shipped. The platform ran for a community of several hundred gamers tracking ranks and comparing stats across the games they played. It eventually went offline"lack of time and investment".
The more durable outcome was what it changed in how I work. Building a full system from token to code on my own schedule gave me a testbed for the approach I'd later bring into production work. The design-to-code discipline I practiced here is the same discipline I use now on larger systems.
Reflection
The best thing about building a system on a side project is that nobody is stopping you from making every decision yourself. The hardest thing is the same. What I'd tell myself starting again is that the constraint of shipping, real users, real load, real edge cases, is what makes a system mature.
The decisions held up. The tokens and components held up. What would have pushed it further was more time inside the lived reality of the people using it.
Other Projects
