All work
Esports platform · 2018 to 2025 · Designer, then Head of Design

Seven years on an esports platform, from designer to Head of Design

FirstBlood runs tournaments, ladders and cash rewards for Dota 2, PUBG and other competitive titles. I joined as a UX/UI designer, took over the design team a year later, and ended up as Head of Design across FirstBlood and its fintech sister product, Mana. This is the platform where I learned to build systems that outlast the screens.

Role
UX/UI designer, then design team lead, then Head of Design
Company
FirstBlood Technologies, remote, United States
When
April 2018 to April 2025
Platform
Web and iOS
Worked with
Product managers in the first year; after that directly with the founders, carrying the product decisions myself, and with the engineers day to day
Scope
Product, brand, marketing site, design system, a team of three
Reference
Joe ZhouCEO and founder, FirstBlood and Mana · on LinkedIn
The FirstBlood web platform: the Dota 2 ladder with weekly matches and prize pools, next to the Warzone Battles tournament grid
The Dota 2 ladder and the Warzone tournament grid. Real money on the line, so the interface has to be unambiguous.
01 · At a glance
Situation

A live competitive platform with an engaged community running tournaments through it every week. The product needed to be easier to use and to appeal to new players, without breaking the muscle memory of people who were mid-season with money at stake.

The tension

A tournament is one of the most intense moments a product can create. Players are anxious, time-boxed and emotionally committed. The interface has to disappear during a match and be impossible to miss between rounds. You cannot learn that rhythm in a calm office; I watched real players use the platform during live events.

What I did

A full product and brand redesign built on one design system, responsive from 360px up, with a distinct screen for every state of the tournament journey. Then, as Head of Design, hired and mentored two designers and set up the critique and research practices that kept quality consistent across two products.

Result

The redesign launched and the platform grew: by April 2021 FirstBlood reported more than 150,000 monthly active gamers, more than 700,000 Warzone matches since that game launched on the platform in September 2020, and more than $400,000 paid out in rewards. The same system carried Mana when it launched as a sister product. The design system, marketing site and brand assets from this period still define FirstBlood’s visual identity today.

02 · Context

Three chapters on one platform

I joined reporting to the design team lead. When they left in June 2019 I took over as lead. Two years later, after Mana launched, I became Head of Design over both products and a small, growing team. The design system I started on my first day is the thing that made each chapter possible without starting over.

FirstBlood iOS screens: the Dota 2 ladder, Warzone battles, the referral programme and the profile
The iOS app: ladder, battles, referrals, profile.
03 · Decision

One design system, every surface

I streamlined the tournament flows, rebuilt the marketing site for acquisition and sponsor visibility, and refreshed the brand across product, social and event assets. All of it was built so that one person editing one component in Figma would see the change land on every surface. For a team this size that was not a nice-to-have. It was the only way to move fast enough.

The alternative, designing each surface on its own, is what most small teams do, and it is why most small teams' products drift. We could not afford the drift.

The FirstBlood design system: form inputs and date pickers, the Korolev and Roboto type scales, and the full icon library
Inputs, type scales, the icon library. Korolev for the shouting, Roboto for the reading.
04 · Decision

A screen for every state of the tournament

I mapped the whole competitive journey, from registration through check-in, round one, results and the next bracket, and gave each state its own screen. Players always know where they are, what is happening and what to do next. Ambiguity during a tournament is the fastest way to lose someone’s trust, so the same compact flow separates “waiting for teammates” from “your team is confirmed” with a single tap.

The cheaper version is one screen with a status line that changes. It is also the version where someone misses their check-in and loses a bracket they paid to enter.

FirstBlood tournament check-in states: waiting for teammates, and team registered
Waiting for teammates, and confirmed. One tap between anxiety and certainty.
The FirstBlood team selection modal: pick a team, select four players with substitutes, with error and status states
Team selection, with its error and status states designed rather than left to chance.
05 · Decision

Rewards a new player understands in five minutes

Prize ladders, referral flows, cash, skins, tokens. FirstBlood’s economy has layers, and the product had to make all of it legible to someone who signed up five minutes ago. I designed the rewards surface so a new player knows exactly what they are playing for before they commit an evening to a bracket. The referral flow started as a simple hook and became one of the platform’s strongest organic channels, which is a reminder that the simplest thing in Figma can carry the most weight in the business.

FirstBlood desktop tournament progress with a PUBG challenge completed, next to the mobile landing page with the game browser
Tournament progress on desktop; the game browser on the mobile landing page. Match check-ins, brackets and scoring work at 360px as well as at 1440px.
06 · Team

Scaling design past one person

Becoming Head of Design moved my day away from pixels. I hired and mentored a mid-senior product designer and a marketing designer, set up regular critique, and built the feedback loops that kept product and brand work consistent. The design system was the engine underneath: it let the team ship without drifting from the language, and gave new people a clear place to start.

Of everything from those seven years, the system is what I am proudest of, because it kept working long after any individual screen was out of date.

The FirstBlood iOS token staking flow: wallet balance check and stake confirmation for the NEW token
Token staking on iOS: balance check, then confirmation. Financial flows designed with the same care as the tournament ones.
07 · Outcome

A platform its players came back to

FirstBlood launched the full product and brand redesign and grew its community of competitive players: by April 2021 the platform reported more than 150,000 monthly active gamers and more than $400,000 paid out in rewards, and Warzone alone had passed 700,000 matches. It set the stage for Mana to launch under the same parent company. The design system, the marketing site and the brand assets from this period still define how FirstBlood looks. Mana’s story, including how it ended, is on its own page.

For me, this was the project where I learned to scale design beyond myself: how to build systems that other designers can work in, and how to keep my own craft while leading other people’s.

08 · Credits
Mine
Product and brand redesign, the design system, the tournament and rewards flows, the marketing site, hiring and leading the team
Team
A mid-senior product designer and a marketing designer, both hired and mentored by me; product and engineering delivered the platform