Blitz Brigade

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 to go along more with its realistic 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

  • Home screen is like a portal to many sub screens with lots of hidden options.
  • Layout is not optimal. In general, everything looks messy and clumsy as if it’s a collage made of randomly cut and pasted pieces.
  • Shopping cart on top left is unclear. It looks like a “shop” icon but 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

  • 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 screens.
  • I added a default presets section so that players don’t need to manually specify it each time they play like they currently do.

 

Current Play Screen

  • Game modes are unclear.
  • Looks messy and inconsistent with the rest of the game screens.

Proposed Play Screen

  • Tidied the layout, emphasized the 2 available play modes, and explained them by adding “single” and “multiplayer”.
  • Moved the “armory” button to the bottom menu to be consistent with the rest of the screens.

 

Current Map/Mode Select Screen

  • Spacing and alignment of elements is not optimized.

Proposed Map/Mode Select Screen

  • I fixed the alignment and spacing of the elements.
  • I moved the boost button in the bottom menu to a later screen and replaced them with the shop and invite friends buttons.

 

Current Side Select Screen

  • Bottom section is inconsistent with previous screens.

Proposed Side Select Screen

  • Added a bottom menu with boosts and armory 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

  • Inconsistent with previous screens.

Proposed Class Select Screen

  • Made it consistent with the other screens.

 

Current Squad Screen

  • Spacing and layout can be optimized, and it’s not consistent with previous screen.

Proposed Squad Screen

  • Fixed the spacing and layout.
  • Made it consistent with the other screens.

 

User Journeys From Home Screen to Action Phase

 

Using “PLAY” button:

Same as current user journey but with some UI & UX improvements.

Using “QUICK PLAY” button:

Just 3 buttons pressed instead of 6.

 

Current Home Screen UI

Proposed Home Screen UI

 

Current Shop Screen UI

Proposed Shop Screen UI