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.

Current Home Screen

Problems:
•  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.

Current Season Select Screen

Problems:
•  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

Problem:
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

Problems:
•  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

Problems:
•  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

Problem:
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

Problems:
•  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.

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