steam store redesign
Redesign of Valve's Steam Store to surface important features while retaining Steam's familiar aesthetic.
Senior capstone, sponsored by the Valve Corporation.
Role: Design Lead
Team: 2 developers, 1 researcher, 1 designer
Background
Steam is a digital distribution platform developed by the Valve Corporation on which users can purchase and download digital games and software, although they have since expanded to distribution of virtual reality and gaming-related hardware as well.
With over 90 million monthly active users globally, it is no surprise that Steam has remained the leading digital storefront for PC video games since its release well over a decade ago. However, recent competitors like Epic Games and Discord have threatened Steam’s market dominance. Because Steam serves as one of Valve’s largest income sources and takes 30% profit from all sales made on the Steam Store, this is also concerning for Valve's future growth.
Design Question
How can we redesign the Steam Store to modernize the experience while retaining user familiarity?
Research
Interviews
We conducted in-person, semi-structured interviews at the Red Alcove in Allen Library with 7 participants. To specifically recruit PC gamers for interviewing purposes, we distributed a screener survey on several UW-affiliated gaming Discord servers. Our questions deconstructed the motives, needs, and thought processes of the participants while using Steam. I switched between roles of notetaker and facilitator during this step.
Ultimately, we were able to identify several existing pain points users had with the Steam Store, in addition to satisfying aspects and comments about competitive platforms:
Long-time Steam users seem to resist change
Steam is already the preferred client for a majority of users
Sales (and price) take high priority in purchasing decisions
Surveys
To confirm our interview findings and generalize our findings across a wider dataset of respondents, we conducted an online survey asking about Steam and opinions towards other competitive clients. Our survey consisted of 20 multiple-choice, Likert-scale, and short answer questions that asked about game purchasing behaviors, frequencies, and preferences in regards to using the Steam Store. It also included some questions regarding demographics and alternative competitive clients to the Steam Store.
We received a total of 300 responses, which we narrowed down to analyzing 286 responses after excluding inconsistent or frivolous data. From analyzing this data, we were able to deduce the following about how users felt about Steam:
Newer users are more excited about the concept of a Steam redesign
Game sales do matter to users, but are not easily discoverable on the Steam Store
Aspects like price really matter to users, but other aspects like "livestreams" don't matter as much
Steam users can't really think of an obvious alternative game client to Steam
Ideation
Personas
User Journey Map
Mockups
We decided to skip straight to designing in high-fidelity given project scope and our end goal of creating a working, developed web prototype. Mockups were created in Adobe XD.
A more detailed explanation for each screen can be found in the full process book below.
Style Guide
Because we learned that Valve does not have a formalized style guide for the Steam Store, we created a simple style guide of our own using the browser inspect tool to pick out colors. We aimed to emulate Steam’s recognizable brand in a “modern but familiar” way.
Featured & Recommended
Special Offers
Tabbed List
Listings
Multiple Software Versions
Shopping Cart
Implementation
The mockups were used as guidelines by the developers on our team to create a fully functional web prototype in React. Check it out here:
We’ve since seen some similar aspects of our design used during Valve’s promotional Steam sales. Knowing how small their design team is, it’s really cool knowing parts of our design (after being modified for Valve’s needs) were implemented live!
Our capstone iteration
Steam Summer Sale 2019, landing page
Reflection
This capstone project was a rewarding, wonderful opportunity for me to practice and apply many of the skills I had learned in HCDE. Working with Valve as a sponsor was also exhilarating because my goal as a designer is to one day work in the gaming industry. This project also gave me a glimpse into understanding that working on a school project and working in industry can be vastly different - deadlines, workflows, and conflicting schedules can make it incredibly difficult to stick to a workflow without running into hurdles, and I think in the future I would like to utilize existing workflows like Agile or Waterfall to more efficiently get things done on time.
A particular challenge that we ran into throughout the course of this project was adjusting to Valve’s interesting hierarchy. Coming into this project, I was aware that Valve’s employee hierarchy was rather flat, but I never expected Valve’s employee size to be so small! We learned that only two designers at Valve worked on the entirety of the Steam Store, and that presented us with challenges when asking our sponsors for assets since their design process was rather contained. Because they also couldn’t provide us with analytical data due to user privacy concerns, we largely had to gather this data for both research and implementation on our own. However, our sponsors were still perfectly happy to give us feedback and answer any questions we had to the best of their ability, for which I was still incredibly grateful.