Steam Redesign Pt. 1

■ Steam is a digital distribution service and storefront for Games & Software. It was launched as a software client in Sep, 2003 to provide game updates for Valve’s games, and expanded to distributing third-party titles. Steam also prioritizes community engagement and social interaction along side Steam-Sales.

Services

Research, Analysis, Product Design, Interaction Design, UI/UX, User-testing.

Tools

Figma, Photoshop, Obsidian

Duration

2 Months

Problem Statement

As the platform has evolved, users have found it increasingly difficult to navigate and locate specific features. Although Valve has addressed these usability concerns in the past, the continued addition of features has made the user experience more congested. This complexity is not effectively guiding users through the Steam client and the storefront, leading to confusion.

One significant contributing factor to this issue is the division of product offerings. Valve has created distinct apps and redesigned the storefront in 2014. As a result, users tend to prefer one platform for specific tasks, leading to a fragmented user experience.

Solution

Improve the user experience by creating a unified design that aligns with the developments within the ecosystem, such as the Steam Deck, Desktop Client, and Mobile App. Ensuring that existing users are not alienated by sudden changes, and providing a gradual transition period to get used to the new design and UX approach. To validate the redesign, I conducted user testing with a panel of over 200 participants. This version aims to be more concise, highlighting the systematic approach taken and the user-centric research involved in the redesign process.

Persona

#novice

Sticks to comfort games and is not aware of other Steam features.

Plays preferred games, ocasionally visits a category page but feels overwhelmed by the amount of games options. Does not know about other features.

#heroic

Has games wishlisted to get the best deals and is not very active in the community.

Buys games during sales, interacts with friends on Steam, searches for games based on friends' activity & occasionally installs mods and reads guides.

#legendary

Uses Steam features & buys more games. Has extensive knowledge of Steam client.

Knows most Steam features and is an active member of the Steam community. Engages with friends and game news on a daily basis.

All user groups seem to be overwhelmed by the main navigation of the store. Basic tasks appear convoluted, causing them to ignore the intended navigation path and find their solution to locate points of interest in the store to achieve their desired outcome. One of the major pain points for users is the cluttered UI of Steam. In the past we had a redesign done by Valve around 2014. After that the UI was optimised here and there and has old design clashing with the new designs on several locations.

Information architecture

Based on the first interviews I have evaluated User-Flow. This allowed me to get a better understanding of the underlying problem. This initial step helped me to visualize the layout of the design, consider the placement of elements and features, and make modifications to the design as needed. As a result, I could rework the main navigation and simplify it further by combining the UI from the Steam client and the Storefront.

Wireframing

After analyzing the storefront I moved on to create wireframes using Figma. The wireframes allowed me to refine the design further, providing a more concrete representation of the overall layout, structure, and functionality. By creating wireframes, I was able to experiment with different design elements and test the usability of the interface before investing time and resources into the final design.

Style Guide

I developed multiple design options and created mood boards to help me make design decisions. After receiving feedback, I narrowed down the design direction and made detailed design mockups that showcased the store layout, color scheme, and style. This process helped me establish a comprehensive design style guide that is specific to the Steam storefront. Since I am redesigning, I couldn't make drastic layout and feature changes as it might alienate users. However, I did adjust the colors for better readability, contrast, and simplification. The layout was optimized based on new user experience and user-flow guidelines.

Final Design

After several iterations, I was able to improve the UI and UX of the website. I analyzed present patterns in the design and built a design system that compares the other design languages present in the Steam Client, Mobile app, and the Steam Deck. My user test group did agree that it still looks like Steam and has drasticly improved compared to the old one.

The game cards have been further standardized. Depending on the section, they have different sizes to make it easier to identify them at a glance. Additionally, the vertical size has been reduced to improve scrolling and readability. I removed the discovery queue from the homepage. After users finish browsing the homepage, they can discover new games using the Discover page.

I have created a dedicated standalone page on the store to make it easier for users to find games. The page is divided into sub-pages to help narrow down searches. Many users had difficulty finding games on Steam because the categories were too complicated. Most users preferred to organize games differently and always used the default search option. As a solution, I created a browse page where users can quickly search for specific games based on tags. To make exploration easier, people can use the Discover page.

The Browse page also includes "most wanted" sections that are appealing to users. When users want to find a specific game, they can use the filters on the right side. I placed them there to bring the games into focus, which is why I chose a mirrored F navigation approach after user testing. For those who still want to sort by category, they can use the “Select your Category” to utilize the old Steam approach if needed.

Around 2014, Valve introduced the "Discovery Queue" Update to help users find new games. However, based on user feedback and experience, it didn't quite meet user expectations. Currently, we only see around 11 games that we can click through via the respective product page, so users have found their own solution to this issue. To meet user expectations, each queue is divided into chunks of 5 Game Cards. Each game received bigger screenshots that can be observed without opening the game in a new tab. This way, users can preview the game faster to understand what it is about, as most users scan the content instead of reading it. The top bar has some of the desired tags based on user interaction behavior to further pin down the current needs when exploring the Queue.

I've added a new feature to the Store called the "Surprise Me" section. It can be found in the Discovery Queue and on the Storefront (Recommended based on the games you play). This feature works well if you want to discover old or new games that align with your preferences. With just a small filter, users can find games they may have missed but want to play.

For the Game page, I have placed the most important interaction on the top bar to improve user experience. I have optimized the layout for better usability. The Review section has been revised to make the ratings easily understandable. In the DLC section, the owned DLCs will be placed at the bottom to make it easier to keep track of the ones you own. The System Requirements section has been cleaned up to provide more reliable information for the users. If the game has Expansions content, it can be found in the “More from [Game Title]” section. If you own the game, it will be indicated more prominently.

Vadim Huck Get in touch

More by Vadim Huck

View profile