Back
Racing Game Player Profile UI Design

Rhythm Bhatnagar
Oct 23, 2023
Case Study
14 mins
The Profile UI serves as the central hub where players can track their progression, showcase achievements, and analyze race statistics. More than just a stats page, it reflects a player's identity, milestones, and competitive standing within the game ecosystem.
Challenge:
The Profile UI serves as the central hub where players can track their progression, showcase achievements, and analyze race statistics. More than just a stats page, it reflects a player's identity, milestones, and competitive standing within the game ecosystem.
The challenge was to design a structured yet engaging interface that caters to both casual and competitive players, balancing depth with accessibility while preventing cognitive overload.
The interface needed to effectively present multiple layers of information, including:
Performance Stats across solo, duo, and squad modes
Car Collection & Car-Wise Accolades
Race History & Results
Tradable and Non-Tradable Car Assets
Player Achievements & Accolades
Design Process:
A. Stakeholder Discussions – Aligning Business & Player Goals
Collaborated with game designers, developers, and product managers to identify core objectives.
Defined engagement metrics, monetisation strategies, and retention goals tied to profile visibility.
Ensured that the Profile UI could evolve with future game updates (e.g., car upgrades, trading features).
B. Competitive Analysis – Learning from Existing Ecosystems
Analysed racing & multiplayer games to benchmark profile structures, social mechanics, and progression systems.
Identified gaps—most racing games lacked a customisable accolade showcase, which we introduced.
Evaluated data-heavy vs. minimal profile designs to find a balance between depth and usability.
C. Player Research – Understanding Behavioural Patterns
Conducted player interviews to uncover motivations, pain points, and feature expectations.
💬 “I only check my profile when I unlock something new. Otherwise, it’s just there.”
Insight: Pro players rarely visit their own profile unless there's a new achievement or badge to flaunt. The profile needs to emphasise personalisation.
💬 “I love checking my friend’s profile to see if they’re catching up to me!”
Insight: Competitive players frequently compare stats with friends, making leaderboard integration essential.
💬 “Why would I look at a random player’s profile? Unless I want to trade something with them.”
Insight: For non-friends, only trade-relevant stats should be easily accessible.
💬 “I like to see what cars others are using so I can learn and improve.”
Insight: Casual players are more interested in car-based stats than personal performance tracking.
💬 “I don’t really care about my old races. I just check the last result and move on.”
Insight: Casual players focus on immediate post-game stats, whereas pro players review their match history strategically.
These are few of the many insights that heavily influenced the information hierarchy, ensuring that each player type could find what they needed with minimal effort.
D. Information Architecture:
To determine the optimal information hierarchy, we conducted a card sorting exercise in Figma.
Topics and subtopics were written on cards and categorised based on user mental models.
This helped us create a progressive disclosure strategy, ensuring essential information remained upfront, while detailed insights were layered deeper.
We explored multiple interaction models to balance engagement and usability.
E. Wireframe Design:
After Card Sorting exercise, we chose to divide the Profile into 5 vertical tabs on the left of our horizontal landscape layout for the game. The 5 tabs would be:
1. Overview - Profile Overview
2. Garage - Cars Garage
3. History - Race Results
4. Missions - Achievements & Rewards
5. Inventory - Car Parts & Bonus Content
D.1 Overview:
Challenge:
Providing a concise yet comprehensive summary of the player’s current car, key achievements, and performance stats across solo, duo, and squad race modes while also incorporating social and competitive elements like gang affiliation and likes.
How we cracked it?
Quick Performance Summary for Clarity
Designed a streamlined overview filtered by game mode (solo, duo, squad) and car type, ensuring players could instantly access relevant insights.Data Visualisation for Readability
Implemented intuitive visualisations like a pentagonal stats graph with key stats on 5 of it's vertices to simplify complex statistics and improve comprehension.
Balancing Information Density & Clarity
Avoided cognitive overload by surfacing only the most critical insights at a glance while allowing deeper exploration through progressive disclosure.
Personalisation & Quick-Glance Insights
Designed for quick visual recognition, allowing players to manually set their top three accolades/achievements, reinforcing a sense of identity and pride.
Persistent Car Display for Status & Recognition
Ensured that a player’s primary car remains visible at all times, strengthening emotional attachment and aspirational motivation.
Social & Competitive Engagement Features
Integrated player rankings across game modes, along with gang affiliation and likes, fostering community interaction and competition-driven retention.


