To get a better idea of what makes game UI “good,” I conducted a competitive analysis between three games that are celebrated for their UI: Dead Space, Persona 5, and Tomb Raider (2013). From this analysis, I concluded that perfection is not possible due to subjectivity and scope. Although players prefer consistency, functionality, and visual appeal.

I conducted a survey showing participants the original screenshots from Mass Effect and asking about what they thought about certain elements in the UI.

From my survey, I was able to create 3 personas representing the users interested in video game UI. One represents someone who works in the game industry and is very knowledgeable about game UI, one represents a more casual player who is a fan of the game, and one represents a player who is not familiar with the Mass Effect franchise, but is still knowledgeable about game UI and loves games with mods.

For the user stories, I thought of all the possible things a user would want to see and do when navigating through their equipment. After prioritizing them, I chose the following to focus on:

I took the user stories and iterated each step in those tasks to come up with the user stories below:

After meticulously creating the content strategy, I drew sketches and iterated digital wireframes for all of the pages needed for the user flows.

As this is a redesign, I wanted to maintain the original look, but at the same time give it a more modern feel. I took screenshots of the original screens and used the color picker to see all of the colors that were used. I scaled that down into a color palette. I also researched what typeface was used for the original and found a google font very similar to that. I played around with that typeface to figure out sizes and weights I wanted to use and also found a complementary typeface that helped maintain the futuristic look, but was better suited for long paragraphs. I consolidated these assets along with some button and iconography work into a style guide.

I generated some Hi-Fi Mockups and turned them into a Prototype. After some feedback on the visual success of the still mockups and the first round of user testing, I successfully made the screen easier to read with more negative space. The first iteration was a little busy and more prone to eye fatigue. My second attempt displays the same amount of information more effectively and is also more accessible.

After more testing of my prototype, I made the following changes to create a third iteration:

I got one more round of feedback on my prototype. The following changes were made to make the final iteration:

For this project I wanted to focus on my visual/UI design skills. I feel fairly pleased with my image editing and iconography creation skills and will continue to practice and hone them for future projects. I found that there’s so many possibilities in game UI and no single “right way” to go about it. What some users liked or thought was obvious, others did not. If I had more time, I would create hover states for every clickable item in the prototype, create a details page for every equipped item, have every item type clickable/viewable (can only view assault rifle and shotgun currently), cut/paste images of all squad members in the game so you can actually switch characters, and maybe even create a separate prototype for a console version as that interface would need to function differently.