Asphalt 8

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

  • Current Home screen is too cluttered.

Proposed Home Screen

  • Grouped all race modes under either “Single” or “Multiplayer”.
  • Re-grouped other icons based on similarity & function.
  • Simplified the top bar and made the icons clearer.

 

Proposed Home Screen 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

  • Changed the swipe into a 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

  • 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

  • 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

  • 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

  • A simple fix was to add a title.
  • 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

  • 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

 

Current Home Screen UI

Proposed Home Screen UI Mockup

 

Proposed Mockup of Home Screen Submenu