Witcher III HUD

A reimagination of The Witcher 3 in-game interface, designed to improve visibility during combat and exploration.

Project type

Heads up display redesign (case study)

My roles

UX research,

UI designer,

Motion animator

In-action interface (HUD) overview

The project consists of a UI wheel that follows the player character and reacts dynamically to their actions, adapting in the most convenient way to display only the information needed at any given moment, creating a seamless and intuitive experience.

media-3

The problems of the original design

The stamina bar, due to its placement, is uncomfortable to look at as it’s positioned too far from the center of the screen.

This becomes problematic because it forces the player to constantly divert their attention from the combat or the road.

After researching user feedback online, we found that this is not an isolated issue, but rather an immersion-breaking aspect of the game.

media-0media-1media-2

Industry references

By analyzing the action RPG and exploration game industry, we identified several solutions to these issues that could be adapted to The Witcher 3.

On one hand, games like Skyrim and Elden Ring use a compass for world navigation—a feature that has even been requested by The Witcher 3 players.

For stamina management, one of the best references is Zelda with its Stamina Wheel, along with other titles that integrate resource tracking within the player’s immediate field of view.

media-0media-1

Using what we know to rethink the UI

The proposed solution involves transforming the stamina bar into a dynamic wheel that follows Geralt’s lower body during combat.

For navigation, the minimap was removed and replaced with a compass interface.

media-0media-1

First version. What went wrong?

The first version of the project was originally created as a college assignment.

Months later, I revisited both the project and the game itself, identifying several issues. I realized that the initial solutions were incomplete and required adjustments, as well as a broader expansion.

media-0media-1

Final result comparison

For the final version, I integrated the remaining UI elements into the wheel, fully removing the original elements from the screen corners.

In addition, several quality-of-life improvements were implemented. For example:

▪ Reducing the opacity of the rest of the UI while using Igni.

▪ Displaying only the health bar while healing outside of combat.

The compass was also redesigned to remain visible over both dark and light backgrounds, and to better align visually with the overall UI style.

media-0media-1media-2media-3media-4media-5

End credits.

Through this project, I gained a deeper understanding of the complexity involved in designing a UI that balances both immersion and functionality.

The Witcher 3 is a prime example of a game so vast that it demands a reliable navigation system, and so mechanically rich that it requires a UI capable of delivering all the necessary information for the player to fully engage with the experience.