Steam Logo
Image of the redesigned Steam store front
Image of redesigned Steam Product page
Image of redesigned Steam's catalog
Image of a redesigned section of Steam storefront

A new look at the Gaming Behemoth

How I reimagined the ever-so-popular Steam platform

Steam is a prominent online service created by Valve. The platform purpose is to sell mainstream and indie video games. It also acts as a leading game launcher for the PC market. If you have a PC and you're a gamer, it is most likely you will have Steam installed on your desktop at some point.
‍
When I was a student at School of Visual Concepts (SVC), I was challenged to redesign an existing website within 8 weeks. I thought this was the perfect opportunity for me to improve something that I used in my everyday; the Steam's game store experience. As a seasoned gamer, I opted to explore ways to fine-tune it to ensure that users not only had a pleasant experience playing games, but also purchasing them through Steam.

UX + UI Design

Image of the first version of Steam
Image of current Steam app

How might I address Steam’s interaction issues for a better shopping experience?

Steam has come a long way from its rocky beginnings, from just a desktop app for Valve-developed games to a well-known service for gamers. Within this growth, Steam has expanded beyond its original service into many other use cases. This ranges from Steam Market, Steam Community, Steam Big Picture Mode, Game Streaming on Steam, and so on. But, with multiple directions, it is becoming harder to narrow down the experience of Steam's store. So I thought about the potential possibilities to refine the store so it can stand out from its desktop app.

So, who are my Steam people?

Well, for one thing, I'm a Steam user. However, to clarify my audience, I narrowed down different groups of Steam users to later drive my research. They could be Steam regulars, potential gamers who made the switch from consoles to computers — or even friends/family who are considering buying digital video games as gifts.

Problem Breakdowns

With this audience in mind, I conducted 7 usability tests and engaged in conversations with regular Steam users and not-so-regular Steam users. In my tests, I asked the participants to look for games based on genres, similar titles, and under a limited budget. Afterwards, I was able to uncover these three key insights:

COGNITIVE OVERLOAD

Because of the current busy interface, new users are often overwhelmed on the first visit. Regular Steam visitors typically rely on the sale banners up top; otherwise skip front page and search for a specific game.

Image of Steam storefront being used

INCONSISTENCY IN NAVIGATION

Confusions were raised in the navigation because of the current naming conventions and their paths. Ex: “Your Store” & “Featured” links would take the user to the same Store home page.

on

NON-RESPONSIVE IN SMALLER DEVICES

From here, usability dropout rate was higher because cluttered layouts and navigation took up half of screen real estate. This made the mobile view seems like an after-thought

Example of Steam's Store Navigation
Image of Steam's mobile view

Bringing the games to gamers

After understanding Steam's problems, I created two key "how might I" statements and worked on them in tandem.

‍

Simplifying Complexities

How might I reduce the number of clicks in navigation?

Making Steam Store Dynamic

How might I make Steam more responsive in smaller devices?

Making sense of the navigation

Some would say that navigating Steam is confusing. So, I began a digital inventory of Steam’s store to further understand what I’m working with. After seeing how complex Steam’s navigation system was, I thought about giving it a complete overhaul to give light to the store. But, doing that would shut out any other features that Steam has already provided. I then created a user flow to better understand the purchase experience.

Steam's sitemap
Steam's User Purchase Experience

Understanding Practical Constraint

One specific challenge to this process is keeping the site feasible. While it might be easier to resize the image aspect ratio to make the game covers fit perfectly to my layouts. I chose to maintain Steam's capsule format to uphold some of Steam’s desktop app spirit.

Grid system of redesigned Steam
Mobile vs. Desktop Layouts

Appreciating the Little Things

As for any successful website, a responsive experience is king — so I opt to initiate my sketches in mobile viewport. This allowed me to refine the site hierarchy and navigation flow much further. I used a 4-column grid with a 20 pixels margin as a guideline to all my layouts (then a 12-column grid with 40 pixels margin for the desktop version).

Wireframes exploration of redesigned Steam
Wireframe Explorations

Improving the Catalog Layout

Currently, Steam has multiple pages leading to its selections based on different categories. Since Steam has a powerful user-tag system, I combined it with a filtering tab in a dedicated catalog page to reduce the number of clicks. I also included two viewing modes for the catalog page so the user could switch between grid or list mode as they expanded their selection browsing.

new-steam-catalog

Evolving the look and feel

Steam could use some visual update. I conducted a competitive analysis in Steam’s competitors (GOG, Epic Games, Greenmangaming, Humble Bundle, Uplay) to understand their design choices. In addition, I studied Valve's new look to study their color and type patterns.

‍Additionally, I didn’t want to reinvent the (color) wheel, I then built the design system around the same color palette that Steam has been using, but with my own twist. I wanted to emphasized the bright colors in Steam's palette while honoring its dark uber look.

For my type, I went with a family called Source Sans, which is less rigid than Arial (current Steam's type). It is also my way of paying a small homage to Valve’s former "Source" engine, for those who are long time fans.

By adding some flare to Steam, I modernized the store experience from a visual design perspective.

But, Does It Work?

Spoiler alert: yes. After creating mock-ups and an interactive prototype, I recruited the same test participants to conduct a second round of usability testing. I managed to gather some conversions compared to the previous version of the Steam store using the same set of questions I’ve asked before. With the new designs, 5 out of 7 test participants spent more time browsing through Steam's featured selections — giving more attention to game titles that they thought they would never find. Additionally, with the new catalog layout, I noticed the participants were able to go through their selection without traveling back and forth between pages. You could say that the participants had a pleasant experience.

"Oh, that's nice that I can basically filter through games; it's not as much of a hassle anymore."
Karl
Steam Test Participant

What's Next?

I grown up loving video games my entire life. Knowing that I could improve the experience of something that interests me, I thought there would be no better opportunity than to redesign Steam. After soloing this project, it helped me understand how to construct a design system in an organized way. I loved seeing things fall into place. So, me going from understanding a UX problem to figuring out a type family and a smart layout, I felt like I've grown to be a better end-to-end designer.

Although my coursework was technically done, I don't want to stop with just this. I want to take this project further by focusing on the rest of the Steam site; including the Steam companion app. One specific experience I would like to work on is the use of Steam while the users are away from their desktops. The problem with the current Steam app is it's practically a mobile responsive version of Steam’s site. I want to take on the challenge of extensively redesigning it, and eventually, flipping it into what a companion app should be.

‍But that's to be continued...

Next Project
Changemakers Series — Establishing an Emphasis on the Youth
Nghi Nhan
Product Designer