Remaking Deadlock’s UI (Fan-Made)
Context
Deadlock by Valve Corporation is an in development third-person MOBA game.
At the time, the game was under a gentleman’s agreement not to distribute footage of it, so this mockup was shared internally between playtesters in the official Discord and the official Valve forums.
Valve has since lifted this agreement and is why it is now on my portfolio.
User Research
I started by asking players in the official Deadlock on what UI elements in the main menu needed improvement on. I gathered their responses and condensed them into a list of pain points and then created a player-centered problem statement from these pain points.
Default Profile State
Player-Centered Problem Statement
As a player, I want Deadlock’s UI to be more expressive and easily navigable so that my own engagement and flow-state carries over as I search for my next game.
Figma Project
Player Pain Points with the UI
Information not always necessary for the player was taking up too much of the screen's real estate.
The profile showed too much information and covered up too much of the screen for a simple hover state.
Profile's shape language did not feel cohesive with the rest of the UI.
The UI did not follow UI heuristics; settings were way under the quit button along with the volume settings.
The UI did not feel dynamic or expressive enough for how expressive and dynamic the gameplay was.
What I Changed
Made the Playtest Schedule only show if matchmaking was open or not. If hovered, it would show the exact playtest schedule dates and times.
If matchmaking was open, the UI would show how long matchmaking was open for.
If it wasn't open, the UI would show when matchmaking opened.
We simplified and streamlined the profile hover state; it now only shows the player's portrait and name. If the profile is hovered, it shows the player's most played hero.
Changed the Party Invite to take up less space.
Changed Placement of settings, exit game, and volume settings.
Added lots of new animations and hover states to make the UI more expressive and dynamic.
Hovered Profile State
Reflection
After sharing it in official community forums, the general sentiment was that people loved what I had made! There was a small critique about how I hid the exact playtest schedule due to the information being so important. I believe that the problem comes down to a lack of signifiers in that the matchmaking times UI afforded being hovered in the first place, and therefore, playtesters believed I just removed the information entirely. Either way, definitely some things to learn from.
To conclude, this passion project was so much fun! The unique opportunity to work with Valve’s actual assets from the game files was incredible. The most fun part for me was being able to look at someone else’s work and determine how best to evolve their original style.
I hope to do this work with other games that could use some tweaks!