Blitz Brigade UX Case Study
Streamlining the Transition From Home Screen to Gameplay
The Game:
Blitz Brigade is a mobile multiplayer first-person shooter game by Gameloft.
The Problem or Challenge:
The game’s pre-gameplay screens are a bit complex with all their variables. The game has way too many steps, screens and things you have to select each time you want to play! Some of those things are redundant. Those screens and steps need to be simplified because they are confusing for first-time players, and annoying for regular players. Some UI elements look like they’ve been messily and randomly placed, some others are redundant, and some have bad placement in terms hierarchy of importance.
My Role:
Come up with a better user experience for the game, and suggest UI fixes as well.
My Process:
- I first played the game for several days to get really familiar with it.
- I researched and played other similar mobile multiplayer FPS 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 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 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:
User Experience:
Let’s reduce the number of steps and taps from the home screen to the action phase. We can do that by adding default selections.
We will also be giving the shop screen a slight revamp to improve its user experience and look based on the hierarchy of its elements.
Art Direction:
How about giving the game a more serious combat or war-like feel instead of a 2D comic one to go along more with its 3D graphics?
User Interface:
Let’s make sure that everything is consistent, clear, well designed, well placed, and looking professional.
Below are my wireframes and some brief explanations.
Current Home Screen
Problems:
• Home screen is like a portal leading to many sub-screens with lots of hidden options.
• Layout is not optimal. There’s no clear hierarchy. Elements look like they’ve been messily placed as if in a collage.
• Shopping cart button on top left is unclear. It looks like a “shop” icon but it could also be “bundles”. Also, button placement is overlapping and going below the header menu, which makes it look like a mistake. The button is also redundant since there’s another “shop” button on the bottom.
• The “VIP” element in the top header is given way too much importance because of its size and the blinking “?” compared to the rest of the top header elements.
• The settings icon is awkwardly placed in the bottom right. Users are generally used to finding it in a top corner.
Proposed Home Screen
My Solutions:
• I tidied the layout: I re-grouped and reordered elements and buttons in the top and bottom menus.
• I added “quick play” mode, and emphasized the 3 available play modes.
• Moved the “armory” button to the bottom menu to be consistent with the rest of the game’s screens.
• I added a default presets section so that players don’t need to manually specify them each time they play, like they currently do.
Current Play Screen
Problems:
• Game modes are unclear.
• Looks messy and inconsistent with the rest of the game screens.
Proposed Play Screen
My Solution:
• Tidied the layout, emphasized the 2 available play modes, and explained them by adding the words “single” and “multiplayer”.
• Moved the “armory” button to the bottom menu to be consistent with the rest of the game’s screens.
Current Map/Mode Select Screen
Problem:
Spacing and alignment of elements is not optimized.
Proposed Map/Mode Select Screen
My Solutions:
• I fixed the alignment and spacing of the elements.
• I moved the boost buttons from the bottom menu to a later screen and replaced them with the “shop” and “invite friends” buttons.
Current Side Select Screen
Problem:
Bottom section is inconsistent with previous screens.
Proposed Side Select Screen
My Solutions:
• Added a bottom menu with boosts and armory buttons, while making sure it’s consistent with previous screens.
• Added a mini default presets section on top in case players want to change anything.
Current Class Select Screen
Problem:
Menu and flow inconsistent with previous screens.
Proposed Class Select Screen
My Solution:
Made it consistent with the other screens.
Current Squad Screen
Problem:
Spacing and layout can be optimized, and it’s not visually consistent with previous screen.
Proposed Squad Screen
My Solutions:
• Fixed the spacing and layout.
• Made it consistent with the other screens.
User Journeys From Home Screen to Action Phase
I optimized the user journeys from the Home screen to the actual action phase. Here are how the new user journeys became:
Using “PLAY” button
Same as current 6-step user journey but with some UI & UX improvements.
Using “QUICK PLAY” button
Players can start playing by just pressing 3 buttons instead of 6.
I created preliminary UI mockups for the new suggested Home screen and Shop screen to better visualize them.
Current Home Screen UI
Before new hierarchy, grouping and default player presets introduction
Proposed Home Screen UI
After new hierarchy, grouping and default player presets introduction
Current Shop Screen UI
Before restructuring
Proposed Shop Screen UI
After restructuring
User Feedback
The game’s screens were tested with players and their feedback was mostly positive.
Most of them said that the game’s proposed UX seems more user-friendly, and the new improvements were quite convenient.