KOTOR Menus Redesign (WIP)

This is a redesign of Knights of the Old Republic's Pause Menus and sub-menus within  it. I used Adobe XD to create the Wireframes.

Design Process

Research

To start this project I researched all of the menus within KOTOR. Once I had a list of the various menus I then started to research more modern games that contained the same type of menus. SOme of the games I looked at are:

  • Dragon Age Inquisition - Inventory and Character Menus

  • Destiny 2 - Equipment Menu

  • Mass Effect Andromeda - Companion and Pause Menu

  • Horizon Zero Dawn - Equipment menu

Plan

Once I had a rough idea on where I wanted to go with the menus based on my research I created a plan. I wanted to start with the menus that mattered the most, which I deemed to be the Pause menu, Character menu, and the Inventory menu.

The Pause menu is where you go to access all of the other menus so it was important to start on that. The Character menu is where players level up and it has a lot of different elements that need to be shown. Balancing the amount of information players will see so they're not overwhelmed is important. Lastly the Inventory menu is a place players will constantly go back to. It also would be one of the things needing the most time because you need to show a lot of different information regarding the equipment. If I was actually developing this fully the equipment menu would be reused for a shop menu as well.

Final High-Fidelity Wireframes

Pause Menu

LightMenu_-_MapSelected_–_1.png

Character Menu (Level Up)

Dark_-_CharacterMenu_–_19.png

Equipment Menu

Light_-_EquipmentMenu_–_6.png

Squad Menu

CompanionMenu_–_3.png

Feat Menu (Level Up)

FeatMenu_SmallerRight.png

Journal Menu

JournalMenu_Skewed.png

Transitions and 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.

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 in 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.

Wireframes

Pause Menu

Character Menu

Equipment Menu

Squad Menu