Jalen "Jax" Taylor - Mass Effect Inventory Redesign

Project Description

My redesign of the iconic Mass Effects inventory was more than a stylistic change. Games have changed extensively since the release of the first Mass Effect. Though innovative and interesting at the time, players today are more focused on ease of use rather than stylistic differences.

So I took a more user-friendly approach to an inventory system. But in order to get from where Mass Effect left the inventory system to my ideal system, I needed research, modern competitive analysis, and a whole new design.

Research

Technology & Tools

Adobe Illustrator

Adobe Photoshop

Adobe Illustrator

All of the graphical changes were made in Adobe Illustrator. Illustrator was the main application because of its ability to create clean vectors. That alone made creating designs to put into the Sci-Fi menu easier. The ability to shift asset sizes without worrying about pixelation was another plus of using Illustrator.

Adobe InDesign

Normally Adobe InDesign is used for print works. But I find it useful for laying out the grayscale wireframes especially when text is the main focus. Utilizing in-depth spreads and text manipulation, I was able to create a style guide and grayscale mockup quickly and cleanly with relative ease by using InDesign.

User Interface Misses

The general information that the player needs exists in the UI. But that's not all an interface should do. Players shouldn't dread going into menus to do something that will happen thousands of times over the course of a playthrough. And so after playing the game and using the interface, I created a list of fixes that I would set out to accomplish with my new design.

• Color Scheme

• Confusing Icons

• Awful Comparison User Interface

• Useless Detail Screens

• Haphazard Layout of Inventory

• Large Section for little Information

Competitive Research

Monster Hunter: World

Monster Hunter has always done a fantastic job condensing vital information and making it palatable. Monster Hunter: World was no exception. These are some of the aspects I wanted to employ in the Mass Effect inventory redesign.

Takeaways

• Small inventory

• Equipment shown based on a chosen section

• Status and stats are shown with equipment

• Awful comparison user interface

• Robust sorting criteria

• Tutorial and tip screen

Monster Hunter: World - Change Primary Equipment + Capacity

Monster Hunter: World - Change Necklace + Status

Monster Hunter: World - Equipment Box + Status

Monster Hunter: World - Change Primary Equipment + Status

Borderlands 3

Borderlands often takes its sci-fi designs and utilizes a diegetic UI to make the menus fit the theme. Borderlands follows suit and enhances the inventory system of the previous games.

Takeaways

• Equipped/Inventory on different halves

• Player showcasing weapon

• Hovering gives more details

• Formatted money

• Detailed sort methods

• Concise weapon details

• Button inputs next to applicable sections

Borderlands 3 - Full Inventory + Rarity Search

Borderlands 3 - Full Inventory + Manufacturer Search

Borderlands 3 - Weapon Stats + Score Search

Borderlands 3 - Inactive + Score Search

Dark Souls: Remastered

The Dark Souls UI leans heavily on recognizable icons and iconography. The belief in "if it isn't broke, don't fix it" works well, and proven ideas can be refitted for a variety of situations.

Takeaways

• Easily Recognizable Icons

• Differentiating Colors to show changes

• Usable Equipment is shown in all white

• Various defense types are shown next to the armor

• Inventory Sections are shown by icon

Dark Souls: Remastered - Equip Primary Weapon + Character Stats

Dark Souls: Remastered - Full Character Stats

Dark Souls: Remastered - Weapon Inventory + Character Stats

Dark Souls: Remastered - Item Inventory + Character Stats

Fallout: New Vegas

Another heavy hitter in the diegetic UI is Fallout: New Vegas. Lauded the best in the Fallout series, the player in the series is always accompanied by a Pip-Boy. This Pip-Boy is the UI for equipment, health, and quests.

Takeaways

• Separated Sections for Items and Equipment

• Image of Weapon and Stats on hover

• The control scheme is the same anywhere in the menu

• Usable Items Effects Explained

• Strong Aesthetic Menus

Fallout: New Vegas - Aid Inventory + Character Vitals

Fallout: New Vegas - Limb and General Health

Fallout: New Vegas - Character Stats + Character Vitals/Exp

Fallout: New Vegas - Weapon Inventory + Character Vitals

Early Designs

Mid-Fidelity Wireframes

The preliminary designs allowed me to settle on my placement of vital information for the player was visible and easy to locate. Taking a few ideas from the competitive analysis, I shifted the original design closer to modern standards. I also wanted to make sure that the information presented was easily accessible.

• Inventory on both sides of the screen giving more room for the additional weapon stats and the character model.

• Inventory is clearly labeled for equipped and backpack.

• Each weapon/armor is broken up by the type of weapon/armor.

• The control scheme for using the inventory is also plainly posted.

• The finite resources (ie. - health and grenades) are shown with upper limits in the upper right corner.

Styleguide

The style guide was essential for the entirety of the redesign. And that is because I wanted to keep the original idea of Mass Effect, but also expand on some ideas that weren't implemented in the original design.

• Text Hierarchy

• Color Palette

• Iconography

One aspect that was left lacking was the use of text in the original design. The hierarchy of text in the original design is lacking in definition. There are places where the text blends with other sections of text because they look similar. So by introducing another font, it adds a layer of difference in important and general information.

Another lacking aspect was the color palette employed by the original Mass Effect. The contrasting red, blue, green, and orange works in the short term. But the player will be looking at it hundreds of times throughout a playthrough. The accessibility of those colors doesn't work well because most colors have the same saturation.

The last focus I wanted to recreate was the iconography. It is difficult for players to figure out symbols they are not used to. The different icons for health, grenades, weapon types, and weapon modifications are odd and not instantly recognizable. So removing the unfamiliar aspect allowed me to focus solely on having recognizable icons that could be understood at a glance.

Post Mortem

This project was the first time for me to shift an existing design into something modern and fresh. The realization that games have come a long way in regards to accessibility made me ecstatic. As a community, we have focused on allowing more people the ability to play more games. Learning what was acceptable for good UI in the mid-2000s and being able to see what needed to be changed was a confidence booster. It was a sign that showed that I was able to perceive the good, the bad, and the ugly when it came to interfaces. That realization coupled with my newfound love of style guides and accessibility made the Mass Effect inventory redesign a worthwhile project.

Final Designs