Focus on simplicity, not complexity.

In both user testing sessions and on online forums, users complained about tedious upgrade flows and hidden information in the Hero Details and Upgrade flow of Injustice 2 Mobile. I redesigned the flow to create expediency in user tasks and to be scalable as the game progressed.

Hero Abilities Submenu, Injustice 2 Mobile

Hero Abilities Submenu, Injustice 2 Mobile

My Role

 

I was the project’s User Experience Designer, charged with conducting user research, wireframing, and user testing. I worked closely with a UI Artist to update layouts and rely more heavily on iconography to communicate value to users.

Objective

 

We wanted to update the Hero Detail Screen and Upgrade Flows in order to improve the player’s quality of life and create a scalable design that would accommodate additional abilities.

Research

 

We performed exploratory user testing sessions to watch how players interacted with our existing game as well as kept up to date with various discussion forums. We noticed that players grew frustrated by the slow process of upgrading abilities, which forced them to level up one level at a time, vs. to the max level they were capable of based off of available currency. User testing also revealed that the gear system was a bit clunky with small equip/unequip buttons that players had trouble interacting with correctly. 

Design

 

The original design of the Hero Detail screen used a tabbed sidebar for most actions such as viewing and maintaining Abilities, Talents, and Stats. Gear slots were shown at the bottom of the screen, and players had to tap into the individual slot to maintain the gear piece. I moved some of the elements around and created three tappable areas for Abilities, Gear, and Talents that also provided a brief summary of the player’s current progress within those categories. Tapping into a category took the user to a full submenu where they had ample space to peruse the different elements.

For upgrading Abilities and Gear, we implemented a dynamic slider that allowed players to level up the ability to a desired amount based off of what currency they currently owned. This abbreviated the upgrade process immensely. The new Abilities submenu allowed the players to see more abilities at a time, while also sorting them based off what type of ability they were (passive, supermove, etc.). Working closely with a UI Artist, we included iconography on the ability buttons to quickly inform the user of what stat buffs they were receiving from the ability. I designed this submenu to also be scalable as game design was working on Legendary Characters that boasted additional Passives.