Chris Hayden
←Showcase / 2020 – 2023 Live

PopFlash

Match hosting for competitive Counter-Strike, redesigned so most players never need an account.

FIG. 1The scrim lobby. Two teams, settings, chat and the waiting room on one screen, because a lobby is a waiting room.
Role
Every page, component, icon, and the visual identity, working directly with the owner, who built it.
Team
The owner-developer and me
When
2020 – 2023
Contract
Built with
Figma, Design system
Links
Website

01Context

PopFlash lets Counter-Strike players host their own matches on high-tick-rate servers. The product worked, but the interface hadn’t kept up with it. The owner, who also built and ran it, wanted it to feel like a modern product, with match setup fast enough for a pickup game to start in seconds.

02The flow

From a shared link to a live match, fast.

Only the host needs a subscription. Everyone else gets a link, signs in with Steam (which PopFlash already supported, and every CS player already has), and lands in the lobby. My job was making that path feel quick and obvious, from the link to picking teams to getting on the server, so a pickup game could start in seconds.

TRY IT · YOU'RE THE HOST, EGG
  1. Share the linkNine friends click it.
  2. They're inSteam login. Zero sign-ups.
  3. Make teamsScramble, or pick as captain.
  4. LaunchThe lobby becomes the match.

03Details

The lobby changes mode, not page.

Captain picks and map vetoes happen inside the lobby, as overlays on the rosters everyone is already watching. Nobody loses their place, and nobody reloads.

Captain picking and map veto overlays on top of the scrim lobby.
FIG. 2Captain picks and map veto, drawn over the lobby.

The match summary.

When a match ends, the match page becomes a summary of the whole game. The final score and result sit at the top, followed by the round-by-round history, then a full stat table for every player on both teams, covering kills, deaths, damage, clutches, and flashes. It’s the screen players come back to after a scrim to see how it went and who played well.

Match page with the final score, round history, and detailed stat tables for both teams.
FIG. 3The match page after the game: score, round history, and stats for both teams.

A real system, even for two people.

Buttons, badges, inputs, rosters and chat, all built from one component set with checked contrast. It was my first real design system, and it held up across the whole platform.

PopFlash component library: rosters, stats tables, chat, settings, and a color palette with contrast ratings.
FIG. 4The component set and palette, with contrast ratings.

04The website

Along with the platform, I designed the public site: the landing page for new players, the signed-in home with news and recent matches, pricing, and player profiles.

The PopFlash website: landing page, signed-in home, and the long marketing page.
FIG. 5The public site, from the landing page to the full marketing page.
PopFlash pricing page with free, Supporter, Team/Streamer, and Community plans.
FIG. 6Pricing. Playing is free; the plans are for hosting.
A PopFlash player profile with a rating chart, recent matches, and stats.
FIG. 7Player profiles, with rating history and recent matches.

05What happened

1M+
players on the platform
Still live
at popflash.site

Players told us the new design felt better and was easier to find their way around. The redesign rolled out while the community kept playing, and PopFlash is still running at popflash.site. The owner has kept iterating since my contract ended, so the live site differs from these screens, which show the work as I delivered it.