Steam

is a popular gaming platform and marketplace that houses more than 15,000 games and is frequented by millions of users daily.

Since I really enjoy gaming, in my free time I took on improving the UI and UX of Steam's game page, which showcases key information like the game's description, media, reviews, and more.

Check out my latest one here.

As a gamer myself, I was always overwhelmed by Steam and found myself not using it very often because of all the disorganized information. I found this to be particularly unfortunate since Steam is a marketplace for games with interesting art direction and cutting edge gameplay, and I felt like the site paled in comparison.

To confirm the problem was experienced by other users, not just myself, I sent out an initial questionnaire to friends, family, and Duke's gaming club. I asked questions about what they liked and didn't like about the Steam website, what they found most important to see on the game page, and more.

Their responses confirmed the problem, boiling down to as one respondent wrote.

Besides this, respondents rated how important different parts of the page were to them out of 5. This helped me prioritize the right things when designing the new layout! The rating that got the most votes for each main category is below, but occasionally the answers were conflicted; for developer updates, a sizable number also rated them as 1 or 2/5.

From the questionnaire answers, I found that respondents fell into different categories of users:

seemed to focus on whether the game was good based on reviews, whether it was playable on their operating systems, what extra downloadable content was available, etc.

wanted to know more of the technical details, like system requirements, as well as developer updates/game patch notes.

However, I realized there was also a third category of users that was unrepresented in my survey.

put their games up on Steam's marketplace, and for some, selling games is their livelihood. They publish game information, graphics, and more to pitch their games to potential buyers, and they also can read reviews for feedback. They end up using the platform just as much as players do!

From my research, I came up with 2 goals to focus on in my redesign:

I started with pen and paper sketches to quickly experiment with different layouts:

For the styling of the redesign, I brainstormed a couple of adjectives to use as inspiration: modern, immersive, and intriguing, to match the innovative games it showcases and the captivating worlds the games will bring players to!

I also kept some of Steam’s original styling, like their dark theme and font, Motiva Sans, to maintain the brand they’ve had over the years. To add to that, most users said they preferred dark theme to light theme in the survey. Some said it helped with long term readability, and it's helpful for gamers who are staring at their comptuers for such long periods of time.

I spent the most time iterating on the layout of the hero image and the reviews, using the data from the initial research survey and A/B testing (in the case of the reviews) to narrow them down to the final design.

I played with several different layouts for where to put the key information over the hero image, which I wanted to highlight. There were so many different ways to approach it: using a gradient or a hard separator to transition between sections, putting the information on the bottom or the left, etc!

I then realized that left-aligned layouts like #1 and #2 wouldn't work with other images. Bastion has a right-aligned image, so using this kind of layout keeps the header visually balanced. Ultimately, I settled with a spin off of Iteration #3.

Surprisingly, user feedback was very divided on how to represent reviews.

Steam currently represents reviews as Recommended or Not Recommended instead of a typical 5 star rating. Based on what percent of reviews are Recommended, Steam attaches a review summary of positive, very positive, overwhelmingly positive, etc. I debated between representing this in a quantitative or qualitative manner.

Users were split around 50/50! Some were adamant about quantitative for the same reasons I was, but others said qualitative summaries made more of an impact, and the unique review system had become of Steam's identity over the years. Some also said they didn't understand what the circle meant.

I ultimately went with qualitative for consistency with the review system, but if users hover, they can see the quantitative version. This is Steam's current functionality, but since most users didn't know this was a function, I'd like to add a circle with a question mark to show hoverability in the future.

I considered using either a black low opacity bar for the navigation bar or a gradient. I chose the gradient because it was smoother and more immersive--the same reason I went with the gradient for the header. Ideally, the nav bar would only appear on first load of the page and when the user hovers over the top of their page.

A big problem that users had with Steam is the length of the page as well as its disorganization. While I can understand the appeal of not having to change pages, the page forces users to scroll for eons to find what they need, and the information is scattered.

Users also had varying opinions on what they wanted to see most on the page. Accommodating all these preferences, I used tabs to put every type of information on the same hierarchy so users can instantly navigate to what's most important to them.

Developer Updates were considered solidly 3/5 in priority on my user research survey, but a fair share of users voted it as a 1 or 2/5--and that's how Steam currently represents it, with only half of the latest developer update visible in the store page. I thought developer updates deserved their own soapbox because they pour so much work into their game and might need to make important announcements to the players, so I provided a tab for them.

Reviews were simply updated stylistically to match developer updates and follow Steam's current rating system.

In the future, I'd like to add a lot of the like Community Hub, as well as and Steam is a robust website with a lot of features, and my current design doesn't allow for some additional aspects that can help show off a game's charm!