Ongoing UI Design Sprint
Begun April 12, 2023
2 Person Team
Project Overview
My job during this project is to create interfaces for a third person shooter game currently in development. The game’s working title is “Project Rapid Strike” and involves high speed missions that must be completed in less than 1 minute. The game takes place in the Rio de Janeiro region of Brazil, and its gameplay can be best described as “Tom Clancy’s The Division” meets “Neon White”.
The goal of the UI design was to create simplified versions of interfaces commonly found in special ops games like “The Division” but with the color palette of various locations throughout the Rio region, including saturated shades of orange and muted browns and grays.
“Project Rapid Strike” is being developed by Poum T Chak Games, an independent company founded by Liquid Swords Sound Designer Grégoire “Greg” Iwaniec. He is anticipating that “Project Rapid Strike” will be released on the Steam Store in 2025.
Scope of Work
In the beginning of my work, Greg provided me with a basic understanding of the designs he was looking for. He wanted a simplistic, intuitive version of the kind of UI that can be found in special ops games like “Tom Clancy’s The Division” or WWII games like “Battlefield”. Because the gameplay of “Project Rapid Strike” was supposed to be quick and to the point, so too should the UI.
For the mood, he requested I take influence from “The Division”, but also from a Netflix film called “Triple Frontier”, a heist film that takes place in the Tres Fronteras region of the Amazon Rainforest. With this in mind, me and another UI Designer working on the project decided to divvy up the work; my job is to design the main menu and pause menu, as well as any other work Greg requests when those interfaces are finished, possibly even some UX Design work.
Below: Four of the influences for the UI: “Tom Clancy’s The Division” series, the “Battlefield” series, Netflix’s “Triple Frontier, and Rio de Janeiro’s natural beauty.
Design Phase
MVP (Minimum Viable Product)
The most important qualities for the interfaces were simplicity and visual design. The UI had to be as stripped back and to the point as the gameplay. Visually, it also had to evoke the feeling of both Special Forces missions and sites typically found in the Rio region.
Design Studio:
Sketching and Concepting
No sketching was required for this project, as Greg already had low-fi layouts of some of the menus he wanted. When necessary and with his permission, I deviated from Greg’s plans on occasion if a couple of his ideas weren’t fully fleshed out, such as the initial plan for the “Level Select” menu, where there was debate as to whether the screen should be text heavy or rely mostly on images. Hoping to capture as much of the game’s intended feel as possible, I decided to do a healthy balance of both.
In many “Tom Clancy” and “Battlefield” games, the menus often involve a colored rectangular bar highlighting a piece of text, which moves to a different one when moving from one selection to another. This same concept was applied here. The major difference between the menus for this and “Tom Clancy”/”Battlefield” games is simplicity. Those other games had very complex types of menus for a much more nuanced form of gameplay. Our UI had to be intuitive and easily navigable to reflect the simplicity of “Project Rapid Strike’s” gameplay.
Additionally, a mood board was created which featured imagery and colors of US Special Forces as well as the natural and man-made landscapes of the Rio region. Muted grays and browns were inspired by the games’ military themes, while heavy oranges derived from the colors of various favela neighborhoods and stunning vistas that can be seen from landmarks like the Sugarloaf Mountain at sunset.
Hi-Fi Screens
The first main menu screen was made with one of Greg’s low-fi wireframes in mind. It required easy access to 6 of the most important navigations in the entire game over a piece of concept art. These navigations were Single Player, Local Multiplayer, Level Select, Leaderboard, Key Bindings, and Quit. With all of them in one place, players can get right to the desired location with minimal interaction required. For the single and multiplayer modes, players type in their names and pick a level in only two screens.
For exhibition matches found in the Level Select menu, it only takes one screen to get to the action. Another way to simplify the menus was by presenting the Leaderboards, Key Bindings, and Quit menus as overlays on the very first screen. This way, the leaderboards and key bindings can be accessed with the push of one button, and quitting the game is even quicker than starting it. To achieve this minimalism, I also took inspiration from the UIs of “Alien Rage”, “Bioshock: Infinite”, and “Call of Duty: Black Ops” (2010), whose UIs use the fewest menus and interactions possible.
Most of the screens have small amounts of text over concept art that fits the required color scheme of deep oranges and muted undertones. Some menus have concept art that is blurred so as to not distract the player from the menu selections. The images used for the Level Select screen have increased midtone saturation to achieve the desired effect of capturing the local beauty and color scheme. Additionally, I created a black and white load screen as a visual palate cleanser, and superimposed a black loading bar over the text to imitate the process of classifying government documents in intelligence agencies, a concept influenced by the teaser trailer for “Zero Dark Thirty”, a film about Seal Team Six.
Research Phase
Goals of Research
Determine the usability of both the prototype of the game engine and the main menu UI and to figure out what works well and what needs improvement on both.
Methodology
4 research methods were used in this phase. The first three methods used the same 5 participants who are active PC gamers.
The methods used with them were interviews to better understand their preferences regarding third-person shooters, usability testing of both the game engine prototype and the main menu UI, and post-test interviews with both qualitative and quantitative SUS score questions.
The fourth and final method was an affinity map used to find commonalities between the interviewees’ answers. All tests were performed in February 2024.
My synthesis involved breaking down the results of both types of interviews and usability tests, as well as uploading them to Otter.ai for dictations. Highlights of the interviews and usability tests were pulled from Otter.ai and placed on digital sticky notes for an Affinity Map on Figjam.
Synthesis
Affinity Mapping
I took the sticky notes and divided them into categories to better understand how users think and feel. The categories for the interviews were Playtime Habits, Third Person Shooters Preferences, and how to improve the genre. The categories for the usability tests were experiences on the game engine, thoughts on the UI, and opinions of the experience overall.
Interview Insights:
The Resident Evil and Tom Clancy franchises are the clear favorite as far as Third Person Shooters go.
They tend to prefer a third person shooter with normal difficulty but would still like a challenge.
Gameplay is only half the reason they like their favorite TPS. The other half comes from content such as story or worldbuilding.
They believe the genre has gotten stale. They’d like new experiences or unique twists on the genre. They’d also like to see more co-op modes.
User Testing Insights - Game Engine:
Average time it took to figure out how to make a kill was 6.8 seconds.
Out of 4 participants, the average time it took to figure out how to use auto aim was 28.75 seconds. 1 was unable to use auto aim.
Out of 4 participants, it took 44 seconds to get to the point where they normally would be able to use bullet time. However 3/5 couldn’t activate bullet time. 1 did but had a hard time understanding how it works and almost failed the task.
User Testing Insights - Menu UI
It took users an average of 30.4 seconds to figure out how to start a match.
It took users an average of 6.4 seconds to find the controls menu.
It took users an average of 3.2 seconds to find the high scores.
Post-Test Insights:
The game engine plays really well and runs smoothly, especially considering the pre-alpha state that it’s in. AI was surprisingly advanced for the stage it was at.
The controls were easy and simple. It would just be nice if the directions were clearer.
There needs to be a greater UI presence to visually indicate when a skill is being activated and used. It’s not clear enough. Also needs a bit more of a “punch” to indicate that a kill has been made.
Menu is simple and to the point. Four enjoyed the visuals. One did as well but hopes for more polish in the future.
Everyone has expressed interest in playing Project: Rapid Strike, despite their genre preferences and experience levels. One would like a mobile port. Another expressed interest in a story mode.
-The average SUS score was 78/100
Takeaways:
Final Prototype
Stock photos are currently being used for the various locations on the Level Select page. Once the art department has finished its level layouts, the stock photos need to be replaced with images from the levels themselves.
Some of the concept art is low resolution and needs to be replaced when the hi-res versions become available.
The pause menu is currently unfinished and requires a lo-fi layout of the game’s Skill Tree, Loadout, and Options menus to move forward.
If deemed mandatory by the developer, map screens of the various levels need to be made once the level layouts are finished. These map screens would be found in the main menu or pause menu instead of during active gameplay.
Discuss with the developer on adding polish to the main menu. Perhaps moving the text in the main menu to the bottom center with minimalist text that’s still legible.
Recommendations/Implementations/Next Steps
Note: Prototype can only be viewed on a computer.