A.R.D. ALIEN REMOVAL DIVISION
STEAM DESCRIPTION
The invasion has started and the secret military research facility has fallen leaving only chaos. As the only survivor, you must fight your way through the military base against a horde of frantic aliens. A.R.D. is a FREE single-player first-person shooter made by students from Breda University.
PROJECT DESCRIPTION
A.R.D. is a Parkour FPS, where the player has slide, glide & shoot their way through levels, obstacles & enemies. It's a fast-paced game with a linear level design, filled with sections full of enemies & jumps that the player needs to get through.
I started on this project after it's initial concept phase & worked on it during it's pre-production, focussing on creating the menu's needed to turn it from a tech showcase to a full, loopable game.
GENRE
First Person Shooter, fast-paced, parkour
PLATFORM
Steam
DEVELOPMENT STATS
YEAR
Team Size: 25
Duration: 12 weeks
Engine: Unreal Engine 5
2021-2022
ROLES & CONTRIBUTIONS
UI/UX Designer:
-
Research menu implementation in competitor games
-
Concept & design menu screens
-
Work cross disciplinary to fully develop & implement menu features
-
Create placeholder visual assets
PROGRAMS USED
UE5
Photoshop
Perforce
JIRA
Miro
MENU DEVELOPMENT
UI SETUP
When I got on this project, there were no menu's set-up yet, so I created the first implementation & iterated upon it. I worked together with another UI designer, who focussed on creating the in-game HUD.
With little basis to work off of, I;
-
Researched menu's & UX flow from Titanfall 2
-
Created a screen flow chart to show what screens are neccesary
-
Sketched & concepted wireframes of the main menu
-
Implemented wireframes, working together with a programmer to get the back-end functional
-
Create & implement placeholder visuals
RESEARCH
What is the UX flow like in Titanfall 2?
Titanfall 2 is an action-parkour FPS that focusses on fast, fluid movements that incorporate a lot of jumping & maneauvaring throughout the game, features that are similiar to A.R.D. Because of this, I wanted to asnswer 3 questions:
-
What screens does the player have to see? (Total number of screens, screen flow)
-
What are the menu's like? (amount of options, screen layout, etc.)
-
How clear are the screens? (amount of words, readability, etc.)
CONCLUSSIONS
-
Menu's that the player has to interact with to get through
-
Splash screen
-
Main menu (new game configuration, mission select)
-
Settings menu
-
-
Menu feels snappy & reactive, little animation or down time between when the player clicks on a button & the effect appears on the screen
-
Information load is low, menu consist of large buttons with as little text as possible, while still being very clear in it's intention
Describe your image
Describe your image
Describe your image
Describe your image
SCREEN FLOW
Screen flow: auto-save or checkpoints
After researching Titanfall 2 i created 2 screen flow charts;
-
Checkpoints; the player can only save their progress by reaching checkpoints. The player can then either continue a new play session from where they last left off, or start a new game entirely.
-
Manual save; the player can pause the game wherever they want & create a new save file. They can then continue onwards from this save or create a new game on a new save file.
After discussing with the lead designer & programmer, the manual save system was picked to develop further, due to it being more in the player's favor / control.
WIREFRAMES
Concept sketches
Created concept sketches to explore the menus neccesary, different implementations & styles, to determine what would be both most feasible to implement, & works with the aesthetics we're going for.
Created wireframes in Miro
Using Miro, I created wireframes that had the base elements that the project would need. Pictured above are the level & checkpoint selection wireframes, showing 2 different implementation options.
FINAL ITERATION
Final implementation of screens
Implementing visuals
The project didn't have available artists to dedicate to UI graphics until the last 3 weeks of our development time, so I collaborated quickly with the artist that took it on, to get a consistent visual language & make it look engaging.
The visual style we settled on was inspired by the color choices I did during initial development, adding in moving backgrounds with bananas to tie it together.
Motion design
Being the first time as a UI/UX designer, I learned how to animate widgets & applied it to every UI element in the screen flow, popping everything in with a little hop.
Visual Art
As this project moved from pre-production to production, we needed temporary visuals. This was to present a more cohesive product & let playtesting feel more official. To this end, I made menu visuals & implemented them.
