Mass Effect UI Redesign

Mass Effect UI - Redesign


Redesign of some of the UI-elements in the Mass Effect talent scene



  • More indicators for visualizing progression of experience and paragon/renegade

  • More graphical elements with text


  • Unclear display of experience progression and paragon/renegade progression

  • Oddly placed text


In the talent scene of Mass Effect the following information and graphical elements are displayed:

  • Red: Renegade score (moral ranking of the character)

  • Blue: Paragon score (moral ranking of the character)

  • Yellow: Experience (level)

  • Purple: Talents/skills

The paragon/renegade is dependent on how the player choose to solve different situations based on moral choices. The more paragon/renegade the character has the more dialog options will be available.

The experience of the character is displayed via numbers, where the maximum number for the next level is to the right and the player's current experience to the left.

The player's talents are arranged into a list that displays the different talents vertically. With every level-up the player can spend points to gain more talents.

While caught in a tricky situation the player can use certain dialog-options (paragon or renegade) to get out of it.

While completing quests the player is rewarded with experience, "moral-points" etc


That was the talent scene

Onto the elements that could be improved.

The meters for paragon/renegade are unclear when it comes to showing how much of the two "moral-points" the player has. Sure there are small indicators on them, but they don't show anything, no value or rank.

Like here, can you tell me how much of paragon the player has? How much renegade the player has? There are 16 bars on each meter, so is it 5/16 paragon and 1/16 renegade? How much is the maximum? Can't be 16 because the payer can be rewarded with up to 24 of paragon/renegade.

Whenever the player gains moral-points the amount is displayed in numbers. But once again, how much is the maximum amount?

Here the player is rewarded with 24 paragon-point. But since the player has no knowledge of how much this amount is compared to the maximum amount the value of this reward gets obscured.

While in a dialog with an NPC the player is required to have a certain amount of talent points on either "Charm" or "Intimidate" to execute some dialog choices. If the player doesn’t have that then the action can't be done. But the player can't see how much talent points is required. So the player has to guess how much is required.

So the player obviously doesn’t have the right amount of "Intimidate" to make the renegade choice in the dialog above. But how much more is needed? For each "triangle-icon" reached it says that the player unlocks more dialog options. But how many them does the player need to unlock before the renegade choice can be made?

As for the display of the character's experience, it is shown in numbers. This makes it hard to get a fully comprehensive view of the character's level-progression. Sure at earlier levels this may not be hard, but once the player starts reaching the higher levels the numbers get bigger.

And finally there are a lot of text in the scene that are placed in a rather strange way.

  • "Talent" just sitts out in the void and feels a bit disconnected from the window it is suppose to relate to

  • "Experience" is placed under the numbers related to experience, while "Health" is placed next to the text related to health

  • "Points" is placed at the bottom right and also feels a bit disconnected (or far away) from the talents it is connected to


So, let's do something about it.

To clean up some of the disorganized text and the unclear progression, the redesign in the talent scene would be the following:

  • Red and blue: Now the amount of renegade/paragon points are displayed (Let's say the maximum is 100)

  • Green: The "Health-text" is now placed above as a header over the health

  • Yellow: The experience is now visualized with text and a progression bar and is placed above the talents, in order to highlight their dependency with each other more. The "Experience-text" is also removed and replaced with just the current level of the character

  • Purple: The "Talents-text" is now placed within the same window as the listed talents and feels more like an actual header. Also the "Points-text" is placed closer to the experience bar, to highlight their dependency with each other

And to solve the problem with showing how much talent the player need for a certain dialog choice there should be a graphical representation of how much is required.

Remember the meters for "Intimidation" and "Charm"? There were three "triangle-icons" that once unlocked gave the player more dialoge options. So the three bars in the picture represents those three triangles and in this case let's say that all of them needs to be unlocked for this dialog option.