top of page
5f7b9b977c007648f417fc2f_Store 6-p-500.png
5f7b9c6f683ff1557851d6db_Grid View 2-p-500.png
5f7b97cb2a793d109b95e93e_Product Page 2-p-500.png
5f7b9af7e2d68bb838097b8e_Store 5-p-500.png

Re-imagining the largest PC gaming platform

A new look at the Gaming Juggernaut

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.

In this 3 week design sprint, I was challenged to redesign an existing website which served as a perfect opportunity for me to improve something I use frequently. My focus is based within the Steam's game store experience where I'll explore ways to fine-tune it to ensure that users not only had a pleasant experience playing games, but also purchasing them through the platform.

chrome-capture-2023-5-6.gif

Discovery and Research

The Current State

The Challenge

Steam has come a long way from its humble beginnings as a desktop app for Valve-developed games to a well-known service for gamers. It has expanded beyond its original service into many other use cases to include the Steam Market, Steam Community, Steam Big Picture Mode, Game Streaming on Steam, and many other features. 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.

5ede4257d50ae01f8f822155_original steam-p-500.jpeg

The Beginnings

5ede4611bec7e97577d90ba2_current steam-p-500.jpeg

Current Day

The Goals

To understand the user needs and wants when using the Steam store page.

To identify existing issues and how to address it.

To create a design that incorporates applicable solutions while imp

Success Measurability 

How can I improve on Steam's issues in the shopping experience?

This will serve as the guiding goal to measure the success of this redesign.

Discovery and Research

Identifying the patterns

Initial Analysis

5edef87d3e90395e1a30bdd2_Store sitemap.png
5edeffdfd2dedb8670c4647e_Buying Exp.png

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.

capsule_616x353.jpg

Usual ratio format of a game capsule (the visual identity of your brand and project)

27123351543l.jpg

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. However, I realize doing that would shut out any other features that Steam has already provided.

 

To address this conundrum, created a user flow to better understand the purchase experience.

A list of game capsules on the store page with price tags labeled.

Discovery and Research

What do the Users think about it

With our conditions identified, I wanted to gather information about what people think about the current state of the platform. I conducted 20 usability tests and engaged in conversations with users from various usage frequency.

 

In my tests, I asked the participants to look for games based on genres, similar titles, and under a limited budget. 

 

In the end, I was able to uncover three key common 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.

5ede70c9f5030f5874dee840_overload.png

From dropdown menus to sidebar navigation, the page is cluttered with text and very little spacing between products.

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 but with different labels.

5edef0b9f16a58051a6d0520_1-p-800.png

The two menus contain similar information and call to action despite having very different names, creating confusion due to inconsistency. 

NON-RESPONSIVE IN SMALLER DEVICES

Usability dropout rate was far higher on mobile than desktop because cluttered layouts and navigation taking over an overwhelming amount of space. Evidently, the mobile layout and design feels like a product of lower priority that has never been addressed.

5f6da44c233bdd65be803670_image 5.png

Desktop Version

5f6da469bc42966cd7a4a6b7_image 6.png

Mobile Version

Define and Ideate

Identifying our objectives

After understanding Steam's problems, I created two key objective statements that will be my directional goal.

SIMPLIFYING COMPLEXITIES

How might I reduce the number of clicks in navigation and create a more seamless experience.

MAKING STEAM STORE DYNAMIC

How might I make Steam more responsive cross platform to allow greater user accessibility. 

Design and Develop

From Ideas to Craft

All begins with a good foundation

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).

5edf0db0d2dedb0633c4a1f8_two-redlines.png

Adding Some Details

Ultimately, it's still important to keep some elements of the looks and feel regarding the current steam layout and designs as to make users feel comfortable and familiar with the platform. 

As such, this draft will focus on taking aspects that are workable while incorporating fixes and improvements the its usability and aesthetics.

5edf0f4ec354371ba3c6ec58_UI SS.png
5edf0f4ec354371ba3c6ec58_UI SS.png
5edf0f4ec354371ba3c6ec58_UI SS.png
5edf0f4ec354371ba3c6ec58_UI SS.png

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.

5edf1231dc17aa76a07d6834_Group 18.png

Evolving the design

I conducted a simple 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.

I didn’t want to reinvent the (color) wheel so I built the design system around the same color palette that Steam has been using, with a twist.

 

I wanted to emphasized the bright colors in Steam's palette while honoring its dark Uber-esque 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.

Style Guide.png

Design and Develop

Finalizing the Design

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, about 70% of test participants spent more time browsing through Steam's featured selections — giving more attention to game titles that they thought they would never find. With the new catalog layout, the participants were able to go through their selection without traveling back and forth between pages.

Overall, the response was overwhelmingly positive.

Final Version.gif

Final Thoughts

Closing Reflections

The Next Steps

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. 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 challenge was 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.

Thanks for Reading!

bottom of page