| Game User Interface Design |

Doomsday Fighter

This is a simplified version of 2019's NeXT design contest for Game UI design run by Ubisoft Toronto, which required crave exact specifications and application UI assets.

Project type: Game UI Design, Head-up Display layout, Design Challenge

My role: The project was completed by my own. I conducted research requirements and designed UI elements.

Tools: Figma, Adobe Illustrator

Skills: Competitive analysis, Design standards, Wireframe, Illustration, Design specification, Design system,

You’re a member of resistance on Earth in the year 2090. The world is a haven of technological wonders and feats, but is still plagued by the inevitable result of overpopulation, pollution, and corruption.

A corrupt AI is quietly controlling the governing bodies that rule this world's democracy. This AI is convinced that the human race must be eliminated to allow the Earth to return to an untainted state. The AI influences every governing body around the world, causing political chaos and turning humans against each other.

Your goal is to build your resistance and defeat this tyrannical AI for a chance to redeem the human race.

• First-person Action Role-Playing Game

• 3D open world

• PC and console rated

• Teen/Mature

• Minimum resolution: 1920 x 1080 pixels.

• Xbox One controller labels and icons when showing buttons/prompts.

• Game environment screenshots provided

• The Navigation:

  • Location: Middle Top of the screen

  • Size: 1400*100

  • Justification: When a page is selected, it will become the theme green color with a dot underneath.

• The Character

  • Location: Left of the screen

  • Size: 530*800

  • Justification: The right-faced 3D character is located at the left of the screen with a hand toward the right to lead the player’s attention toward the ability list.

• Equipped Abilities:

  • Location: Middle of the screen, around the character’s hand

  • Size: 165*165 for each ability

  • Justification: Three equipped abilities are located around the character’s hand to hint at a sense of ‘owned’ and ‘equipped’. I also use different colors and icons to distinguish the different statuses of abilities. The D-pad guide is on the top-right of each ability.

• Available Abilities

  • Location: Right of the screen

  • Size: 165*165 for each ability

  • Justification: There are also three statuses for available abilities, which are viewing, available, and locked. When the play selects any ability, it will rotate 90 degrees to be the same angle as equipped abilities, and a detailed explanation will appear on the right.

• Button Control Prompts:

  • Location: Bottom right corner

  • Size: 35*35 for each icon

  • Justification: They are located under the available abilities tree for the player’s convenience. Both text and icons are used to convey clear instructions.

• Player vitals

  • Location: Bottom left corner

  • Size: 390*110

  • Justification: the health bar (red) and nano bar (blue) are located at a corner that is easy to notice and check. It is a normal practice to locate it at the bottom-left corner of the screen.

• Equipped items & abilities

  • Location: Bottom left corner, right above the vital bar

  • Size: 80*80 for each ability

  • Justification: It shows which abilities the character currently has equipped. Since special abilities are available and ready to use only with a considerable nano status, putting them together can be easier for players to observe. The D-pad guide is on the top-right of each ability. Each ability has a progress circle around it to hint at availability. 

• Compass bar:  

  • Location: Top Middle

  • Size: 730*110

  • Justification: A navigational bar can steer the player toward their objectives or items of interest, which will be shown as icons on the compass bar.

• Minimap:

  • Location: Top right conner

  • Size: 390*220

  • Justification: Next to the compass bar, a small map can show the player their location in relation to the world and its inhabitants. It works well as a complimentary item with the compass bar to show locations of NPCs, missions, and items in icons.

• Objectives instruction:

  • Location: Top left conner

  • Size: 400*80

  • Justification: When there is a new mission, the objective instruction will appear to remind and instruct the player. Messages that appear on-screen to instruct or nudge the player. Along with other directional HUD elements, the instruction is also located on the top of the screen for consistency.