D.2 Cars Section – Making It the Hero of the Profile
Challenge
Creating a visually compelling and highly functional car showcase while ensuring seamless navigation, contextual information display, and future scalability.
How we cracked it?

Emphasising Cars
Players valued their cars as prized possessions, so the UI needed to be visually striking and showcase each vehicle's uniqueness.
Future-Proofing for Scalability & Upgrades
Designed the system to be modular and expandable, ensuring seamless integration of future car modifications, upgrades, and customisation mechanics as the game evolves.
Contextualised Stats & Accolades for Better Usability
Instead of placing car performance stats and accolades in separate sections, we embedded them within relevant gameplay contexts under 'Combat' and 'Racing' tabs, minimising navigation friction and cognitive load. (Refer image below)
Iterating on Layouts for Optimal Browsing
Explored horizontal car cards, grid-based galleries, and carousel designs. While the carousel enabled quick browsing, we parked it for future implementation since the initial number of cars was limited, making a more static yet immersive approach ideal for launch. (Refer image below)

This approach ensured a balance between aesthetics, usability, and long-term scalability, making the Cars section both engaging and adaptable.
3. Race Results – Balancing Past Races Data with Quick Accessibility
Challenge
Designing a race results UI that balances quick accessibility with detailed insights while adapting to different race formats.
How we cracked it?
Race Summary at a Glance
Designed a horizontal tile layout representing each race to provide immediate visibility of the player's rank, race mode (Solo, Duo, Squad), and key performance metrics upfront. This ensured quick scanning without overwhelming users with excessive details.

Progressive Disclosure for Detailed Analysis
Clicking on a race tile expanded into a detailed race overview, revealing all participants, their performance stats, and key highlights, ensuring depth for engaged users while maintaining a clean default view.
Adaptability Across Race Formats
Structured the race history UI into three formats—Solo, Duo, and Squad, ensuring each mode had a distinct yet consistent data hierarchy.
Solo races: Highlighted the top individual performer.
Duo races: Focused on team-based performance, indicating the winning duo.
Squad races: Clearly identified the dominant squad while maintaining individual player highlights.



Player Identification & MVP Recognition
Introduced clear visual markers to highlight the user within the race leaderboard, preventing confusion in large player pools. Additionally, an MVP indicator showcased top-performing players, reinforcing competition and motivation.
This approach balanced quick-glance insights with in-depth analysis, ensuring that competitive and casual players alike could track their race history in a meaningful way.
4. Missions & Inventory – Enabling Personalisation & Social Bragging
Challenge
Creating a structured system for in-game milestones and rewards that enhances personalization, progression, and social engagement.
How did we Crack it?
Refining the Terminology for Clarity
We had been using the terms "Accolades" and "Achievements" for different things but we realised in time that both the terms sounded quite similar and created confusion amongst potential players. So, we decided to call milestone tasks (e.g., "Completing 1000 miles of driving") as 'Missions' and move the collectible cosmetic items to a 5th tab called as 'Inventory'.
Introducing Inventory for Prestige & Collectibility
Added a dedicated 'Inventory' tab to house exclusive in-game rewards like car parts, skins, and decals. To differentiate between routine collectibles and premium items, we implemented a tiered classification system, enhancing perceived value and desirability. (Refer image below)

Mission-Based Progression & Rewards
Designed multi-stage milestone tracking within Missions (e.g., "Complete 500 miles → 1000 miles → 2000 miles"), each milestone unlocking tangible rewards such as trophies and in-game currency. (Refer Image below)

Acquisition Mechanics for Inventory Bonus Content
Ensured Bonus Content items could be earned through gameplay achievements or purchased via in-game stores, offering multiple acquisition paths to cater to both grinders and spenders.
Social Amplification & Player Identity
Integrated social-sharing functionality for mission trophies and collectible items, enabling players to showcase their achievements and drive engagement beyond the game ecosystem.
This structure encouraged progression, personalised self-expression, and social interaction, creating a motivating and rewarding player experience.
F. Iterations Post Stakeholder Feedback – Refining the Experience
Some of the key feedback pointers were:

We adjusted data density based on feedback—striking a balance between comprehensive stats for pro players and a simplified layout for casual users.
Reduced clutter by introducing filters, tabs, and collapsible sections for high-density data points.
Added a customisable showcase section for players to highlight their top 3 achievements.
All these changes were incorporated in the designs and are evident in the screenshots shared earlier.
Thank you!
Liked this Profile UI breakdown? Contact us to start building together!