Titanfall UI Redesign

I. Overview

Titanfall 2 is the sequel to the science-fiction first-person shooter Titanfall developed by Respawn Entertainment. It features single player campaign and multiplayer modes.

With several positive reviews above 89%, it seems to be an all near-perfect game. However, even with such stellar ratings, no game can escape complaints. What Titanfall succeeds in with story and overall gameplay, it lacks in UI.

Objective

In order to provide users with enjoyable gameplay and true escapism into a virtual world, a redesign of the menus, loadouts, and in-game HUD will greatly improve usability.

II. Research

Goal: To understand the audience and their primary needs during gameplay.

Process: User Interviews, Market Research

Interviews:

I began by identifying points I noticed hindered my own experience while playing the game. I reached out to my friend group and found others who had noticed some design flaws while they also played. I interviewed them and wrote down their responses then watched them interact with the gameplay, recording any instances where they verbally or physically displayed frustration.

I compiled the results of the interviews and observations into an empathy map describing the experience the average user has while playing this game.

Market Research

The UI of most futuristic first person shooters follow a semi-Meta type UI. In other words, the elements that make up the important information for the player are displayed on the screen in a way that fits in with the overall style and narrative of the game. In Titanfall 2, these elements are displayed on the HUD (Heads Up Display) and fit the aesthetic, especially when piloting a Titan. However, one of the main problems isn't with the layout itself, but more so the overload of information that occurs when in multiplayer matches. This can also be seen in several other multiplayer first person shooters such as Call of Duty and Battlefield.

Displayed on the HUD are the player stats, team information, spatial information, the minimap, game mode name/score/timer, and the reward system which out of all the elements seems to be the most redundant and bothersome. When playing an intense match, being able to see the full extent of the screen is crucial, so bombarding the screen with reward badges, banners, kill streaks just add to the chaos. I believe these elements can either be done without or can be added with audio or smaller, less frequent visual cues, still adding positive feedback.

While looking up details about the game itself, I came across several reviews and reddit threads that actually pointed out very similar frustrations to those I heard in the interviews. Of them, the most commonly disscussed issue was the overload of information that occurs right in the middle of action-packed moments in multiplayer matches. Using this information I was able to focus on the main elements that needed change.

Journey Map

After the interviews, observations, and research, I compiled the information I gathered into an empathy map illustrating the feelings, thoughts, actions, and sights of a player interacting with the game.

In doing so, I discovered several repeated points that needed to be addressed in the redesign.

III. Design

Goal: To create lo and hi fidelity mockups of the proposed Titanfall HUD and loadout changes.

Process: Hand-drawn sketches of the layouts on Adobe Fresco and mockup on Adobe XD.

Sketches

At the beginning of my design process I sketched out the intended positions of elements on the screens. I wanted to maintain the same feel to Titanfall that has already been established, just changing a few elements to improve the user experience.

• This helped me to visualize the important details that needed to be displayed on each screen. The most noticeable changes are on the scoreboard, as there is now the character image and individual stats displayed larger on the right side of the screen, and the Titan HUD with minimized icons and less clutter in the center of the screen.
• The lo-fidelity iterations were shown to a few participants to see if they could first, recognize the game, then notice the design changes. This later helped me refine the design.

UI Design

Once I started arranging the assets on AdobeXD, I noticed some other areas that could be further improved. Per user's request, I added the match best feature with an added toggle function to swith between match totals/individual stats and the match bests.

Keeping in mind the styles of other fps games, I opted for a background that included map images with a dark overlay in lieu of the colored background. I also used more color as a highlight for selections.

• Based on the interviews, I found that what most users wanted was less clutter on the gameplay screens.
• Testing the protype on users, I saw that users were able to navigate between pages and create a new appointment without difficulty.
• Users also enjoyed seeing the care guide included on the page as some of the interviewees had never obtained these services.

IV. Final Thoughts

• One of the main challenges was designing the UI in a way that would be recognizeable as Titanfall while not having official assets to aid in the design.
• Another challenge was determining how to create a balance between images and content to maintain a minimalistic feel without it being too plain.
• Playing video games has been one of my longest hobbies. I hope that in the near future, I can help in game development to bring enjoyment to people's lives.