PART 1 - What is playvs?
Quick background on PlayVS
PlayVS is North America’s largest scholastic esports platform for middle schools and high schools.
Schools use PlayVS to schedule matches, manage leagues, and track standings, so students can compete, connect, and build real teamwork and leadership skills through gaming.
PART 1 - MY ROLE
Owning competitive experience and the system behind it
• Designed core competitive flows for coaches and players, including league hub, schedules, matches, standings, and playoffs
• Owned Nexus design system for web, defining tokens components and documentation used across multiple
• Partnered with PM, engineering and ops to translate real world league rules into simple predictable UX patterns
• Implemented publisher compliance rules across the product, including logos, marks, and platform badges
• Created reusable esports visuals and patterns that scale across titles and leagues, including esports themings, icons and illustration assets
• Owned Nexus design system for web, defining tokens components and documentation used across multiple
• Partnered with PM, engineering and ops to translate real world league rules into simple predictable UX patterns
• Implemented publisher compliance rules across the product, including logos, marks, and platform badges
• Created reusable esports visuals and patterns that scale across titles and leagues, including esports themings, icons and illustration assets
PART 1 - CONTEXT & PROBLEM
Give coaches and players a reliable home for the season
When I joined PlayVS in 2021, we had just brought the product design in house after an agency. Coaches and players could access leagues and matches, but the experience did not yet tell the full story of the season. Many weekly tasks still lived in help articles or in emails with CXs.
We needed the league space to become a true home for competition. Coaches should be able to understand what is due and what comes next in seconds. Players should be able to trust that results count, standings are accurate, and progress is tracked.
PART 1 - WHAT I SHIPPED
A cohesive league experience built through iterations
Over the past three years, I built and iterated a reusable competitive framework. The league hub, matches, standings, and playoffs all follow the same season hierarchy and the same language for match states, so every title and league feels familiar the moment a coach or player lands.
Because the system is consistent, new leagues, tournaments, and even in person events could build on it instead of starting from scratch.
As real world situations showed up, disputes, reschedules, forfeits, we added states and patterns once, then every surface benefited automatically.
PART 1 - IMPACT
Platform-wide product impact
• 25% team creation increase
• In tandem with match assistant feature participation increased by 67%
• Forfeits reduced by 74%
• Support Tickets reduced by 36%
• 97% Checkins in 2024 (only 62% in 2023)
• 1.5M Chats in 2024
• In tandem with match assistant feature participation increased by 67%
• Forfeits reduced by 74%
• Support Tickets reduced by 36%
• 97% Checkins in 2024 (only 62% in 2023)
• 1.5M Chats in 2024
PART 2 - WHO WE DESIGN FOR
Teacher coaches and competitive players
Coaches are full time teachers who coach esports on the side, they need one clear home to see what is happening this week and what comes next.
Players are high school esports players who care about fairness and progress, they want to quickly see who they play, whether results count, and where they stand in the league.
Both groups need a competition experience that feels consistent, predictable and trustworthy across the season.
Players are high school esports players who care about fairness and progress, they want to quickly see who they play, whether results count, and where they stand in the league.
Both groups need a competition experience that feels consistent, predictable and trustworthy across the season.
PART 2 - CONTEXT AND CONSTRAINTS
Designed for the real world
League rules vary across state associations, NFHS, publishers, and different game rules, but the product still has to feel simple and consistent.
We built on an existing season data model for matches weeks and scores, so the solution had to work without redoing the foundation
Engineering bandwidth was shared across multiple bets, so every design choice prioritized reuse clear states and minimal new logic.
We built on an existing season data model for matches weeks and scores, so the solution had to work without redoing the foundation
Engineering bandwidth was shared across multiple bets, so every design choice prioritized reuse clear states and minimal new logic.
PART 3 - UI AUDIT BEFORE CORE EXPERIENCE
Esports theming first so every league feels like its own arena
Before refining flows, we set a clear esports visual language so coaches and players instantly feel where they are in the competitive world
Each title gets its own hero treatment with key art logos and title specific color blocking, so Rocket League never feels like VALORANT or League of Legends
We carried the theming into banners league cards and key surfaces so users can recognize the game and league at a glance, then focus on the season details that matter
Each title gets its own hero treatment with key art logos and title specific color blocking, so Rocket League never feels like VALORANT or League of Legends
We carried the theming into banners league cards and key surfaces so users can recognize the game and league at a glance, then focus on the season details that matter
PART 4 - CORE EXPERIENCEs
League pages → a real “home”
Before: coaches landed and still couldn’t answer basic season questions.
After: a standard hub template driven by season config (dates, deadlines, roster lock, match day).
Ops now spins up new leagues in the internal tool, and coaches always see a familiar layout with league-specific details filled in.
PART 4 - CORE EXPERIENCEs
Matches beyond my team
League level view shows every fixture in the season so coaches and players can follow the competitive story, see how outcomes connect, and understand the bracket as it unfolds.
Reused one match card and one status language across surfaces so users can scan quickly and trust what is final versus still in flux.
Outcome, better context for scouting and fairness, plus fewer weekly questions about how the league is progressing.
PART 4 - CORE EXPERIENCEs
Match states, turning chaos into something users can trust
Before, match status was not clearly defined. Pending and final could not cover what actually happens in real leagues.
I audited real outcomes across titles and leagues, then defined a complete set of match states with clear rules for when each applies.
We translated those definitions into consistent UI patterns so users can instantly tell what happened, what counts, and what is still unresolved.
This reduced confusion and made results feel fair and trustworthy even when disputes reschedules or forfeits happen.
PART 4 - CORE EXPERIENCEs
Standings & Results
Standings roll up every match result in the league into one scannable table.
Clear seeding plus simple status tags like clinched make playoffs position obvious for coaches players and parents.
Kept the table easy to read while carrying the same esports theming through colors icons and team styling so the competitive story feels consistent across surfaces.
PART 4 - CORE EXPERIENCEs
Playoff brackets that scale
Turned playoffs into a scannable bracket so users can follow progression without reading rules.
Designed the bracket to clearly highlight winners and next matchups across rounds.
Added esport theming as a layer, keeping the bracket pattern reusable across titles.
PART 5 - REUSING THE SYSTEM
The same bracket pattern, now powering live tournaments
We built the bracket as a reusable pattern with clear states, not a one off screen.
When PlayVS Live launched for in person tournaments, we extended the same bracket instead of redesigning events from scratch.
This kept competition consistent across products and saved design and engineering time for every new tournament.
PART 5 - REUSING THE SYSTEM
PlayVS Stadium, same model in a new context
• Reused the league hub structure for Stadium events, overview schedule and standings or bracket
• Kept the same season hierarchy and match language, so the experience felt familiar from day one
• This let us ship Stadium faster without reinventing core competitive patterns
• Kept the same season hierarchy and match language, so the experience felt familiar from day one
• This let us ship Stadium faster without reinventing core competitive patterns
PART 6 - internal management tool
Designing for Checkpoint - the control room behind PlayVS
Turned the same season hierarchy into ops friendly flows for setting up leagues seeding brackets and handling match issues.
Built in sensible defaults and clear warnings so the team could make changes safely without accidentally breaking a season.
Because ops could manage leagues cleanly in Checkpoint, coaches and players saw a more consistent experience in the product.
Built in sensible defaults and clear warnings so the team could make changes safely without accidentally breaking a season.
Because ops could manage leagues cleanly in Checkpoint, coaches and players saw a more consistent experience in the product.
PART 7 - DESIGN SYSTEM
Common components that tie the experience together
Turned repeated UI from league work into reusable Nexus components, league cards key dates match rows status tags and hub layouts.
Standardized props and states so the same pieces work across leagues titles and products.
Documented usage in Figma and Storybook so the team could adopt components without extra walkthroughs.
Result: less one off UI and new leagues became more configuration than redesign.
Standardized props and states so the same pieces work across leagues titles and products.
Documented usage in Figma and Storybook so the team could adopt components without extra walkthroughs.
Result: less one off UI and new leagues became more configuration than redesign.
PART 7 - DESIGN SYSTEM
System work, shipped the same way as features
Built Nexus in storybook in parallel with product work, not as a separate project.When a pattern showed up twice, I created a small system ticket alongside the feature, component variants tokens or asset rules.
Kept adoption clear in Jira with a simple pipeline so the team knew what was ready to reuse.
Standardized esports assets and compliance rules as reusable patterns, so new titles did not require resolving the same problems.
part 8 - reflection
If I could do one thing differently
I would push harder for a lightweight mobile companion app for coaches. Coaches run esports between classes and during short breaks, but our experience stayed desktop first for too long. A focused mobile app could cover the weekly essentials without making the system more complex.
• A weekly home that shows what is due next, match time, roster lock, and any action needed
• One tap match management, check ins reporting issues reschedule requests and dispute flags
• Notifications that matter, match reminders roster deadlines result posted and opponent reschedule updates
• A clear source of truth on match status and next steps, built on the same match state system we defined on web
• One tap match management, check ins reporting issues reschedule requests and dispute flags
• Notifications that matter, match reminders roster deadlines result posted and opponent reschedule updates
• A clear source of truth on match status and next steps, built on the same match state system we defined on web
part 9 - SYSTEM BEYOND THE PRODUCT
Designing the league experience as a full ecosystem
• Extended the league experience beyond UI into marketing materials such as coach handbooks and printables
• Created enrollment and announcement assets that match the same league language and esports theming
• Kept product and materials aligned so coaches can run the season with less back and forth support
• Created enrollment and announcement assets that match the same league language and esports theming
• Kept product and materials aligned so coaches can run the season with less back and forth support
