Square One Tetris Championship

Designing a global esports broadcast experience for competitive Tetris

Project Overview

Role
UX Designer / Broadcast Designer / Creative Director

Timeline
2023 – 2024 (Two tournament seasons)

Team
Puzzle Kingdom production team
Broadcast staff, commentators, and volunteers

Tools
Figma, FigJam, NodeCG, OBS, Adobe Illustrator

Platform
Livestream broadcast graphics, event posters, tournament website

Status
Shipped (live esports events)

The Problem

Competitive Tetris has a dedicated global player base, but tournaments were often difficult for viewers to follow. Broadcast overlays varied widely across events, and viewers frequently joined streams mid-match without context about the players, score, or tournament round.

This lack of clarity made it harder for new viewers to understand what was happening and reduced overall engagement during live broadcasts.

Problem Statement

Tetris esports viewers need a way to quickly understand match context, scores, and tournament progression because current broadcasts often lack consistent visual systems.

Without this clarity, viewers struggle to follow matches, which lowers engagement and limits the growth of competitive Tetris.

Goals & Success Metrics

Business Goals

✓ Establish Square One as a premier modern Tetris tournament
✓ Increase viewer engagement and livestream retention
✓ Build a recognizable tournament brand

The event quickly became recognized as a major community tournament featuring top competitive players.

User Goals

✓ Understand match scores instantly
✓ Follow tournament progression
✓ Learn about players competing in the event

Metrics Used to Measure Success

Primary
Viewer retention during broadcasts

Secondary
Twitch chat activity and engagement

Qualitative
Feedback from players and community members

Research & Discovery

Methods Used

✓ Community interviews with competitive players
✓ Competitive analysis of other Tetris tournaments
✓ Viewer feedback from previous broadcasts
✓ Twitch analytics review

Key Research Findings

Finding 1 — Viewers frequently join streams mid-match

Many viewers enter a livestream after it has started, which makes it critical that the broadcast UI immediately communicates who is playing and what the score is.

Finding 2 — Tournament structure was often unclear

Without clear bracket context, viewers struggled to understand the stakes of a match.

Example feedback:

"I just joined the stream and have no idea if this is winners or losers bracket."

Finding 3 — Competitive Tetris lacked consistent broadcast UX

Unlike major esports such as League of Legends or Valorant, most Tetris tournaments lacked standardized broadcast design systems.

This presented an opportunity to create a clean, consistent visual identity for the tournament experience.

Competitive Analysis

Opportunity gap:

Create a modern esports presentation specifically tailored for competitive Tetris gameplay.

Define: Synthesis & Framing

User Persona

Name: Alex
Age: 24
Occupation: Competitive gamer
Location: United States

Goals
Watch high-level competitive Tetris
Follow favorite players
Learn new strategies

Pain Points
Confusing tournament formats
Difficulty tracking matches in real time

Behaviors
Watches Twitch esports events
Follows players through Discord and social media

Quote

"I want Tetris tournaments to feel like a real esport."

How Might We Statements

HMW help viewers understand match context instantly when joining a stream?

HMW create a broadcast interface that supports both competitive players and casual viewers?

HMW build a tournament visual identity that feels professional and memorable?

Prioritization Framework

Design Process

Information Architecture / Viewer Flow

Typical viewer journey

Stream opens
↓
Viewer sees live match overlay
↓
Player names and score visible immediately
↓
Commentary explains match context
↓
Viewer understands tournament stakes

Why this flow:

The design focused on immediate clarity, ensuring viewers could understand the match even if they joined mid-stream.

Ideation & Exploration

Direction 1 — Minimalist Broadcast UI

Focused on gameplay visibility but lacked excitement.

Direction 2 — Esports-style broadcast

More dynamic visuals and player highlights but risked clutter.

Direction 3 — Hybrid Broadcast System (Chosen)

Balanced competitive clarity with esports storytelling elements.

This approach allowed the gameplay to remain the focus while still providing context and visual excitement.

Wireframes

Early wireframes explored different placements for key information including player names, scores, and tournament round indicators.

Key decisions:

Decision 1 — Prominent score display

Scores were positioned prominently to ensure viewers could immediately determine who was winning.

Decision 2 — Match context indicators

Round information and match stage were included to help viewers understand the tournament structure.

Design System Decisions

Final Design

Key Screens / Flows

Match Overlay

The primary broadcast interface showing gameplay, player names, and scores.

The design ensures gameplay remains the focal point while still communicating critical information to viewers.

Bracket Screen

Displays tournament progression and upcoming matches.

This screen helps viewers understand the stakes of each match and how players advance.

Player Spotlight Graphics

Pre-match graphics highlighting competitors.

These visuals introduce players and help build storylines around rivalries and returning competitors.

Interaction Design Notes

Score Updates

Using NodeCG, score updates are triggered in real time during the broadcast.

This ensures viewers always see accurate match progress.

Scene Transitions

Animated transitions between match scenes and bracket screens help maintain broadcast pacing and visual polish.

Accessibility Considerations

Contrast ratios meet WCAG AA standards

Clear visual hierarchy improves readability

Information remains legible even on mobile Twitch viewers

Validation & Testing

Usability Test Setup

Method
Live broadcast observation and viewer feedback

Participants
Twitch viewers and competitive players

Tasks evaluated

• Identify which player is winning
• Understand match score
• Understand tournament round

Results

Results & Impact

Event Performance

Prize Pools

2023 Tournament
$2000

2024 Tournament
$1000

Qualitative Results

Community feedback consistently praised the event’s production quality.

Many viewers described Square One as one of the most polished modern Tetris tournaments.

Reflection

What Worked Well

A consistent broadcast design system improved viewer clarity.

Strong visual branding helped differentiate the event from other community tournaments.

What I'd Do Differently

Develop a dedicated viewer platform where fans can follow brackets live.

Expand player storytelling to strengthen emotional engagement.

What I Learned

Broadcast design is fundamentally a UX challenge.

Clear information hierarchy dramatically improves viewer engagement during live events.

Next Steps

□ Expand Square One into a recurring international tournament series
□ Improve player storytelling and pre-match content
□ Develop a dedicated esports website for puzzle gaming events

Want to work together?

Get in touch →