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.
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/screenshot-asphalt-8-1.png?resize=447%2C251&ssl=1)
My Solution & Results:
Below are my wireframes and some brief explanations.
Current Home Screen
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-1a.png?resize=447%2C252&ssl=1)
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
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-1b-1.png?resize=447%2C252&ssl=1)
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.
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-1c.png?resize=1047%2C536&ssl=1)
Current Season Select Screen
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-2a.png?resize=447%2C252&ssl=1)
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
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-2b-1.png?resize=447%2C252&ssl=1)
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
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-3a.png?resize=447%2C252&ssl=1)
Problem:
Locked races should be visually more distinguished and differentiated than unlocked races.
Proposed Race Select Screen
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-3b-1.png?resize=446%2C251&ssl=1)
My Solution:
Emphasizing the lock icon and adding a semi-opaque layer would do the trick.
Current Race Details Screen
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-4a.png?resize=447%2C252&ssl=1)
Problems:
• Current star requirements are not instantly intuitive.
• Race info is scattered.
• “Add” button is ambiguous.
Proposed Race Details Screen
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-4b-.png?resize=447%2C252&ssl=1)
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
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-5a.png?resize=447%2C252&ssl=1)
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
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-5b-.png?resize=446%2C251&ssl=1)
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
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-6a.png?resize=447%2C252&ssl=1)
Problem:
This screen is not intuitive to first time players. What are these?
Proposed Boost Select Screen
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-6b-1.png?resize=446%2C252&ssl=1)
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
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-7a.png?resize=446%2C251&ssl=1)
Problems:
• Same issues as Race Details screen.
• No back button.
Proposed Loading Screen
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-7b.png?resize=445%2C251&ssl=1)
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:
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/asphalt-8-journey-1.png?resize=1047%2C1365&ssl=1)
Current Home Screen UI
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/Screenshot_2014-10-22-20-20-05.png?resize=1150%2C647&ssl=1)
Before declutter, new menu hierarchy & fixes
Proposed Home Screen UI Mockup
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/mockup-0.jpg?resize=1136%2C640&ssl=1)
After declutter, new menu hierarchy & fixes
Mockup of Home Screen with New Menu
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/mockup-1a-1.jpg?resize=1136%2C640&ssl=1)
Home screen with new main menu navigation
Mockup of Home Screen with New Sub-Menu
![](https://i0.wp.com/karimmuhtar.com/wp-content/uploads/2017/09/mockup-1b-1.jpg?resize=1136%2C640&ssl=1)
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.