UI/UX Game Design Process
A project demonstrating the game design process and approach for producing a player profile screen for an FPS game, completed for the ELVTR UI/UX for Gaming course with Ariel Mallo. Newly learned Figma techniques are also exhibited.
Role: UI/UX Designer
Length: 8 Weeks
Responsibilities:
-Conceptualising a game design idea for an FPS and depicting this in moodboards.
-Producing wireframes and an interactive prototype.
-Creating a high quality UI mockup based on the wireframe and prototype.
Challenges:
-Creating a cohesive art and UI style.
-Implementing more advanced Figma prototype techniques.
-Designing a helpful UI mockup of a screen needing several sections of readable text.
Wireflow
Below is the wireflow created to demonstrate the flow of the game, specifying screens required for this FPS.
As stated in the brief, the flowchart required:
1) Short challenges to train the avatar's skills.
2) A shop area to buy and download new DLC.
3)A player profile screen, where the player is able to view achievements and skill progress, and customise their avatar.
Moodboards
The second step in the game conceptualisation stage was to create a 'wordboard'. This involved brainstorming words, categorising them, and then creating a key phrase that anchored the project. Following this, moodboards were created based on these words to represent concepts and ideas.
Click on the arrows to scroll through the design iterations.
Wireframes
Illustrated below is the iterative process of designing the Player Profile Screen, and then the final wireframe.. I wanted to ensure that the screen offers the information required without overwhelming the player. As there were a lot of information groups, segregating them into defined clusters was necessary.
Click on the arrows to scroll through the design iterations.
Interactive Prototype
Below is an interactive prototype made to showcase how the game UI will function, and how the player will navigate the Player Profile screens.
Mockup
A detailed mockup was the final part of the process. I have always admired Greek vases and used that as a base for the colour scheme, as well as creating decorative elements inspired by Greek ornament.
Background image by Mofei Wang : https://www.artstation.com/artwork/0nX6v5
Zeus portrait by Gianluca Rolli: https://www.artstation.com/artwork/VdG3Wn
One of my favourite parts was creating the challenge badges as actual Greek vases, depicted below.
Another requirement for the mockup was to run colourblind tests, in order to prove the design considered accessibility. What was great to see was the UI matches the colour scheme of the Greek vase.
From top to bottom:
Regular, Protanopia, Tritanopia, Deuteranopia, Achromatopsia
Conclusion
Exploring the game design pipeline process through the eyes of a UI/UX designer was incredibly enlightening, and a very fun experience. The emphasis on UI style and consistency was a great way of practicing applying game design concepts to a real example of a game's screen. I was also able to learn and strengthen new skills in Figma.
Designing a game from start to finish as a concept as opposed to a finished product was a great exercise in understanding game design processes and methodologies.
