Asphalt 8 UX Case Study

Making Menu Navigation & Game Elements More Intuitive

The Game:

Asphalt 8 is a mobile multiplayer racing game by Gameloft.

The Problem or Challenge:

The game’s pre-race screens are somewhat complex and there are way too many steps before a player actually starts playing the game. The home screen is overwhelming and cluttered (borderline spammy even). Those screens and steps need to be simplified because they are confusing for first-time players, and annoying for regular players.

My Role:

Come up with a better user experience for the game.

My Process:

  • I first played the game for several days to get really familiar with it.
  • I researched and played other similar racing games.
  • I started studying the current game and thinking of ways to improve it.
  • I adopted the personas of a first time player, a casual player and a daily hardcore player.
  • I prioritized what’s important to me as a player for each of those personas.
  • I tried to eliminate and simplify elements in the game and the user journey.
  • I reduced the visual clutter and made things like car selection, star requirements, and locked/unlocked items simpler and more intuitive.
  • I created wireframes.
  • I tested them and got feedback.
  • I ended up creating an improved UX for the game.
  • I also created some improved simplified UI suggestions.

My Solution & Results:

Below are my wireframes and some brief explanations.

Current Home Screen

•  Having a “Play” and a “Multiplayer” button doesn’t make sense.
•  It’s not clear what race modes are available.
•  Current Home screen is too cluttered (Promotion + Event + CTA Buttons).
•  Icons & buttons aren’t clear. (ex. does that green button mean race or swap car?).

Proposed Home Screen

My Solutions:
•  Grouped all race modes under either “Single” or “Multiplayer”.
•  Grouped social, leaderboard & profile-related buttons to the left.
•  Simplified the top bar and made the icons clearer.

Proposed Home Screen Submenus

Each race mode button now has the game’s relevant race modes under it as submenus.

Current Season Select Screen

•  You currently swipe to browse the seasons. This isn’t intuitive nor practical.
•  Locked seasons don’t look too differentiated than available ones.
•  Requirements to unlock seasons are not clear.

Proposed Season Select Screen

My Solutions:
•  Created a season thumbnail & summary for each season.
•  Changed the horizontal swipe into a vertical scroll; you scroll down to browse seasons.
•  Differentiated the locked seasons to emphasize the lock and how to unlock them.
•  Made the unlocking requirements clearer using icons and better wording.

Current Race Select Screen

Locked races should be visually more distinguished and differentiated than unlocked races.

Proposed Race Select Screen

My Solution:
Emphasizing the lock icon and adding a semi-opaque layer would do the trick.

Current Race Details Screen

•  Current star requirements are not instantly intuitive.
•  Race info is scattered.
•  “Add” button is ambiguous.

Proposed Race Details Screen

My Solutions:
•  Grouped the star requirements on 1 line and made them more intuitive.
•  Brought the other race details closer together.
•  Made the “Add Ghost To Race” feature clearer.

Current Cars/Garage Screen

•  Current garage screen is cluttered and buttons are not too intuitive.
•  Scrolling through all cars in order to find your cars is annoying.
•  “Car Paint” can be added to “Car Upgrade” section.
•  “Collections” can be added to “Car Packs” section.

Proposed Cars/Garage Screen

My Solutions:
•  Simplified by redistributing and changing the layout of some visual elements.
•  Added “My Cars” and “All Cars” filter buttons.

Current Boost Select Screen

This screen is not intuitive to first time players. What are these?

Proposed Boost Select Screen

My Solutions:
•  A simple fix was to add the title “Select a Powerup?”.
•  Used the same top bar as all other screens for consistency.

Current Loading Screen

•  Same issues as Race Details screen.
•  No back button.

Proposed Loading Screen

My Solutions:
•  Same fixes as Race Details screen.
•  Kept the top menu for consistency but disabled all buttons except back button.

User Journey From Home Screen to Single-Player Career Race

Here’s how the full journey from Home Screen to a single-player Career Race became:

Current Home Screen UI

Before declutter, new menu hierarchy & fixes

Proposed Home Screen UI Mockup

After declutter, new menu hierarchy & fixes

Mockup of Home Screen with New Menu

Home screen with new main menu navigation

Mockup of Home Screen with New Sub-Menu

New Single Player sub-menu navigation

User Feedback

Players gave a lot of positive feedback about these game improvements.
Most of them agreed that these fixes would make the game a lot more user friendly.