UX CASE STUDY

REDESIGN GAME UI

Overview

The project here is a redesign of elements for a AAA game released back in 2011. The objective was to recreate the UI elements to incorporate a modern and clean 2022 look, including the HUD system, cell phone, and Main Menu. Because of NDA reasoning, certain branding has been either removed, blurred, altered, or redacted. The title of the game was also altered to SKULL CITY, as seen on the Main Menu.

Research

The first step into the project of the redesign was research. I wanted to look for something that could speak of what

redated was all about, keeping in mind that it always had a big & loud vibrant personality of characters - but also to deliver a clean and modern look. My research obviously covered the gaming industry, but I wanted to see what else was out there in the film industry as well to find design work that communicated well with the theme of the said project. What I noted was that the two industries were feeding off each other. The look and feel were becoming very similar and taking inspiration from each other.

Gaming titles included Overwatch, Spider-Man, Batman Arkham Knight, Destiny, APEX LEGENDS, DC’s MultiVersus, Destruction AllStars, Watchdogs, The Division, and Splinter Cell: Blacklist. For movie references, Robocop, Iron Man, Superman & Lois, Peacemaker, and Captain America: Winter Soldier had interesting design elements.

In addition, I was extremely drawn to the neon lights that the most current redated used in their site. I thought this was an excellent opportunity to carry over to my redesign, giving elements some flavor, but to use it sparingly to avoid overpowering and compete with other items on the screen. My final decision was to mainly use it on the XP Progress and icons within the phone since all other elements will not be seen and the main focal point would be the mobile device.

As I started my journey, I also wanted to make sure the UI elements were also seen not just in a dark setting, but as well as a light scenery (i.e.: sunrise/sunset) to assure assets could be seen in an array of different environment settings.

HUD

The HUD is broken down into six different components:

Mission Objective
Comms Link
Level Notification
Reticle
Minimap
Player Vitals (Health/Stamina), Weapon Details, XP Progress

1

2

3

4

5

6

HUD//Mission Objective

The display is located on the top left, having slight transparency with a hint of halftone for the background. What’s noted here is that the sunset orange polygon here can also be seen in the mini-map for easy accessibility, and a marker on the screen, so the player can see the waypoint and the distance from reaching the goal.

Depending on the objective, this icon would change (i.e.: a heist objective could change into a cash icon enclosed with a green circle, a bounty/kill objective could change into a skull icon enclosed in a bloody red shape).

HUD//Comms Link

Incoming/outgoing calls are located on the top right and supported by a picture and the character’s name. Added is a transparent soundwave for a visual experience as the character talks. In this instance, Enzo, a friendly, is signified in blue. Unknown callers and enemies can be depicted in different colors, gray and shades of red, respectively.

Friendly

Unknown

Enemy

HUD//Level Notification

Once the player gains enough XP, a small quick announcement is seen in the top center of the screen (in this case, achieving LEVEL 18 once 100% is completed). This was also designed in tangent with the neon lights characteristics found in the XP ring within the Player Vitals section. The animation would light up and flicker like neon lights, roughly a quick two-second animation to turn on before immersing back towards the gameplay.

HUD//Player Vitals

The player’s vitals are seen on the bottom right. The life meter is indicated by red bars and broken down into four big sections to avoid overwhelming a player - sectioned off by 25% segments. Each segment will deplete as the player takes damage, and heals accordingly to kills/recovery time. The stamina is indicated by the yellow thinner bar below it, and depletes as the character does strenuous activities (sprinting/dashing/rolling). It recovers in time as the character stays idle for a cool down.

Life

Stamina

Weapon

Ammo Clip

Ammo Reserve

HUD//Mini-Map

This section lives on the bottom left side with a slight transparency to avoid blocking the view of the environment. The top portion of the map includes a thin display of a compass where West, North, East, South (W/N/E/S) are seen and changes dynamically as the player moves the character around. The compass indicator is centered and grounded with the small triangular indicator.

The full map is seen at the bottom of the compass. A green static chevron centered in the map indicates where the character is, while red circles signify enemies within the vicinity. In addition, the current mission objective/task (in this case the sunset orange polygon) is also shown as a visual aid.

As an extra design element, the phone’s status bar can also be seen faintly at the very top - since one can assume that the character can use a map app within their smart devices.

Compass

Objective

Enemies

Player

HUD//Reticle

This design is a K.I.S.S. situation, keeping it simple and clean as possible to avoid blockage of view for the player. As the player finds targets and does damages to enemies, the reticle would change in red color to indicate contact.

The reticle will also change according to the weapon type (ie: a larger circular design for a shotgun since it’s a spray of damage, rather than a more precise weapon).

Cell Phone//Home Screen

Compared to today’s standards, 2011's redated phones carry an outdated look, with a glossy, light gradient, 3D design to it. Icons since then have shifted to a more flat and clean look for buttons, and widgets with slight transparency can be found in our modern mobile devices. The redesign includes a newly added app and widget, Messages, since a large form of communication is through text with smartphones. The widgets serve a purpose to instantly see information at a glance, where the very top widget depicts the current level/progression and the disposable cash amount.

Character Widget

Messages Widget

Apps & Icons

Cell Phone//Widget-Messages

The Messages widget showcases the most recent texts incoming from other characters. The redesign shows texts from Eliza and Enzo, with three new messages indicated by the red badge. Enzo's text also carries a simple emoji to further give personality to the character and to portray how the modern language looks when texting (such as pictures, GIFs, memes, emojis, video/ audio clips). Selecting a truncated message on this widget would open up the specific message from the sender instantly. The Messages app can still be found at the lower half of the home screen, where all texts would live.

Cell Phone//Apps & Icons

A total of 12 icons are shown in the lower half of the phone and designed in a flat and graphic manner. The Phone app became Contacts and new contenders were added - Messages and Share (possible items such as weapons, gears, photos, videos, etc., to give the sense of community within the players). The neon lights can be seen in the icons to give the phone some vibrancy. For best user experience, I created a Photos app as well, since saved photos should live in its own app for quick accessibility. Having a user go to the camera just to look at past photos requires two tasks - navigate to the Camera app, then navigate to saved photos.

Main Menu

The Main Menu is designed with the clean and clutter-free look, having buttons and labels on the left side to avoid blocking the artwork in the background. This layout would only take up a third of the overall real estate. Highlighted selections are designed in blue, with a slight hint of halftone texture. A new take on the redated title lives on top of the menu, with a skewed font to depict a fun, flat, flirty, yet clean design. As mentioned before, for NDA reasoning, the title of the game is redacted and in its place I created a new title, SKULL CITY.

Gallery//UI Design in Diff. Settings

When designing the UI elements I wanted to be as certain as possible that they were visible in different background settings. To test usability/readability, I included a lighter setting such as a sunrise/sunset for the mockups.

Conclusion & Plans

This was an extremely challenging yet fun task to do. Diving into the research was an enjoyable process that allowed me to absorb new material for inspiration - and to see what other artists have created and appreciate all the little details that go into their visual design solutions. The next best possible stage here would be to run a usability test on players for feedback.