UI/UX Game Design Pipeline Process
A final project showcasing the design process for creating a FPS player profile screen, completed for the ELVTR UI/UX for Gaming course with Ariel Mallo. It also illustrates a variety of Figma techniques.
ROLE: UX/UI DESIGNER
LENGTH:
-
8 weeks
RESPONSIBILITIES:
-
Crafting an FPS game design idea and creating the relevant moodboards
-
Producing Lo-Fi wireframes and an interactive prototype
-
Creating a UI mockup based on the Lo-Fi wireframe.
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.
WORK PROCESS
I chose to design an online first-person shooter made for consoles. At the start of the design process, I brainstormed and created the general flow of the gameplay and the artistic concepts. I then focused on a specific screen, the player profile screen, and designed it accordingly.
Flowchart
Moodboard
Wireframe
Prototype
UI
Mockup
FLOWCHART
The flowchart below contains the screens required in this FPS, and demonstrates the general organized flow of the game. The brief required: (1) options for short challenges in addition to epic online battles; (2) an area to buy future DLC; and (3) a player profile screen to showcase skill, progress, and achievements.
A detailed version of this Figma flowchart can be found here.
MOODBOARD
Starting with an assortment of words that related to the idea of science fiction, I created a word board to further refine the game's concept. After crafting the concept phrase, I collected art and FPS-genre related reference material to demonstrate the artistic vision of the game, organized into a variety of moodboards.
Click arrows on the sides of image to scroll;
Click an image to zoom
WIREFRAME
Detailed below is my design process for the Player Profile screen. At the forefront of my mind was the concept that the screen must easily inform players of their progress and achievements without overwhelming them.
.png)
.png)
Click an image to zoom
PROTOTYPE
The interactive prototype below shows how Player Profile screen fits in the overall flow of the game and details the general game UI appearance.
Note that only the "Player Profile" and "Exit" buttons work on the Home Screen
Click on the file title in the image footer to view in full screen
UI MOCKUP
Referencing my wireframe and moodboards, I created a detailed UI mockup of the Player Profile Screen. I used online library assets for the artistic borders and icons, while the avatar and background are from Anthem.
Click the image to zoom
CONCLUSION
The emphasis on creating my own moodboards and UI art style, resulting in a final UI mockup, allowed me to practice applying game design concepts to a specific screen. I was also able to strengthen my skills in using Figma, particularly expanding upon my knowledge in creating interactive components.
​
Designing a game, given minimal requirements, helped me further explore the ideas and methodologies behind the UI/UX game design pipeline process.
​