The final project of my Skills Bootcamp with Teesside University (UI/UX Design for Video Games) was to produce a fully working prototype for an e-sport video game.
This project was started early in the course, but evolved through time, with the different classes that we had with Teesside University Teachers and sessions with Double Eleven.
PROTOTYPE —
I created a fully working prototype using Adobe XD and used the prototype function to link them together.
Scroll down for more info on how I've created this prototype.
You can also contact me at contact@aquacorp.uk if you would like to request the link to interact with the prototype yourself.
Please note that most of the art is not mine, you can find more details in the Credits section at the bottom of this page.
Video showcasing the prototype and all its functionalities
SCREEN NAVIGATION MAP/FLOWCHART —
Flowchart showing all the screens and screen states for Ashes of Chaos and highlighting the screens and screen states coded in the prototype
WIREFRAMES —
Main menu wireframe
Versus game mode wireframe
Versus game mode wireframe with Casual game mode screen state
Brainstorming for character screen
Character picker wireframe with golden spiral
Character picker wireframe
Settings menu wireframe
Display settings wireframe
Subtitle settings wireframe
Accessibility settings wireframe
HUD brainstorming
HUD wireframe
Leaderboard brainstorming
Leaderboard wireframe without details
Leaderboard wireframe with details
Video showcasing a working prototype of the settings navigation for the game
SCREENS —
Title screen
Main menu
Versus game mode screen
Versus game mode screen with details
Ranked game mode sub screen
Casual game mode sub screen
Leaderboard without details
Leaderboard with details
Character picker screen
Character picket screen
Loading screen
HUD
Pause screen
Pause screen warning
Settings menu screen
Controller settings screen
Mapping settings screen
Audio settings screen
Display settings screen
Subtitle settings screen
Gameplay settings screen
COLOUR PALETTE —
Colour palette from coolors
0D1B2A — This dark blue is the main background colour, or used as the secondary font colour when using light backgrounds.
1B263B — This slightly lighter blue is the secondary background colour and used for semi-transparent backgrounds on top of images.
7DD2E3 — This medium blue colour is used for background gradients.
F7E2A8 — This golden colour is used for highlights on active elements as well as background on some UI elements like badges.
D4D4DD — This light grey colour is the primary text colour.
It was extremely important for me to choose a colour palette with accessibility in mind. I ran my colours through a contrast checker and a colour blindness checker to ensure my colours were compliant with cross-platform contrasts, as well as accessible to as many people as possible.
Colour contrast
Colour contrast
Colour contrast
Colour contrast
Colour contrast
Colour contrast
Colour contrast
Colour contrast
Colour contrast
Deuteranopia
Protanopia
Tritanopia
Achromatopsia
TYPOGRAPHY —
Font: Infiltrace
This font is used for the logo of the game only.
Font: Josefin Sans
This sans-serif font is used for all the text in the game, including the text in the front-end screens and for the subtitles in the game.
VISUAL ASSETS —
Most visual assets in the prototype have been borrowed from great artists on Freepik (cf. Credits) but some assets are my own.
Procreate Assets
Illustator Assets
Teal sphere - Arcane Magic
Emerald sphere - Faery Magic
Purple sphere - Sound Magic
Menu arrow
Padlock icon
Loading icon
Dagger
Wand
Bow
GENRE & THEME OVERVIEW —
— Ashes of Chaos is a one vs one 2.5D fighting game that contains both a campaign mode and a versus mode. The versus mode contains competitive modes such as online casual, online ranked, or local and a non-competitive training mode.
— The unique aspect of the game is that the characters only fight using Magic (or magical weapons). Each character has its own type of magic that they can control (Elements, Necromancy, Telekinesis, etc...). There are 12 characters available in the game, though not all of them are unlocked at the beginning of the game. Going through the campaign as well as the ranked game modes allow for the unlocking of the characters.
— The characters can jump or fly to dodge attacks, and some characters have the power to create platforms or objects to help them fight.
— The player has an overall level that can be increased with experience gained from playing online casual and ranked games, as well as a rank (C-to S). The player doesn't have a tag name when starting but will have the opportunity to choose a unique name after playing their first casual fight. Ranked fights will be unlocked when the player reaches lvl10.
— The characters also have their own skill levels that need to be increased through playing with them. Characters have different HP, Mana and Stamina levels as well as a special attack.
— Each character starts with a default weapon. Ranking the characters up will unlock up to 3 weapons to choose from for each character that will give different powers when fighting.
— There are also different outfits for each characters that can be unlocked through levelling the player and characters up. • Each fight contains 3 rounds(best of 3 to win).
— The game is made for consoles & PC and can handle all types of controls such as arcade sticks or dance pads.
PERSONAS —
I created 3 personas based on the Gamer Motivation Model from Quantic Foundry.
• Ex pro player – mastery (challenge + strategy) + social (competition)
• Ex pro player – mastery (challenge + strategy) + social (competition)
• Social player – social (community) + creativity (design) + action (excitement)
• Completionist – achievement (completion + power) + immersion (fantasy)
Having created these personas allowed me to check what different players would need to see in a game like Ashes of Chaos. These personas and needs influence the features in the game such as leaderboards, trophies or even customisation of gameplay and help defining a better user experience for players. They feed into what functionalities need to be available from a UX and Gameplay point of view.
Gamer Motivation Model from Quantic Foundry
Persona 1 - Ex pro player
Persona 2 - Social player
Persona 3 - Completionist
CREDITS —
Most of the artwork in my prototype is the work of these incredible artists:
Fonts used in the prototype:
