Background

In 2023, I redesigned the Heads-Up Display (HUD), controls, and general UX for Wildlander—my flagship game design project. Wildlander is a modpack for The Elder Scrolls V: Skyrim that adds survival and immersive simulation elements to the Skyrim experience. Wildlander has accrued over 70k unique players and over 300 community contributors since its launch in January 2022.
‍

Challenges and Goals

Skyrim's HUD works excellently for the default Skyrim experience, but Wildlander has a different set of requirements. My goal with this redesign was to modernize Skyrim's HUD, and to better accommodate Wildlander's unique needs:

• Wildlander adds complex mechanics to Skyrim—hunger, temperature, injuries, and so on—and these mechanics are not represented by the HUD. We needed a new HUD that clearly (and quickly) communicated these mechanics.

• Wildlander also emphasizes deep immersion in a meditative wilderness setting, so our HUD could not be distracting or overwhelming. The HUD had to enhance immersion in the game world—not distract from it.

• Skyrim regularly asks players to navigate flow-shattering menus to select items and powers. This was a vanilla Skyrim problem, made worse by Wildlander's numerous additions. Ergo, I needed a new, intuitive way to keep players out of menus and in the action.‍
‍

Iteration One: The "Middle-Out"

My first attempt to redesign the HUD was the "Middle-Out": a design that centered important information like health and ammo, while pushing less crucial HUD elements to the periphery of the viewing area. I figured the centered elements might distract, so I programmed a "Hide HUD" key for players to toggle the HUD at will.
‍

Advantages

• A large amount of information was represented. The player could see their vital attributes, their resources, and other information about the game world.

• The most important information was at the center bottom of the viewing area, requiring very little eye travel.

• The symmetrical design synergized well with Skyrim's "two hand" system. The left and right hands were intuitively represented on the left and right sides of the viewing area.
‍

Disadvantages

• The centered HUD was distracting, as predicted. Players constantly felt the presence of the HUD, which made it hard to immerse themselves in the world. Additionally,

• The "HUD Toggle" did not sufficiently solve for the distraction, and annoyed many players who disliked the micromanagement. Worse still, some players would disable the HUD and forget—resulting in frustration once they realized their mistake.

• Some HUD elements were arguably unimportant, and others did not have a clear purpose. For example, the "temperature" widget (bottom right) was incomprehensible to most players.
‍

Iteration Two: "Numbers and Icons"

I had three big takeaways from "Middle-Out". First, the center of the viewing area should remain empty. Second, be selective with what I choose to show. Third, players really don't want to manage their HUD manually.

‍In response to these, I designed Iteration Two: a contextual HUD using minimalist icons and numbers instead of bars. These smaller elements were easier to relegate to the corners, and I also coded them to fade when unneeded. (For example, the Hunger icon would fade when the player was full.)
‍

Advantages

• The contextual programming and the condensed visual design made the HUD more immersive. Elements remained out of the way, or hidden entirely—without any input from the player.

• Some players had an easier time parsing the numbers, and appreciated their specificity versus bars.
‍

Disadvantages

• The design lacked contrast, making the tiny elements hard to see—especially in snowy areas.

• The abundance of colors was distracting to many players.

• Numbers and icons were harder to understand for some players. Those players generally preferred bars.

• The "left and right corner" layout clashed with Skyrim's "left and right hand" design. Some players assumed a correspondence between the left and right corners and the left and right hands, which was not the case.
‍

Iteration Three: "Corner Circles"

By Iteration Three, it felt like I was approaching the final design. I kept the contextual programming from Iteration Two, and tightened the composition by placing all elements in one corner—an idea inspired by Naughty Dog's The Last of Us 2, and Capcom's recent Resident Evil 4 Remake. I also restored bars for certain elements, while retaining icons and numbers where they made sense. However, some improvement opportunities appeared during testing.
‍

Advantages

• Moving everything to one corner helped players find information more consistently. They quickly learned there was only one place to look.

• The circular shapes provided more opportunities for contrast, enhancing the readability of HUD elements on both bright and dark backgrounds.

• The "ammo circle" combined multiple HUD elements into one—improving immersion and reducing distraction.
‍

Disadvantages

• This design and Skyrim's "two hands" design did not synergize well. It was hard to represent each hand's resources within the "ammo circle", making the element feel crowded.

• The amount of colors was still distracting. As one player put it, "I love when the color comes from the world, and not the HUD." Players felt like their eyes were drawn to the HUD itself, instead of the environment.

• Players reported that the circular bars still lacked readability compared to traditional straight bars.

• For some players, the organic circular shapes detracted from the "harsh" vibe of the experience.
‍

Iteration Four: "Final"

This is the design we pushed to production. It incorporated lessons from each iteration: high contrast, minimalist aesthetic, corner consolidation, sensible use of bars and numbers, and muted colors that didn't distract from the game world. The design was also contextual, with elements that faded and "stacked" according to other visible elements.

To keep players out of flow-breaking menus, I also created a proprietary hotkey system with over forty hotkeys and shortcuts. When players held a shortcut button, a dynamic widget would expose each hotkey's assignment:

Results and Post-Mortem

Iteration Four was unanimously praised by our playerbase, and by other creators in the community. Gamepad players were particularly happy, including Steam Deck players—a woefully underserved player segment we now monopolize. The most important lessons I took away from this project:

• It's good to design carefully, but even better to iterate quickly. Player feedback was the not-so-secret sauce improving each iteration, and I couldn't get that feedback until I stopped tinkering and gave players something to test.

• Context is crucial when designing experiences. I left many designs on the cutting room floor because they didn't work well for our game, even if they worked well for other games. Recognizing our unique requirements saved time and encouraged better designs (and more creative solutions).

• Designing for accessibility improves designs in general. The feedback I received on accessibility issues exposed the weakest areas of each design, and addressing those weaknesses majorly improved the designs at large.