User Research, UX Design, UI Art, Interactive Prototypes
Mass Effect I is a cult favorite for it’s immersive narrative and expansive universe. However, many critics and players have criticized the confusing user interface for its complexity.
In this case study, I explored the process of redesigning some of Mass Effect I: Legendary Edition‘s (Xbox) screens to improve clarity and reduce information overload.
Expand study
Problem
Mass Effect’s character customization menus contain a lot of information, and does not communicate this information efficiently to the user. This case study aims to resolve the following issues:
Character customization occurs in two completely different places, the Equipment screen, and the Squad screen.
The equipment screens fail to show all items available in the players inventory. Only the items that the current character can equip are displayed.
All categories of equipment are shown on a wheel, making it hard for the player to see all categories available to them. There are nine categories total, 6 of them are traditional weapons, and then Armor, Omni-tools, and Biotic amps are listed.
The equipment screens only show five items at once, making navigating a 250 item list incredibly tedious.
Duplicate items are listed individually, inefficiently using screen space.
The effect of equipment bonuses to the players stats are never displayed.
The effect of upgrade bonuses to equipment stats are never displayed.
Game menu. Character customization occurs in Squad and Equipment screens.Equipment Screen
Research
I organized a user survey to develop player personas and collect insights on the favorite games of Mass Effect players. Using the player insights, I then completed a competitive analysis comparing the top three played RPG video games inventory screens.
Competitive Analysis
Using the data from the user survey, I found the top three RPG games played by the sample group. Then, I analyzed the inventory menus of each game to help decide on the UX direction for Mass Effect.
Baldurs Gate 3
The newest game in this comparison, Baldurs Gate 3 showcases a large grid system to organize inventory. Item details are present on the left side of the modal.
Numbers are used in grid panels to indicate multiples of the same item.
Character selection is available on the far left of the screen for the player to easily switch between character inventories.
Dragon Age: Origins
Also a Bioware game, Dragon Age: Origins inventory has a similar cluttered feeling when compared to the Mass Effect inventory menu.
Square panels to the left of the weapons list help the user see what is equipped.
A high level menu allows the player to leave the equipment screen and customize other features.
Player stats are displayed to the left of the menu.
The Elder Scrolls V: Skyrim
The Elder Scrolls V: Skyrim is a cult classic, and has a very clean and minimal UI setup.
Inventory is managed through scrolling lists. On a category selection, a child menu appears listing all the items the player has obtained.
The bottom right of the screen has an indicator of how the users stats change depending on the item shown.
Brainstorm and Ideate
I explored multiple avenues of displaying these menus through rough sketches and low fidelity wireframes.
Final Designs
For best experience, please view on desktop.
Crown Delights Deli
UX Design, UI Art Assets, Unity Game Engine
I designed the original UX/UI for Crown Delights Deli from it’s Prototype – Beta stages. This project was funded by the Alfred P. Sloan Foundation.
Crown Delights Deliis an educational 2D visual novel about the linguistic characteristics of “code-switching”. You play as Jules, a teenager who lands a job at Crown Delights Delia, a bodega in Crown Heights, Brooklyn. .
Players are given contextual conversation choices to choose from, based on the customer who enters the store. You can choose to speak a variety of different languages and dialects.
Expand study
UX Problems and Proposed Solutions
Problems:
Keyboard input to select answer choices was not intuitive to our playtesters.
The game needs a stylistic UI art direction, preferably in the style of a classic comic book.
The team wanted a “hand drawn” approach to their line weights. The current version here is still a little messy and not optimized for the screen
Proposed Solutions:
Switch the game from only keyboard input to include point and click. Keyboard input can still be a viable input method – but point and click should be the main source.
Since the game needs a comic book feel to it, I want the UI to have bold outlines and to stand out from the illustrations on screen.
Finally, now that I know the art direction- I am going to create clean base templates for text bubbles and text boxes while beginning to research potential fonts.
Art Direction References
Ideation and Wireframes
After doing some user testing and receiving team feedback, I decided to use the Blue as a mouse hover highlight. I decided against using the green as I did not want to use a color that was connotated with being the “right” answer as a selection highlight, and using the inverse black as deselect option was too stark of a contrast. I also resized the character response, as it was too big and overtook the screen.
Fonts
I still wanted to have a comic book aesthetic, so I was trying to find just the right comic book script font that feels casual and readable without feeling like an “in your face” action comic book. All caps fonts were eventually eliminated, as well as ones that looked too messy. I scoured through so many fonts. These were the final nine options. I ended up choosing Caveat Brush.
Final UI Asset Drafts
Since Crown Delights Deli is a game specifically about switching languages and dialects, we wanted to make that mechanic clearer to the player. One of the steps we are taking towards this is by labeling our text boxes with the language vernacular that the option is- as well as providing a large letter symbol for easy identification.
The text boxes take inspiration from the NYC MTA Subway system signage- and while the MTA signage is copyrighted and we can’t mimic it exactly, I tried my best to to take design inspiration from it.
A default and a hover state are mocked up here, as well as an interactive Figma prototype.
After receiving the Sloan Grant, We needed a team logo with very short notice (1 week production time). Luckily, I was able to work with our teams illustrator (Kyra), and together we were able to craft a savory logo for our team, baconeggandcheese. Due to our time constraints, we split our tasks. Kyra focused heavily on the lettering, while I created the buns in Illustrator and composited the final image.
Jam City UX/UI Internship
UI Art Assets, UI Animation, Unity Game Engine
Throughout my senior year of college, I interned at Jam City, working with the Cookie Jam and Vineyard Valley UI/UX teams.
I worked on some creative explorations, and implemented UI assets to game builds using Unity.
