Designing the screens
Below are the first iterations of the designs for the main menu!
For the background, I added a simple fade from black to red using the colours shown within the Bushwacker hero image. This gives an added personalisation and tie in for the user and ensures that the assets are linked! Along with the rarity highlight behind the image, I added some detail of the users loadout!
When developing the top navigation panel, it began on the top left with the navigation between pages, within these sections, I laid out general some active, inactive and hover states. To the top right, I included all the player information. Here I set the player profile image as a temporary checkered box, the username and clan tag using the body copy I developed within the design system along with the currencies from Dirty Bomb and the EXP bar, retained for player experience. Included at the top is a party creation option, a quick add option which is valuable for a social game such as this!
For designing the panels, I flip-flopped on the concepts multiple times but decided on a darkened visual style with a gradient in the background of each panel. With a simple 2px separator, it allows for updating of the panel without the need for heavy copy and layout changes! The middle panel is a distinctive extended version of the other panels - with a personalised challenge it allows for a quick and interesting introduction to the game!
The bottom of this section features the daily missions and performance reward that the user can unlock through certain actions. In the missions section, it gives a brief description of what the user should be attempting to complete, along with the currency rewarded, difficulty of the task and when it resets! I didn't prototype this but this would move forward into a visual that would allow for prioritisation and swapping of this challenge. The reward panel gives a simple visual of the players progress and what they will be receiving, included with it is a teasing of the box being slowly received using a golden gradient.
The store graphic was something I wanted to make distinctive enough that could also be used for news and communications within the game! Underneath the store graphic, I included the settings and accessibility options within here, something that I noticed within Call of Duty: Cold War that I found to be a great place to put it.
On the right side along with the hero image, I included the loadout that is equipped with the merc along with the most recent match summary, which I used a side scroller, with full development of the designs a full screen detailing all the information would be great.