Red Noir UI Design

Challenge

I was challenged with designing the initial home screen for an action adventure game. The exercise was to create a stylish landing page for players to immediately understand how to navigate and start the game.

I was tasked with creating the user interface for the settings, load/save screen, and credits pages. Additionally, I was challenged with designing the story of the game. To outline the narrative, players would experience if they were able to play a completed version of the game as well as to showcase characters they may experience throughout the title.

Outcome

The task was completed in the allotted 48-hours for the game jam. The artwork is merely placeholder and was grabbed from around the internet or AI-generated using Mid Journey's creation tools.

The load screen for the game has a polished look that tonally compliments the games Martian aesthetic. The samples show proof of concept and the design process which led to the completed result. If we were provided with more time, I would have liked to expand the UI samples and show how in-game UI would appear.

Overview / Game WOrld
Landing Page
Settings Page
Quest Menu
Additional Pages
Game Design Document

Overview

Game World

Red Noir is an Action/Adventure survival game that relies heavily on crafting and stealth. Tonally, Red Noir transitions through a variety of sub-genres including horror, noir, and mystery, as players navigate across unsettled Martian landscapes to solve a murder, all the while being pursued or assisted by a variety or Martian natives.

300 years after the colonization of Mars, a naïve medical examiner must work with the father who abandoned her at birth, to investigate her brother’s sudden death, while traversing the explosive politics and unforgiving elements of the Martian frontier.

You play as Ayla Loh, a brash medical examiner from Earth who was called to the red planet by her brother, to help investigate a series of unusual deaths. Unfortunately, once Ayla arrives on Mars, she discovers her brother has died due to the same mysterious illness, and now the only person she can turn to for help is the father who abandoned her 30 years ago.

The Martian frontier, filled with vast deserts, endless dust-storms, and sparse populations are reminiscent of the American old west of Earth. The outdoor levels will be expansive and barren landscapes with unpredictable weather. However, limited to their protective canopies, mining tunnels, and storm shelters, the indoor spaces are dimly lit, claustrophobic mazes.

The outside world will be red and menacing both hot at times and freezing at others, with a lack of oxygen, lack of gravity, uncontrollable dust storms, and chaotic electrical storms. The inside levels will be a blend of futuristic western and modern steampunk - The technology is futuristic but limited.

The underground levels will be dark, claustrophobic, and puzzling. The goal of these levels is to create a sense of vast exploration narrowed by the constant threat of dangerous elements and players. The characters will be spurred forward along a veiled linear path as they dive deeper into the dangerous world.

Landing Page

The landing page for the game came together rather quickly. We decided to source a futuristic looking picture of Mars and apply a slightly gaussed-mask over top of it, to not distract from the game's selection elements.

The title also was a quick selection. I provided three possible font options, but it was assumed that the red planet of Mars would make up the letter "O" in Noir.

The initial concept utilized simple black text with lightly reduced opacity to convey which items were not selected, and bold text with an arrow to indicate the current selection.

In the final iteration we altered the font to convey a more futuristic look while still remaining stylish, simple, and non-distracting. We determined that the selected option should be featured in red text, while non-selected text should be white text. Next we replaced the simple arrow with a stylish red underline that comes to a point to encourage user engagement. Lastly, we removed the gaussian blur and adjusted the images color to enact a warmer and possibly more exciting background.

Settings Page

The settings menu was intended to reflect which settings a new player may want to adjust. This includes game difficulty, the in game heads-up-display, preferred controller layout, screen brightness, and sound output.

The text panel on the right was a placeholder to help explain which options were available under the selected option, and it would provide a brief explanation of what each option would do.

In the final rendition, the primary font was updated to reflect the new font from the landing page. The gross red flag was removed and replaced with a (moderately) more stylish screen-indicator text.

A final note, the gaussian mask was reapplied in this screen to help players read the text being displayed.

Quest Menu

2023 Redhill Games UX Design challenge Winner

The quest selection menu screen was an exciting challenge for me.

It provided me the opportunity to flesh out many new assets that I've been wanting to implement, from iconography to To menu hierarchy. I was tasked with creating 6 unique quests, each with increasing stakes, resulting in rewards with increasing values.

I knew that each quest Must contain a story within itself, however I knew the culmination of all 6 quests must tell a complete story of it's own.
I wanted the iconography to be something completely unique, but with little explanation would be relatable to other gameplay experiences.
Quest hierarchy must be intuitive. Each selection must stand apart from the previous and for this I designated priority by altering the opacity. Additionally, I applied a gaussian blue to quests which were not unlocked.
(I reduced the blur to allow for ease of reading)

Additional Pages

The "Continue Game" page was initially labelled as the new game page. This didn't make sense as a new game would not contain a separate page. This was updated as well as the background so as to reduce load time and reduce confusing background imagery. We also added an image and a brief explanation of where players left off to help confirm that it was the desired continue file.

Lastly, we included a credits page to highlight all of the amazing contributions from the team.
(it was just me)

Game Design Document

Everyone on Mars is smarter than the Rookie detective. She has to rely on her particular skillset and training to navigate the unfamiliar terrain.

Atmospheric poisoning is a constant threat. The people of Mars are living through terraforming and their bodies continue to adapt. Some can breath in pockets of low carbon, but they still get sick if in it for too long. People from earth however get sick and delusional, their eyes develop purple striations the longer they are deprived of oxygen rich environments.

Characters will have to wear breathing apparatuses or full oxygen masks when exposed to the outdoors. These can appear in a variety of styles ranging from mouth and nose only, to complete coverage. Bio-enhanced players exist in this world, and while the technology is futuristic, it doesn't grant players superpowers. Characters will wear a range of arm, leg, and eye prosthetics.

Combat Mechanics

Red Noir will be designed as a 3rd-person shooter that will utilize stealth and crafting mechanics. The world is designed around the belief of no firearms, so the use of traditional guns will be incredibly rare, but in its place will be futuristic interpretations of weaponry. Rivet Guns, Laser Torches, Pipe bombs, Airlock traps, etc. As players progress through the story they will learn new techniques for crafting more advanced weaponry.

Characters will also utilize hand-to-hand combat, with progressive fatigue values. The more fatigued a player is, the slower and weaker their fighting becomes. The purpose is to restrict fighting to only when absolutely necessary. Players will encounter a variety of enemies including but not limited to - Traditional organic humans, bio-enhanced humans, oxygen-poisoned rage opponents, armored opponents, and operated exoskeleton suits.