Client
AgroHub
Year
2025
Duration
5 weeks
Stack
Figma
Summary
Stampede: Racing Royale – A thrilling kart racing and battle game with 60 participants, customization options, and endless events. Players can unlock new vehicles, customize their karts and characters, and participate in various challenges and events to win rewards. With its classic circuit racing, battle arenas, and constant updates, Racing Royale promises endless excitement. Whether racing against 59 other opponents or joining a party with friends and family, there’s always something new to experience in this wild racing event by Tencent Games, one of the world’s largest video games businesses.
Defining Problems
To construct a solid foundation for our design solutions, we initiated an extensive player discovery phase consisting of remote playtests, contextual inquiries with hardcore and casual arcade racing gamers, and detailed user journey mapping sessions. We observed that in competitive lobbies, players experienced severe cognitive overload when navigating heavy, deep-nested customization submenus, which often caused them to miss matchmaking countdowns. Through these qualitative user interviews, we uncovered critical friction points where players struggled to understand the visual hierarchy of power-up systems and dynamic elimination states during the chaos of a 3-round race. We mapped out extensive user flows detailing the exact step-by-step state transitions of a player jumping from the main lobby, into matchmaking, onto the live circuit, and finally to the post-game reward loop. These journey maps exposed the urgent need to streamline lobby interactions and provide highly glanceable in-game HUD indicators that immediately communicate player rank, elimination thresholds, and power-up availability.
Challenges
The primary challenge of Racing Royale lay in designing a highly responsive, real-time gaming interface that could seamlessly coordinate chaotic 60-player matchmaking, extensive vehicle and character customization, and real-time on-track telemetry without overwhelming the player. Players were migrating from traditional, slower-paced menus to an energetic, rapid battle-royale ecosystem, requiring a highly performant HUD that retained readability at speeds exceeding 150 virtual mph. We had to establish a multi-tier navigation scheme that supported keyboard, mouse, and console gamepad controllers with zero input lag. Additionally, our UI needed to support instant live-state transitions, party lobby management, and high-frequency in-game events, all while adhering to strict rendering performance budgets to avoid frame-rate drops. Successfully balancing the high visual demands of a vibrant, youthful gaming aesthetic with the accessibility needs of a diverse global audience stood as our core design obstacle.
Solutions
Our finalized solution introduced a unified, high-energy gaming portal that effortlessly integrates massive multiplayer features with a dynamic, role-adaptive user interface. To resolve menu friction, we designed a flat, horizontal menu structure optimized for rapid tab-switching, enabling players to customize karts, manage cosmetic skins, and join parties in under three clicks. The live in-game HUD was rebuilt from scratch to prioritize glanceable telemetry, incorporating a specialized "Eliminator Zone Tracker" and dynamic ranking charts that update in real time as players cross checkpoints. We engineered a smart matchmaking screen that visualizes live lobby fill rates, keeping users engaged with interactive emotes and a seamless party chat interface while they wait. This architecture bridges the gap between active gameplay and pre-race preparation, ensuring that the visual interface acts as a natural extension of the high-velocity racing mechanics.
Design System
To maintain visual consistency across diverse platforms, we established the "Royale-OS" design system, a custom visual language engineered for high-contrast, high-velocity gaming environments. The system relies on a hyper-legible, modern sans-serif typeface designed to remain clean and readable even at small sizes on moving HUD components or low-resolution screens. We curated a vibrant, high-energy palette featuring "Octane Yellow" for primary actions, "Neon Pink" for elimination warnings, and a deep space-black backdrop to maximize visual contrast. Every button state, slider, and icon was meticulously crafted with distinct hover, active, and focused states to ensure perfect accessibility and responsiveness across all inputs. By delivering a comprehensive library of modular components—from customizable gauge widgets to player badge templates—we enabled the development team to scale UI updates rapidly while maintaining perfect brand alignment.
Desktop First Approach
Due to the technical demands of a high-fidelity 60-player multiplayer game, we consciously adopted a desktop and console-first design approach. Arcade racers require substantial screen real estate to present wide-angle track views, complex live telemetry, and multiple opponent positions without obstructing the player's core line of sight. Standard desktop and TV displays (1080p and 4K) allowed us to position dense UI overlays, such as mini-maps, speedometers, and chat boxes, in peripheral screen areas where they remain easily readable without cluttering central action zones. Attempting to force this highly visual, multi-layered real-time data environment onto mobile devices would have resulted in unplayable visual clutter and high cognitive strain. By optimizing strictly for larger screens, we preserved maximum player visibility, enabled intuitive dual-analog gamepad layouts, and allowed the vibrant environment of the tracks to take center stage.
Protoypes
The prototyping stage was essential for verifying our interactive mechanics, allowing us to transition from low-fidelity layouts to high-fidelity, high-refresh-rate prototypes built directly within Figma. We created fully playable menu mockups that simulated complex game interactions, such as equipping vehicle accessories, toggling paint styles, and cycling through lobby tabs using keyboard hotkeys and gamepad layouts. These interactive models were tested extensively with diverse player cohorts to measure task completion times and detect usability roadblocks within the customization flows. User feedback gathered during these sessions allowed us to refine visual transitions, add satisfying micro-interactions, and optimize the timing of post-race victory screens. This robust prototyping phase dramatically minimized development risks by acting as a highly detailed, living technical blueprint for our engineering and game design teams.
2 Stage Launch
To guarantee server stability and collect essential user feedback without disrupting our target audience, we executed a highly structured 2/3 stage phased launch strategy. The initial phase consisted of a closed technical alpha targeted at a dedicated group of racing game veterans, specifically testing the responsiveness of our core HUD design and lobby matchmaking systems. Gathering these crucial early inputs allowed us to roll out the second phase—an open beta on Steam and Xbox Game Preview—introducing the full customization suite, progressive seasonal passes, and real-time player leaderboards. This step-by-step rollout enabled our design and engineering teams to continuously monitor system performance, fix critical navigation bugs, and refine UI flows based on real telemetry data. The final stage culminated in our full, highly anticipated global release, delivering a polished, highly performant gaming interface that was completely optimized for long-term player engagement.
Results & Impact
The global launch of Racing Royale yielded phenomenal success, completely transforming the user experience and establishing a new benchmark for accessible, high-performance battle-royale menus. By streamlining the lobby structure and customization submenus, we achieved a staggering 45% reduction in overall menu navigation times, allowing players to jump back into action faster. The new high-visibility HUD design and eliminator warning indicators successfully lowered cognitive load, leading to a 30% increase in first-week player retention rates and significantly improved tutorial completion. Our comprehensive accessibility settings received widespread praise from the gaming community, especially for the high-contrast HUD modes and complete controller remapping support. Ultimately, the UI overhaul established a highly scalable framework for future content drops, proving that user-centered design is a critical driver of player engagement in live-service gaming.
Reflection & Learnings
Designing the interface for Racing Royale offered an invaluable masterclass in balancing high-density, real-time gaming telemetry with rich, dynamic visual aesthetics. I learned that in competitive game environments, the best UI is one that recedes into the background during intense action while providing powerful visual feedback at critical moments. This project emphasized the immense value of rapid, high-fidelity prototyping, which proved essential for testing subtle physics-based interactions like menu drifts and gamepad button mapping. If I were to approach this challenge again, I would collaborate even closer with the engine programmers from day one to establish automated performance testing tools for HUD assets. Ultimately, this creative journey reinforced that applying rigorous user-centered UX methodologies to game design produces interfaces that are not only stunning to look at but incredibly satisfying to play.