The HUD

What’s happening and why?

ROLE	Senior UI Artist / Visual Designer & Lead UI Artist
TEAM	3 Technical UX Designers, 1 UX Designer, 2 UI Engineers, 2 Visual Designers
TIMEFRAME	Q3 2015 -Q3 2018
PLATFORM	PC, PlayStation, Xbox
CONSTRAINTS	Must evoke military aesthetic, be highly legible during combat, clearly communicate state of the game
SCOPE	5 Year Development Cycle
OUTCOME	Significant Improvements to Visuals & functionality of World of Tanks HUD, Project Cancelled

Context

While world of Tanks circa 2015 HUD told a story in a relatable, functional voice appropriate to the era it suffered a number of issues.
There was much too much clutter in the default state, with much of the screen being occluded. This made the initial experience repellent for new players. Too much was going on which detracted from enjoying the core mechanics of gameplay
Consequently, in-game events were easy to miss.
- Additionally they didn’t effectively contend with tunnel vision and inattention. A lack of lateral movement for critical feedback events such as incoming damage meant that the player could take cumulatively fatal damage without realizing it
- There is decent feedback when you damaged by an enemy but those events lacked entertainment value.
From a visual point of view it felt dated (even by 2015 standards) due to the “Windows XP” era of gaming “distressed metal” look
The arbitrary mix of skeuomorphism hurt the fantasy and made understanding functionality much more challenging. On one hand it felt appropriate to the genre and product identity, but it was applied haphazardly across the UI
- It aspired to physicality, but didn’t have a credible identity, with clear source material

First Principles

Express an authentic, game-optimized modern military vehicle experience – the HUD must feel like the real thing
Must evoke a familiar Wargaming brand identity
Strong fantasy through an highly intentional interpretations of real world modern military vehicle inputs
HUD acts as an transitional space between the world and the viewer, gradually becoming more literal and diegetic along the 3rd dimension
Strictly avoid any “Iron Man” style ornamental UI elements – everything must function authentically and without excess. Every mark conveys useful combat data.

🚫

Comparative Analysis & Inspiration

Three primary sources would inform our functional and visual solves: Modern military equipment, interfaces, and tech. Contemporary hero shooters. Modern & period military shooters.

Modern Military Tech
- The game must convey an authentic modern military vehicle aesthetic. It was essential that the visual identity capture this without over-embellishing it into science fiction.
Hero Shooters
- trappings in games like Overwatch had introduced elegant and accessible solutions to the problem of abilities in a fast paced first person context.
- We would borrow from this in how we handle screen architecture and layout
- Of note, we appreciated how there were fewer, contextualized default on screen elements – only what was presently relevant would be displayed
- more negative space and fewer elements that wholly occlude the portions of the screen
Modern & Period Warfare Games
- Game like Call of Duty and Battlefield provide insight into how games might interpret real-world-inspired and timely interfaces in modern shooter
- They also provided context for what we shouldn’t do as our product needed a distinct identity.

Applied Principles

Crystal clear events that slice through inattention
Clear 1/2/3 event hierarchy Critical, Tactical, Strategic with each tier
- critical: incoming and out going damage, incoming events, ability readiness
- tactical: ammo, repair status, ability readiness
- strategic: team status and location, overall vehicle armor status