Warframe HUD Redesign

I’ve spent the past few weeks putting time into Warframe, the flagship product from Digital Extremes. I’ve orbited the game for a few years, hearing bits about new expansions and seeing some sleek ornamental bio-engineered armour. So I finally decided to dive in and see what the experience was.

Warframe’s history shows in it’s UI design, it really feels like something which has been patched and expanded on over and over again for the past few years. It also has an identity crisis between it’s free-to-play MMO structure and a high-mobility third person action game. There’s a density of information which is (and needs to be!) communicated to the players, but also the gameplay speed results in players needing to quickly find or be alerted to information.

So of course I thought this would be a great thing to test my budding UI skills on. I like third person action games, I like loot drops, I like cooperative multiplayer, I like crazy-bio-engineered-ornamental-mech-suits, and I’d love to play around with anything that works with them.

I played Warframe on PS4. I’ve always preferred my bigger game experiences from a couch with a controller, instead of over a desk with a mouse & keyboard. Being a PC-first game, much of Warframe is clearly not designed to be engaged with using a controller from a dozen feet away. Maybe look at this as more of a console-focused UI redesign, but I think many of the changes are applicable to PC players as well.

The game’s HUD seemed like the best place to start, as there is a static set of information which needs to be displayed. Warframe has a really neat menu system which blends traditional UI elements and a space to walk your character around in, but it’s a whole other endeavour with it’s own design goals and objectives. Might need a breather before moving on to that though.

Redesign Goals

Familiar, but focused: Fanbase reactions to radical changes are pretty well documented, and their usually not too pretty. Millions of people are familiar with the current Warframe HUD, and flipping it on it’s head would just confuse them as much as the current layout does new players. Instead the new HUD should use the familiar style & communications which players have spent  thousands of hours with, but be easier for new and old players to read.

Layout: This is a simple one, many of the current elements are stacked right on top of each other resulting in both being unreadable when triggered at the same time. Some reorganizing of other elements should flow into solving this.

Shift from number & text information to visual representations: The current UI relies heavily on giving the player information in numbers. This is great and provides a fine level of detail, but also can be tricky to quickly get a good reference of in a fast-paced game. The primary communication should be a graphic representation, with numbers and text in there for those who need a bit more precision.

Loot Hierarchy: There is a lot of loot in Warframe. Most items need to be crafted, resulting in players collecting a bunch of small resources, and sometimes being rewarded with larger items for certain actions. There are 3 locations on the HUD where loot pops up. A stream along of pickups, a high-value of reward pop-up, and a space just for equipment mods picked up from the field. However some items can appear in different slots depending on how they are acquired, not the value of the item itself.

What’s going on:  With the amount of information on screen, I found it tricky to pick out what I should be most focused on or worried about at that moment. Whether it be the health of my character, or a timer running out, I often was caught off guard. Making these thing pop out to players should be a high priority.

Taking Stock

This is a map of where every current HUD element appears, and how it overlaps with others. It highlights some of the more problematic areas and show how different assets are collected together.

The current layout has a lot of overlap between different elements, so my objective was reorganizing elements to in a more cohesive and visible manner. For some elements, this was a simple repositioning, like the player’s status bar. However, the different types of loot were scattered throughout the HUD, and the central alerts come in a variety of locations and scales. From these objects, I built out a manifest of information which is displayed.

HUD Manifest

Loot

• Resources(Common, uncommon, rare)
• Ammo (Name)
• Rewards (Image + name)
• Mods

Player

• Shield + Health (Graphic & Numeric)
• Warframe (Name + Rank + Affinity)
• Squad Position
• Buff & Debuffs (Name, time, icon)
• Companion (Health + Shield)

Squad

• Shield + Health (Graphic + Numeric)
• Affinity (Graphic)
• Name
• Glyph
• Mastery
• Squad position

Weapons

• Magazine/Spare
• Affinity
• Name + Rank

Abilities

• Icons (Available or Unavailable, last used)
• Energy (Graphic & numeric)

Objectives

