Redesigning Mass Effect Character Customization

* This is simply a UI/UX design exercise showcasing my knowledge and skills. I have not work with or for BioWare or Electronic Arts. I do not own the rights to logos, pictures, or videos that may appear and is used for educational purposes only.

Project Overview

Mass Effect is a role-playing first person shooter. It was released on XBOX 360 in 2007 then later released on other platforms like Microsoft Windows and PlayStation 3 in 2008. User interface design was often created by game developers which led to an unsatisfactory experience with their players. Mass Effect had many issues with the user interface throughout game play but I decided to focus on one area of the game.

The challenge was to redesign the user interface on the character customization screens.

The goal was to create a character customization screen that would give the players the ability to identify character feature changes through visual options.

Role: UI/UX Designer
Scope: 2 Weeks
Tools: Figma, Photoshop, Google, Pen and Paper, XBOX 360
Skills: Comparative Analysis, Sketching, Wireframing, Prototyping, UI Art Design
High fidelity wirframe

Understanding  Mass Effect Character Customization

I conducted a heuristic evaluation on the game looking to understand how to create a unique customized character. There were several different aspects of the character that could be customized such as pre-service history, psychological profile, and military specialization. Something that specifically stuck out to me was the facial customization section and from there I decided it was something that could be improved. Here are some insights:

Mass Effect profile screen

*Mass Effect on XBOX 360

Comparative Analysis

I performed a comparative analysis on other games where character customization was an important aspect of the game. The Sims catered to players that wanted full control on customizing with their in-game characters. This would be a great start to understanding how The Sims achieved the experience within their interface. I also looked into the user interface of Wii characters and received some great insight into their design.

The Sims 4 character customization

The Sims 4

  • Clear visual choices for customization
  • Comparable choices to make decisions easier
Wii character customization

Wii Avatar

  • Clear overview of possible choices
  • Facilitates returning to previous setting after changes
  • This interface have an array of buttons for selection that shows different shapes of facial features

The Problem: Players were unable to see all possible choices for facial features while trying to customize their character.

Grayscale Wireframes

After brainstorming and sketching my ideas I decided to start designing the low-fidelity wireframe. I thought to lay down the foundation and understand how these interactions will work with the PlayStation interface. Although I evaluated the game through the XBOX 360, I wanted to design for a different console. This gave me the opportunity to think of the interactions differently and how that would effect the players experience.

Wireframes

Hi-Fidelity User Interface

High fidelity wireframeHigh fidelity wirframe
* Video of prototype ( PlayStation controller used for interactions)

Final Thoughts

After completing this project there were several iterations I thought to do in the future to improve the way players interact with the interface. Here are some ideas that I felt could achieve this.

I found that my strengths really expressed itself through the brainstorming and ideation process, along with wireframing and interaction design . In contrast, I feel that I have the opportunity to grow and improve when it comes to research and understanding the players. I will continue to improve on these areas and progress in understanding UX and game design.