Note: This is a concept and not a real world product made by Valve.
Over the last one and a half decades, Valve and Steam as a platform have come a long way. With around 90 million monthly users Steam is the biggest video game distribution platform for PC, MacOS and Linux operating systems. As a platform that has been around since 2003, lots of iterations have been released and improved over time.
Besides being a storefront to buy and download video games and connecting players around the world, Valve is also a pioneer in regards to Virtual Reality technology. On top of that, Valve is actively developing video games with Source 2, their in-house game engine, and Steamworks. The latter consits of multiple different tools and services to help configure, manage and operate games on Steam.
State of Steam's Ingame Overlay
Around 2010, Valve introduced an ingame overlay that lets players use practical tools to further enhance the experience without leaving a game. These tools consist of a web browser, displaying time, achievements, screenshots, guides, friends information and more. Since its release it hasn't seen a lot of updates so we are taking a deep dive into the Steam Overlay today.
Recreating the Original Feel
Looking at the current version of the Steam Overlay tells us a lot about what the initial goals for the overlay were. Quick, compact access to information while still being in the game. Although this still holds true to todays standards, the overlay looks dated and lacks crucial information that users need in a modern era of gaming.
Only recently Valve released a new update of the Steam Library which changes the overall look and feel of Steam. From dark grey to a brighter palette with blurred backgrounds. This new look will be a major drive in this Steam Overlay concept to modernize the look of Steam's Overlay, while still preserving the initial structure.
Reimagined Steam Overlay
Now to the fun part. Redesigning an overlay that is almost 10 years old is a challenge if you want to keep the core structure intact. The only component that is completely revamped is the web browser, featuring new interesting ways to get the desired information. From modern features such as hotkeys to speed up the interaction for power users, to first party extensions that allow users to quickly search for a gaming related solution.
Core Overlay Components
The tile design is here to stay and has been redesigned to fit the current color scheme of Steam's new library. I've rearranged the tiles to better fit the users needs. Friends and Achievements are prominent features that require a lot of real estate, while others are accessible with only a click away. New additions are a news feed and Steam Workshop integration.
Steam Friends
Undoubtedly the most used feature is Steam Friends. The concept shows a scrollable approach that lists friends that are playing the same game on top of the component. Underneath we highlight friends that are online or in other games. The header has the ability to quickly open the invite menu for quick access, and to filter / search friends. The latter is especially useful for users that have hundreds of friends, making it easy to highlight the friends that are important.
Steam Achievements
Achieving something always feels good. So does unlocking Steam Achievements, which are now presented in a bolder way with updated looks and modern hover states. A new little addition is a progress bar to showcase how close you are to complete a certain achievement.
Screenshots
Capturing your favorite moments with friends is something you remember for a long time. The Screenshot tile gives the user the ability to quickly see the hotkey they need to press to take screenshots, as well as access to the Screenshot Uploader. Clicking on the hotkey will open the settings module to change the shortcut to something different.
Community Hub
The Community Hub component has received an update to display relevant information. Active discussions, community contributions and players currently ingame are a nice addition to display to users.
Workshop
Some games on Steam offer the user a place called Steam Workshop. Other users can create workshop items that another can subscribe to. This may range from skins, to buildings and scenery, to even more complex things that involve scripting. This component shows trending items with a slider to show more in a rather limited area.
In this specific case, Warframe has the ability to vote for skins that are on the Workshop, that may or may not be officially supported in the game and artists can generate revenue from.
Guides and where they are now
The old Steam Overlay shows top and trending guides for a game. While in theory this sounds nice and helpful to the user, this system has been (and is still being) abused with unhelpful, troll and scam guides. To circumvent this, we try to lower the spotlight the component previously had, and scale it down.
If a product features Steam Workshop, this component will by default be hidden to potentially improve the content a user is experiencing. As this is a tough decision to make, an option to toggle between both components seems like the best option for the user.
News
A lot of players just want to jump into the game and explore new content. Sometimes it is hard to keep track of what developers brought to the game and developer curated news are a nice way to show users what has changed over the course of the last couple of months / development cycles.
Settings
With new features comes a more fleshed out settings module. Especially in the last couple of years it got more important to give the userbase choices in how they want to use the product. Enabling and disabling wanted or unwanted features is a must-have these days. This concept tries to sort features in a better way and adopting the new look of Steam's Library.
Steam Browser Overhaul
I've dedicated a large portion of this project to Steam's ingame browser. A feature i would love to use more often, but is barely functional in its current state. Performance issues, slow loading times and overall feel of the browser are disappointing enough for users to not use it at all. I want to change this with a browser that has been reworked from the ground up, and smart new features that improve the way this browser is perceived.
Opening up the Steam Browser shows a new informative default page (which is changeable in settings) that supports the currently played game, tied to the Steam AppID to display information such as publisher, developer and social media. Both cover and background image are used by the recently released Steam Library update, which does not require developers to take action for this feature to work.
New ways to solve gaming related issues
The community of Steam is a place to share information around the world. Some games require help from others to progress or find something that is supposed to be hidden. The Steam Community Extension allows to quickly ask a question, that hopefully has been answered inside of the Steam community forums.
Final Thoughts
Working on a new conceptual Steam Overlay has been very fun and challening. It is tough to redesign an integral part of a product without changing the core up too much, while still improving user interface and experience. Even reworking smaller parts can backfire and displease the userbase.
As someone who likes to use the Steam Overlay, i wanted to redesign it to see the potential it has, if it would ever to be updated by Valve. I hope you enjoyed reading my case study, and in case you own Adobe XD (it's free), you can download the project files at the top of this page and explore. To see an example of how the project looks, click here. Thank You for taking your time.
