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.
Come up with a better user experience for the game.
- 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
• 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
• 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
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 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
• 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
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.