When creating games, UI problems can arise so we look to popular conventions within the genre for an idea. Some of the examples we researched were health bars in other battle royale games as that information is vital to convey to the players. These games tend to be competitive so it’s best to avoid having it in the middle as that may obstruct crucial in-game information.
‍
The map seems to always need to be at the top right. Other things considered were how many games handled elimination and everyone adds it right below the crosshair according to the research.

Moodboard

I started to explore how horror movies tackle their art, exploring from black and white to some highlight colors. A discard pile was made to keep track of the considerations of art that was used until it all came together. To figure this out we had to determine what the game is and what it is not.I want a horror game but I can't have it be disturbing, walking the fine line of being violent but not gory.

I want it colorful like how some old school horrors showcase their atmosphere but not candy-coated, with the elevator pitch-
 "It's Fortnite meets Stranger Things Monsters"
This game has you create monsters, and use iconic weapons like Freddy Krueger's claws.
Capturing the mood was crucial so I kept not limiting the ideas to only one thing so I kept looking for the tone with a few images and highlighted what they shared in common that would match my description.

Sketches

Starting with the Big 3, those being the HUD, the inventory screen, and a pop-up, brought challenges.

The HUD
Thanks to research, I explored having the weapon UI vertically or horizontally. I did various variations and the director gave me notes for a smaller map and gave me a challenge to showcase ally health. The unique quirk in the battle royale genre is the map being always on top right, and health on the bottom left.
‍
The Inventory screen
I explored the weapon slot as a vertical flex, however as this is a console game,  I plan on players using RB and LB to swap weapons, ultimately I decided to change the weapon slot going for a horizontal flex.  The inventory proved to be a challenge. I explored having the weapon image be in half the screen covered by text, but my director suggested not to cut images in half. I eventually decided that 1/3 layout never goes wrong and that brought the solution to the issue.
‍
The pop-up
The pop-up was the most relaxing screen to create. With the director's notes I concluded that buttons should be out of the pop-up window and the scroll bar should be controlled via the right stick or left sticks corresponding to their respective axis. This made for a pretty nice layout.

‍The HUD
I opted for the ally health to be a circle icon based on the sketch notes so it would not take up the whole space. The character icons presented a new issue being how to showcase low health, full and death. That's for a problem solved with the storyboard! The layout was nice so far but it needed to be trimmed down to be consistent in size with the icons spreaded out. I keep this notes in mind for the art pass.

The Inventory Screen
I kept some notes from the games at the research for the NAVbar with the PLAY button taking a huge space at the middle and then have the rest as small buttons. However, the director took notes as this presented a new issue. That being the translation issue, other languages will have the "PLAY" word be longer. I kept this notes in mind and my solution was to make every button be the same size. As the game gets translated, it will resize for the specific language with all buttons being the same size.

The pop-up
Having the sketches as the reference, I applied what was learned and proceeded to create wireframes with a few colors to more easily identify certain elements. I also added spacing, multiplied by 36, next to the pop-up screen to make it easier for the programmer to align the objects on the screen.

Storyboard

Having a concept set in mind and on paper of course, there must be a storyboard to determine how some elements of the UI will interact and animate. That would be like the Ally Health System having many states: Healthy, Half-health, knocked need rez, and permanent death.Armours, regen bar and ultimates also need to be taken into consideration. 

I continued to do storyboards and as the art evolved into a more finished state, so too did the storyboard, with occasional revisions from my art director. The following are storyboards linked with the HUD. The rarity follows up with the inventory.

first pass

With everything set thanks to the sketches and the moodboard, we determined that the prominent color for this game would be Orange, giving it a halloween-esque vibe with red and yellow to accompany it. Orange would be the main neutral color where nothing is happening, with red representing the health bar and yellow signifying something important like... LOOK HERE kind of thing. This concept is just the first initial pass, with placeholder images and concept arts.  I eventually want a three-eyed monster to be the mascot of the series. 

This initial concept is good to get a rough idea of the color scheme to assist in incorporating a stylized UI for the game. It was determined by my art director that the rarity color icon should be smaller rather than larger.

Iconography

For this game we kept the iconography simple by looking up references of typical weapons such as hatchets, guns, freddy's claws. We opted for solid icons so that way we can add scratches and stains, giving them a sense of history of being used. Because horror is the fear of questioning oneself. What happened here? Why are these stains here... and... will that happen to me? All of these icons were done in Adobe Illustrator.

Every asset for this game is set after many revisions. All changes have coalesced into a very nice end product, with said changes also reflected in the storyboards. I loved adding the scratches and stains to the interface at it brings that monster feel to it destroying my work while retaining that charm to it. The font change to a squarer choice definitely makes it easier to read so I will definitely think about it whenever I design into account as slim fonts are harder to read the farther the user is away from the screen.

Nightmaralls is ready to captivate horror fans into creating the perfect monsters to play and scare each others in a thrilling battle royale!