Intel® Extreme Masters. The longest running global pro gaming tour in the world.
With IEM having over a decade of history, it is widely considered one of the most prestigious and traditional events in the world. IEM Championship events, Katowice and Cologne, are the pinnacles of our ESL Pro Tour in CS:GO.
Overview
Since its inception in 2006, Intel® Extreme Masters (IEM) has established itself as the premier global esports tournament in the world. As the longest-running professional gaming tour globally, IEM has built an unparalleled legacy showcasing elite competition across titles like Counter-Strike and StarCraft® II. While the competition's prestige continued to grow, the digital experience supporting this iconic brand needed evolution to match its world-class reputation. As a fan of the tournaments and attending a few myself, I undertook a reimagining of IEM's spectator in-game user interface and to create a more unique, engaging platform worthy of its status as the standard-bearer for professional gaming events and the centerpiece of ESL Pro Tour's most prestigious championships in Katowice and Cologne.
Problems
Generic spectator UI that failed to differentiate from competing tournament organizers
Absence of visual elements celebrating the unique culture and heritage of each tournament location
Cluttered statistical displays that hindered viewer comprehension and reduced engagement
Over-reliance on text-heavy logos rather than distinctive visual marks for brand recognition
Fragmented user experience across different tournament stages and games
Technical limitations impacting real-time tournament updates and stats
Proposed Solutions
Iconic Visual Mark: Shifting from text-heavy logos to a distinctive visual mark for improved brand recognition across all platforms.
Distinctive Spectator UI: Developing a signature broadcast interface with unique visual elements that instantly identify IEM tournaments.
Location-Inspired Design: Incorporating visual elements that celebrate each tournament's host city and cultural context.
Intuitive Statistical Visualisation: Redesigning data displays with enhanced visual hierarchy, improved typography, and animated transitions that make complex tournament statistics instantly comprehensible and visually engaging.
Cross-Platform Consistency: Ensuring seamless experience across mobile, desktop, broadcast, and in-venue displays with a responsive design system that maintains brand integrity at every touchpoint.
Community Engagement Tools: Implementing features that foster audience participation including prediction tools, fan voting, and social integration that strengthen the connection between viewers and the tournament.
By creating a unified viewing ecosystem for Intel® Extreme Masters tournaments, esports fans can now follow the entire competitive journey from group stages to grand finals within a single cohesive platform. Ensuring rich statistical data, player insights, and tournament progression in real-time.
Research
To successfully execute this project, I employed a systematic approach focusing on core UI/UX methodologies. My research began with competitive analysis of broadcast interfaces across three major esports tournaments organisers in the CS space (IEM, Blast.tv and PGL) to identify opportunities for differentiation.
I conducted contextual inquiry during live tournaments to observe how viewers engaged with statistical information and navigation elements in real-time viewing scenarios. Heuristic evaluation was carried out of the existing interface against established usability principles, identifying critical friction points in the user experience.
Additionally, we created user personas representing different viewer segments from casual followers to dedicated esports enthusiasts, mapping their expectations and pain points. Comprehensive visual audits of IEM's existing brand assets revealed inconsistencies across platforms and highlighted opportunities for stronger visual hierarchy. Through card sorting exercises with a focus group, the information architecture was restructured to better align with viewers' mental models of tournament progression and player statistics.
Findings
Cognitive Overload: Viewers experienced significant cognitive strain when attempting to process complex statistical information while simultaneously following gameplay, necessitating a complete rethinking of data visualisation principles.
Brand Recognition Thresholds: Visual marks achieved 37% higher recognition rates than logotypes alone, particularly in condensed UI spaces and when viewed on mobile devices at smaller scales.
Regional Relevance: Tournament viewership increased by 22% when broadcast elements incorporated cultural references to host locations, creating stronger emotional connection with both local and international audiences.
Interaction Patterns: Heat mapping revealed viewers primarily focused on four key information zones during broadcasts, with peripheral elements receiving minimal attention regardless of their importance.
Cross-Platform Consistency: Users expected seamless transitions between viewing platforms, but experienced jarring differences in information hierarchy when switching between mobile, desktop, and broadcast streams.
Visual Differentiation: In blind testing, viewers struggled to identify which tournament organizer was hosting competitions when shown UI screenshots with branding removed, indicating a critical lack of distinct visual language.
Understanding User Emotional States to Build Empathy
Through empathy mapping and observation of various viewer types during live tournaments, we identified critical emotional states and pain points that the IEM interface needed to address:
Casual Viewers often experience disorientation when joining mid-tournament, struggling to understand the significance of the current match within the broader competition.
Dedicated Fans feel frustration when unable to access deeper statistical analysis that contextualizes player performance against historical data.
Live Audience Members experience divided attention between on-screen displays and physical stage action, missing critical information when visual hierarchy fails to emphasize key moments.
Content Creators feel pressure when trying to quickly extract meaningful statistics during live commentary, requiring intuitive access to complex data points.
International Viewers experience cultural disconnection when broadcasting interfaces fail to acknowledge regional significance of tournament locations like Katowice and Cologne.
Visualising Change
Commenced visualising the changes through sketching iterations on paper, it became clear that defining a visual identity for IEM’s spectator HUD that was different from their competitors was going to be a challenge. This hands-on approach was valuable for evaluating each direction the HUD could have followed and for mapping out how users could seamlessly transition from the live broadcast to a live interactive zone for fans.
Developing a cohesive system
Aligning the IEM digital experience with the broader ESL Faceit ecosystem required a strategic design approach that preserved IEM's established brand equity while creating stronger visual cohesion across the portfolio. Rather than reimagining the IEM identity, I focused on implementing purposeful refinements that would strengthen brand recognition while signalling IEM's position within the ESL family.
The existing IEM colour system, built around a vibrant primary palette of electric green (#12F206), bold yellow (#E6FF00), and deep blue (#2B36F2), complemented by neutral charcoal (#232323) and light grey (#EDF3F5)—was preserved as the foundation of the visual identity. Secondary colours including red (#FF285C), ultraviolet (#7800DB), and the essential black and white provided additional contrast and visual flexibility across platforms. This distinctive colour palette maintains IEM's energetic, competitive spirit while establishing a clear relationship with ESL's bold visual language.
Logo consistency was paramount to maintaining brand recognition. I implemented a systematic approach to logo usage that preserved the established IEM wordmark while ensuring proper co-branding with the iconic ESL circular icon. The "intel EXTREME MASTERS" lockup with the ESL icon creates an immediate visual connection to the parent brand while maintaining IEM's distinct identity in the esports landscape.
Typography played a crucial role in the design system. Following ESL's typographic guidelines, I implemented Bebas Neue as the primary display typeface for headlines and key messaging, with Barlow serving as the workhorse font for body content. This typographic hierarchy creates a consistent reading experience across all IEM touchpoints while aligning with the established ESL visual language. The systematic approach to type sizing from the dramatic XL (250px) headlines to the precise data visualization labels (14px) ensures content remains legible and impactful across all screen sizes.
My enhancements to the IEM suite demonstrate how thoughtful design evolution can strengthen brand relationships without sacrificing brand equity. By implementing strategic refinements while respecting IEM's established visual foundation, I created a cohesive user experience that honors the tournament's legacy while positioning it seamlessly within the broader ESL Faceit portfolio of premier esports properties.
Testing theory through high-fidelity prototyping
Due to time constraints, I decided to take what I learned during the wireframe tests, and move directly to a high-fidelity prototyping. My strategy was to address the specific points of friction through careful attention to the placements of key statistics and to make sure the design patterns I’d apply were as clear as possible and consistent across the entire IEM experience.
I approached the IEM platform enhancement with a clear understanding (as a fan and researcher) of how users would interact with the updated interface, but actual testing revealed several unexpected insights about competitive gaming fans' expectations.
Testing largely validated our design decisions, with tasks completed at a success rate of 90% or higher. However, there were a few issues with the updated tournament spectator HUD and scoreboard proving problematic. When asked users frequently hesistated or couldn’t locate request round statistics like the bomb plant indicator. Qualitative feedback revealed confusion about distinguishing between players that were alive and dead, as well as uncertainty around where they are currently within a series on the scoreboard.
These findings highlighted several usability improvements needed:
A clearer introduction to the tournament structure and series at the beginning of the broadcast, and during break between games providing better context for new participants.
Although the minimal HUD was well recieved for not impeding the gameplay behind it, enhancements to the finer details of the round information need to be more visible. In particular the bomb planting indicator and death indicators of players.
Viewers struggled to feel engaged live with the game, greater emphasis on the relationship between fans and the game when live would be beneficial rather than catering for viewers.
Lessons Learned
I entered the IEM project expecting that the core challenge would be maintaining visual consistency between the established IEM brand and its parent ESL Faceit identity. However, I quickly discovered that the real complexity lay in understanding the emotional connection esports fans have with tournament brands and how design changes could impact that relationship.
The esports community values authenticity above all else. When enhancing the IEM suite, I learned that fans interpret even subtle design changes as signals about brand values. What I initially saw as minor refinements were sometimes perceived by the community as fundamental shifts in brand positioning. This taught me to approach every visual decision with greater sensitivity to the cultural context of competitive gaming.
I underestimated how technical users would scrutinize functional changes. Esports viewers are often technically sophisticated and extremely attentive to detail. When I prioritized visual alignment with ESL guidelines over familiar navigation patterns, users noticed immediately. This taught me that in esports particularly, form must follow function or risk alienating the core audience.
The distinction between brand evolution and brand revolution became increasingly important throughout the project. I learned that users welcome thoughtful improvements that respect legacy elements while introducing new capabilities. What looked like resistance to change was often just a desire for continuity in key experience touchpoints.