KOTOR Menu Redesign

(2020)

Goals

To maintain my UX and UI skills post Graduation I wanted to redesign some of Knights of the Old Republic's Menus within Adobe XD. My main goal was to update the overall style as well as improve the holistic Experience of the game's menus.

Research & Plan

I started by researching similar modern games.

Dragon Age Inquisition - Inventory and Character Menus
Destiny 2 - Equipment Menu
Mass Effect Andromeda - Companion and Pause Menu
Horizon Zero Dawn - Equipment menu

After researching I created a plan deciding to start with the Primary menus players interacted with, the Character Menu and the Inventory, since those need to be the easiest to understand and navigate and will help in creating the rules for the other menus. I also decided to tackle the Pause Menu between screens as it was the most straightforward and set the scene for the rest of the screens.

Mid and High-Fidelity Wireframes (2020)

Pause Menu

Updated to standard Bioware Radial Menu
Map in Center for quick access
Assigned most common interactions to the NESW positions

Character Menu - Overview

Simplified Alignment Screen and Attributes Screen into 1
Used consistent Iconography to callout Skills
- Kept Attributes indicated by Text to separate the features
Utilized the background across screens to indicate Alignment

Inventory Menu - Weapons

Utilize consistent bump out highlight
Indicate who has an item equipped on the Item button
Utilize L-stick to apply filters based on Weapon type
Indicate weapon type with consitent iconography

Squad Selection

Utilized the same Alignment and character indication for Squad Selection
Indicate selected Squadmates with Color and background appearances

Journal

Grouped Quests based on Planets to help with player decision
Utilized icons and colors to indicate quest statuses
- New Progress
- Not Started
- Objective available
Grouped Active Quest at the start for easy access
- Indicate Planet Location to help with Navigation
- Can still access from the Planet Category

Transitions & Animations

Transitions are important to consider with any menu design. They need to be fast enough so immersion isn't broken, but they also need to not jump from one area to the next otherwise you will again break immersion. My next step will be the animations, but for now this is my plan.

Opening the pause menu should look almost like billowing clouds expanding from the center to fill the screen. To the menus from the main Pause menu, there would be a black billowing effect from the inside that dissipates to show the menu. The sub-menus within the menus would slide in to mimic LT and RT navigation.

To make the menus feel less static the black and green holograms will have a slight movement of the lines and flickering. The goal is to resemble the typical blue holograms from the Star Wars universe. It will be important to do this animation in a way that it doesn't take away from anything else on the screen, but make sure it isn't too subtle as well. There is a chance that this animation could be too distracting so a backup to that idea is to have the background of each screen move. That would be the cloud texture moving around and the location background to have something happening on the screens or around. Whenever a character is shown in a menu they will have an idle animation where they shift on their feet.

Identifying Issues

Looking back on my wireframes after being in the Industry for 3 years I've noticed a lot of problems on each screen. If I were to revisit this project I would want to start from scratch with what I now know and use Figma's Components and Styles to make sure the screens are consistent. I also lacked proper information on Accessibility at that time and there are a lot of visual Accessibility issues within these wireframes I would want to address from Colors, Size, and spacing. I went into High-Fidelity without having each screen and sub-screen laid out which was a mistake because I didn't verify each screen together to make sure navigation and information delivery was consistent. Lastly, when I first laid out a plan it was too high level and I needed to create a Site map from the original game to help make sure I accounted for each feature in my redesign because I missed extremely key elements such as swapping between characters due to that oversight. With a site map, I would then do a drawover on what could be improved, create a site map for my redesign, and finally begin the wireframes. My overall UX process was missing in this and I went into UI mode which was a fundamental mistake.