• Assassination (Target names)
• Defense(Wave, objective health(Graphic & numeric), Next wave timer)
• Excavation (Objective, total cryotic, active extractors(Alpha, health, power, timer))
• Interception (Objectives (Alpha, status, interacting?), team scores, round
• Mobile Defense (Terminals(fraction), Objective(Health,(Graphic + Numeric), name, timer)

Crosshair

• Crosshair,
• Reload graphic (& bow charge)
• Hit notification (standard, critical)
• Abilities ((Available or Unavailable, last used)

Notifications

• Alerts (Squad down, capture %, power, etc)
• Congratulatory (point captured, evac, etc)
• Ability used
• Challenge

NPCs

• Friendly (Video, subtitles)
• Enemy (Video, Subtitles)

Map

• Player (Facing)

• Squad
• Objectives(Icon, above/below)
• Waypoints
• Containers

Objective Indicators

• Direction
• Waypoints
• Stacked icons

There are a few changes here, mainly re-organizing existing content. The most important being the balancing of loot. Currently, loot takes of up a lot of real estate on the player’s screen, and where it is displayed is decided by how the item is collected, not what it is. I’ve reorganized loot by the type of pickup. I’ve also made a few small size changes to existing items, such as the size of the chat window and the edges of the waypoint direction ring.

Loot Redesign

Currently, resources all appear in a centred stream on the bottom of the screen. There is no indication of the difference in rarity, it’s centre aligned, and following certain items can be difficult.

The resource icons were too small for quick recognizability, so I’ve added in a simple shape background. The background also indicates the rarity of the resource, so hunting down a particularly hard to find resource can be quicker to recognize. This counts for credits as well. Ammo however, has been removed from this stream and placed alongside the player’s ammo count in the corner.

The resource loot stream has been moved to the side of the HUD, so that they can be properly aligned for legibility, and separated from reward loot.

Likewise, the reward loot stream (including Endo, Mods, Relics, and blueprints) is now relegated to their own block on the opposite side of the screen. These items now have their own loot stream instead of being scattered throughout the HUD, sometimes mixing with resources, sometimes with other elements. Mods are now presented in a condensed form, removing the art from the card.

Map

Primary change to the map is the shift to a circular layout. The current map’s shape provides virtually no information about the direction the player is headed in. Changing to a circle provides better awareness in all directions. Squad icons have also been simplified to triangles only, the current icons are too large, and too transparent to be legible. 

Player Status

Another big shift in reorganizing the UI is moving the player’s status (Health, level, frame, buffs, etc) away from the squad’s status, to the centre of the screen. This allow for a larger display, and can call greater attention to itself when in critical condition. The hierarchy of health bar vs numeric health now balances the numbers and graphics. The overall layout is otherwise similar to the current visual standard, as it is what current players are familiar with.

The graphic portion is balanced to reflect the warframe’s max health:shield ratio. It also adopts something common from fighting games, which is highlighting damage taken before subtracting it from the bar, to call the player’s attention to how hard they are being hit. The status effects now have their timers reflected as a circular tracker, instead of a number. When a player is downed and bleeding out, their health bar now also visualizes the timer countdown.

Squad Status

The squad status has a few updates. The largest is exchanging the player emblem for an icon representing their warframe. I created illustrations of the default helmet of several frames. This informs the squadmates of who their fighting with, and also communicates some of their character to other players.

I’ve also exchanged the position in squad for a single icon denoting the squad leader, beside the player mastery level. The updates on players entering and leaving the squad are now in line with the squad as well.

Arsenal

The players abilities and weapons loadout remains mostly the same, but any ammo pickups are now displayed here. This icon only shows when ammo is picked up, as “Ammo full” notifications are mostly just noise. The energy bar now is also segmented every 25 points to give a sense of scale and quicker reference.

Waypoints

Current locations of player objectives are marked with a series of icons, primarily alphabetic. There is a simple redesign of the icons from an outline hexagon to a fill, just to pop them off the screen more. The arrows indicating relative height of objectives to the player’s height is also a extension of the hexagon, which works with the new icon stacking.

Currently, when destinations are in the same direction, icons are stacked either horizontally with a large amount of spacing, or stacked behind one another, with a small communication of how many icons are hidden. The latter is particularly frustrating because it doesn’t actually tell you what you’re moving towards. New stacking is done in a hexagonal pattern, using the shape of the icons themselves. This makes a more compact icon on the HUD, using less screen real estate.

The ring which waypoints slide along on the HUD has also been scaled down as to not overlap with other parts of the HUD.

Objectives

Warframe features multiple types of objectives, and needs a dynamic way to communicate those objectives to players. Many of the current communications rely heavily on text and a high wordcount. I’ve redesigned several of the objectives, adding more graphic communication, and some visual hierarchy where needed.

The mobile defense objective features are one of the few graphic visuals in the current objective system, however it’s used poorly to display mostly static information. In the redesign that circle has been shift to instead of showing the amount of terminals completed, it now reflects progress on the current objective, and the overall progress is a simple fraction.

The Interception objectives might be the one of the most complex, and currently feel like they were implemented by someone else other than the rest of the objectives. They’re the only one that features information to the right of the map, which actually works pretty well, but for consistency I’ve moved all parts under the map. The team emblems have been removed, as they are nearly unreadable at the size they are displayed, and teams are already communicated through colour and text. The icons for individual nodes now mirror the shape of the waypoint icons, and the currently interacted node is highlighted. That node also has more detail displayed below the player’s crosshair while in range, indicating their progress to capture it.

Assassination objectives are pretty simple, and the only adjustment I’ve made is to the way multiple targets are displayed. Now it’s a list instead of a single point. Currently the image doesn’t change when a target is defeated, so I haven’t included that in my redesign, but a small change like a strikethrough or change in opacity would be a good contribution.

Likewise, the defence missions aren’t very information heavy, so all I’ve done is changing the hierarchy up a bit, and changing up which information is displayed.

The excavation objective display is currently the wordiest of the bunch. I’ve converted most of the information into a graphical display which takes up less screen real estate, but is easier to communicate with. Specific numbers are still there for players  who want them, but the focus is on images and colours instead. When a player is within recharge range of an extractor, that extractor’s progress is shown below their crosshair. This is to provide the letter associated with it, so that they player can access that information quickly instead of having to stop shooting to look at the extractor itself, and then the information on the HUD.

Notifications

The current system is pretty scattered for players, and the hierarchy and style varies between activities. They include not only notifications, but also an announcement of an activated ability. I’ve cut the ability notification, as it’s pretty redundant information, and we need to reduce the information on screen.

I compiled several of the notifications into two types by the information they present, each using a familiar notification style for players to recognize. Those categories are essentially either alerts and congratulatory rewards. Players should become familiar with these notifications popping in, and be watching out for them. Notifications can be accompanied by effects on other HUD elements to create a connection. For example, when a player is down and a alert notification appears, blink the squadmate in questions health red in unison. Alternatively, when an extractor is complete, pop a congratulatory notification at the same time as the reward loot pops.

Video Communications

For a game in which you don’t visit any hub towns or have a home base, Warframe has an interesting twist on voices in your ear. They are actually presented as voices and faces, with a small talking head appearing on your HUD. Most commonly this is your handler, the Lotus, but enemy commanders also come in to taunt you with have some pretty good writing. I’m a big fan of them incorporating your player name into their trash-talk. The two appear on opposite sides of your HUD, letting you know exactly how to feel about a character as soon as the you see the video start loading in.

These videos are pretty well sized, but they’re placed in some screenspace which is already used. This becomes particularly problematic when the character subtitles are attached to the videos, and scaled as such.

To solve this, I’ve moved the video communications up to the top of the screen. Most of the time this space should be clear for the player to see where they’re going, but the infrequency of video chat would fit well on here. I’ve kept the video to about the same size however, and still have the mirrored spacing for the friendly and enemy video, but now with the subtitles located in the middle of the screen, similar to traditional subtitling.

Mock-Ups

Some samples of the new HUD. Trying to build worst-case scenarios in terms of amount of content on screen, as well as some more low-intensity experiences.

Future Work

Responsive Scaling: The work I’ve done here is all based on my own home setup, playing at 1080p on a PS4. Of course on PC there is a breadth of monitor resolutions & aspect ratios to account for. The segmented elements of the new UI can be grouped and rearranged for scaling to different shapes. I started some early work on this, setting up the scale for 4:3 and 21:9 resolutions alongside my original 16:9 work.

Player Expression: Warframe has a large amount of player expression, from deciding between a couple dozen unique armours and ability sets, to a massive palette of colours to get flashy with. Despite this, the HUD remain identical across all equipment. This is a missed opportunity to lean into what makes each player’s build unique, not only in gameplay but also in aesthetics. Slightly unique flourish on the health bar or numeric displays depending on loadout would be a great touch.

Menus & Landing Craft: Of course, along with Warframe’s breadth of HUD elements there is a complex menu system out of the action. The majority of which can either be engaged with in a traditional UI, or as an interactive experience walking around your landing craft. I’ve always found the decision to create physical hub-style spaces for players fascinating, as they essentially serve as a walkabout menu space and trading efficiency for worldbuilding and experience. Warframe provides players with both options, and both of them should lean into what they provide for players.

In a less pie-in-the-sky angle, some of the current Warframe screens could use a more friendly pass. The mod selection screen in particular is hard to parse information from and understand what you should & can do.