Momentum Mod's User Interface

Note: this project is currently in progress and might change a lot during development.

When Momentum Mod finally got Source Engine access from Valve, it meant a complete redesign was needed to move from the (ancient) VGUI framework to Valve's new Panorama UI system that works under an xml-like structure. Under VGUI, the game UI was heavily limited by performance and old code that was hard to work with. With the move to Panorama, we were able to create much better looking UI under a much more easy to work with framework.

Original Interface

Here is how the old User Interface looked under VGUI, before the complete redesign.

An old vgui in-game screenshot of Momentum Mod An old vgui in-game screenshot of Momentum Mod An old vgui in-game screenshot of Momentum Mod An old vgui in-game screenshot of Momentum Mod

A fresh coat of paint

During multiple months, I worked on the redesign, imagining how a fresh and modern Momentum Mod experience would look for the player. Gathering feedback off of mockups from the Team and improving on said designs.

An overlook of the mockups of Momentum Mod's new UI

Getting it to work

After the mockups were finalized and ready, they were pushed out to the UI programmers with the use of Zeplin. They then used the mockups as reference to recreate the game's UI. (And are still hard at work working on it!)

Main Menu

The main menu received a fresh look! It now displays the latest news, links to the game's social media accounts and a 3D model on display for (future) display of a player's cosmetic skin. It also displays the player level, badges and the player card, which they (will be able to) customize in the future.

Momentum Mod's new in-game UI displaying the main menu

Lobby panel

One of the great features of the game is ping-less multiplayer utilizing Steam's lobbies. This lobby panel is used to host and to browse lobbies inside the game to easily talk in the chat, join players and see what everyone is up to.

Momentum Mod's new in-game UI displaying the lobby side panel

Settings

The settings panel went through multiple redesigns before we arrived at a satisfactory result. We realized that a lot of games don't really have a great settings experience, often having lackluster settings, or lack of clarity in what every setting does. With this design we hope to create an easily browsable settings experience with highly customizable settings.

Momentum Mod's new in-game UI displaying the settings. Momentum Mod's new in-game UI displaying the settings

Map Selector

Browsing which map the player will play next is a huge part of the game's experience and making that experience the best it can be is very important. This map selector/browser lets the players easily filter out maps with the use of multiple filters that range from different gamemodes, to which maps you've already completed, to which maps recently came out. On top of that, it lets the player easily see previews and information for each map that they select.

Momentum Mod's new in-game UI displaying the map selector.

Loading Screen

The loading screen, which hasn't changed much in the move to Panorama is a classic loading screen that gives basic information about the map that the player is about to play.

Momentum Mod's new in-game UI displaying the loading screen.

In-Game UI/HUD

The in-game UI is a core part of the user experience as it is what they will see while playing most of the time, so having it be easily modifiable to accommodate different gamemode's needs (as pictured below, the conc timer and remaining time and the sticky jump counter and speed display) while displaying vital information to the player such as current speed, current time and difference between splits.

Momentum Mod's new in-game UI displaying the in-game hud/ui. Momentum Mod's new in-game UI displaying the in-game hud/ui. Momentum Mod's new in-game UI displaying the in-game hud/ui.

Leaderboard

The leaderboard panel is another vital part of the in-game experience, letting players explore the different records other players have set on different maps. It also lets the players watch the replay of said records.

Momentum Mod's new in-game UI displaying the leaderboards.

End of Run

The end of run panel is a panel that also went through a lot of redesign decisions, ultimately going for a comprehensive comparison between the run that was just finished and your personal best, displaying on a graph (highly inspired by LiveSplit, a speedrunning timer app that is commonly used among speedrunners) being able to easily see where the player improved and lost time in their last run.

Momentum Mod's new in-game UI displaying the end of run panel.

Work In Progress

Since this game is in active development, I cannot showcase every possible UI screen and component as they have not yet been added to the game. I will update this page with future game updates that add onto the work that is already finished here. In the meantime, if you're interested in Momentum Mod's development journey, you can keep up with the game on the Game's Website, or the Blog Post.

Like what you see? Let's work together!

email

Email-me!