AUTO LEGENDS - CASE STUDY

As the UI/UX Lead for Auto Legends, I spearheaded the overarching creative direction and design architecture spanning the game's menus, world integration, and gameplay HUD. The primary objective was to craft a sleek, high-octane interface that delivers critical real-time racing data without cluttering the immersive 3D environments and highly detailed vehicle models.

Precision Tachometer System: The central focal point of the race HUD is the streamlined tachometer UI, which elegantly clusters the RPM gauge, current gear indicator, and digital speedometer into one highly legible dashboard component.

Dynamic Action Feedback: The system utilizes intuitive color-coding—such as the bright green "sweet spot" on the RPM gauge—paired with bold, floating typography to provide immediate positive reinforcement, explicitly calling out the Launch sequence as the starting lights drop.

Integrated Social Interactions: To elevate the competitive multiplayer atmosphere, the HUD seamlessly embeds social features directly into the live race view, including an opponent profile avatar and quick-access interactive sticker emotes on the bottom right.

Project Overview: Auto Legends Post-Race UX As the UI/UX Lead, I directed the design of the post-race results screen to solve a specific design challenge: reducing a complicated, overwhelming wall of racing stats into an elegant and visually impactful interface. By prioritizing information hierarchy, the resulting design delivers immediate competitive feedback while allowing the high-fidelity 3D vehicle models to remain the focal point of the victory screen.

Progressive Disclosure: To prevent the user from being overwhelmed, the default view distills the race data into only the most critical metrics—such as Reaction Time (RT), half-mile (1/2), and Final time—housed in a sleek, semi-transparent central panel. To accommodate hardcore racers, an "EXPAND" button is prominently integrated at the bottom of the panel, allowing the UI to open up and display the complete, comprehensive list of race results on demand.

Color-Coded Quick Reads: To significantly enhance the user experience, performance comparisons are strictly color-coded for instant comprehension. Positive time deltas are highlighted with green up-arrows, while negative results are marked with red down-arrows. This allows players to parse exactly where they gained or lost their advantage in a fraction of a second.

Cinematic Player Feedback: The top of the HUD explicitly reinforces the race outcome using bold, color-matched "WINNER" (green) and "LOSER" (red) tags above the respective player avatars. This clean framing bridges the gap between raw data and emotional player feedback.

Project Overview: Auto Legends Garage & Tuning UI As the UI/UX Lead, my creative direction for the garage interface focused on reducing a highly complicated vehicle tuning system into a streamlined, user-friendly menu. By stripping away visual clutter and focusing on intuitive interactions, the resulting design empowers players to make precise aesthetic and mechanical adjustments through an interface optimized for both touchscreens and desktop environments.

Simplified Tuning Architecture: The "Stance Tuning" menu logically organizes complex customization options—such as Height, Camber, Width, Tire Width, and Tire Sidewall—into a clear, readable list with exact numeric values. Utilizing straightforward "Front" and "Rear" toggle tabs prevents screen overcrowding while maintaining total player control.

Cross-Platform Input Design: To bridge mobile and PC platforms seamlessly, the primary tuning interaction utilizes a large, tactile slider dial positioned at the bottom center of the screen. Flanked by intuitive "LESS" and "MORE" indicators, this prominent control is highly responsive for thumb-swiping on mobile devices while remaining precise for mouse clicks on a desktop.

Unhindered Visual Feedback: The UI panels are built with a clean, dark theme and minimal red and yellow accents, framing the 3D vehicle model rather than obscuring it. This allows players to instantly observe the real-time visual impact of their stance adjustments before committing to the changes via the prominent "APPLY" button.

Project Overview: Auto Legends Dealership & Shop Experience - As the UI/UX Lead, designing the in-game shop for Auto Legends required balancing a highly immersive, narrative-driven environment with dense statistical data. The creative direction focused on evoking the authentic feel of browsing a real-world car dealership, carefully organizing complex vehicle specifications into a clean, digestible format that culminates in a frictionless, high-converting call to action.

Immersive Dealership Environment: To ground the purchasing experience in the game's reality, the UI frames the 3D vehicle within an authentic street-level setting, avoiding a sterile menu backdrop. A narrative dialogue prompt from an in-game personality acts as a virtual salesperson, guiding the player and adding narrative immersion to the standard storefront.

Digestible Data Architecture: Core racing audiences require deep technical specifications before making a purchase. The right-hand panel elegantly organizes this complex data—including exact Horsepower, Torque, Drivetrain, and Weight metrics—into a clean, highly legible grid that doesn't obscure the car. The panel also clearly communicates the vehicle's class rating and rarity tier at a quick glance.

High-Impact Call to Action: The entire UX flow is architected to funnel the player's attention down toward the point of sale. The bottom-right corner anchors the interface with a highly visible, contrasting white "BUY" button paired directly alongside the clear purchase price, driving a strong and definitive user action.

< Back to Home

Page updated

Google Sites

Report abuse