Steam is an online video game marketplace released in 2003. I discovered that users felt that the overall layout felt cluttered and overwhelming, causing navigational and structural issues. I reworked the Steam home page and menu to improve navigation and hierarchy and upgraded the visual design to fit modern trends.
92.6% direct successes navigating new menu (compared with 36%)
6.4s time taken to find menu items (compared with 19.2s)
Disclaimer: I am not affiliated with Valve Corporation or Steam in any way. I do not claim ownership of any artwork or media used in the mockups.
This being a student project meant I had no access to Steam’s actual user data and analytics. I based my solutions and decisions off information I procured myself.
Steam is a widely known brand and product. I made sure to work within the current design system to ensure brand recognition amongst its users.
I limited the scope of the project to just designing the home page and menu, due to limited time.
I started off with some assumptions about Steam’s current experience which will later guide my research goals and questions to help validate or disprove these assumptions.
I recruited 3 participants to conduct remote, moderated usability tests. I learned about what users like and is currently working, as well as uncover areas for improvement.
Users like that Steam is using a darker UI design. This can be carried over in the new design.
Users like being able to easily see what kinds of sales and discounts are currently happening.
Users feel overwhelmed by the amount of options and choices that are available on the home page and in the menu.
How can we reduce cognitive overload without removing too much value?
Users often don’t scroll down the home page, because the content isn’t relevant or interesting.
How can we figure out what information users want to see?
Users find that the text size can get too small, making it hard to read. This is especially true of section headers, making sections hard to distinguish.
How can we improve text accessibility and hierarchy?
I conducted a tree test with 9 participants on Steam’s current menu to identify any issues users are having with navigating the menu.
What this tells me is that menu items are not placed in a intuitive place for users to find.
At the end of each task, I asked users how their experience was with finding the correct item and completing the task. Here are some quotes from the users:
Based on what users are saying, I can also deduct that the menu labels are unclear.
I analyzed Steam’s direct and indirect competitors to learn how they structure their home page and navigation menu.
Competitors simplified their menus to include the most common game genres and categories that a user might click on.
Competitors used carousels to display lots of information (multiple games) at once.
Competitors used headers and white space to give clear visual hierarchy to distinguish between sections and content.
I conducted a survey with 17 participants, ranging from casual to more veteran users.
If you could customize the home page to your liking, what sections would you include?
What are some challenges you have faced when navigating the Steam home page?
What is your overall impression of the Steam home page?
Users, especially the more veteran users of Steam, have learned to ignore sections on the home page over time because it’s irrelevant to them.
Users who are newer to Steam feel that it’s intimidating to navigate because there’s a lot of information on the page.
Users feel that there needs to be improved visual hierarchy on the page.
The long-time Steam users have mentioned that the website UI has remained almost the same for years. It would be nice to see a modern UI refresh to match their other products, like Big Picture and Steam Deck.
Nelly doesn’t use Steam very often, but when they do, they feel like the website is very overwhelming and cluttered with a lot of information. They feel intimidated when navigating the site.
Elsie has been using Steam for years to discover, buy, and play games. Over time, they learned to ignore things that are irrelevant to them on the website. They know what they’re here for and needs to find it quick.
The research shows that users are having a difficult time navigating the home page and menu due to unintuitive labeling, overwhelming amount of information, and a lack of visual hierarchy.
Using what I learned from competitive analysis, tree testing, and user surveys, I came up with a simplified menu.
I ideated over different ideas and designs in the form of low fidelity wireframes. I was constantly getting feedback from my mentor and users, as well as referring back to research data to make informed decisions on which design would work best.
Research showed that users cared about knowing the genres of the game. I also learned that users are more convinced of a sale if they can see what the original pricing was.
I chose to put the carousel arrows at the top corner instead of on the sides because of potential development issues. The arrows fall outside of the grid layout and could potentially be more troublesome to implement than having it on top.
It’s very important to not lose the familiarity of Steam’s branding while redesigning the website. As previously mentioned, users would like to see the website UI match their other products (Big Picture and Steam Deck). I referenced the existing UI design for Big Picture and Steam Deck as best I could when coming up with the new UI for this project.
I reused Steam’s exisiting colors. Colors are a huge part of brand recognition, so I decided that it should remain the same. All colors are WCAG level AA accessible.
Users gave feedback that text sizes were too small and hard to read. When creating the type scale, I made sure that all sizes were a minimum of 16px.
I conducted another tree test separate from usability test to focus on the navigation and labeling.
Overall, users thought the new labels made it easier to expect what kind of items would be listed underneath.
Overall, users preferred seeing less subgenres in the menu, because they weren’t familiar with most of the subgenres and the sheer amount made it feel overwhelming.
Users found it unintuitive to find 'Preferences' nested under 'Store'.
I tested the desktop prototype with 4 different users, including those who are less familiar to more familiar with Steam.
With the visual redesign, does this still 'feel' like Steam to users?
Is the information presented on the cards enough for users to make a decision?
Can users navigate the menu with ease?
Simplified menu reduces cognitive load from having too many choices
Headers and whitespace give sections clear separation and hierarchy
Redirect users to browse more games or use footer to navigate website
Throughout the project, I was always considering real world implications and how the solutions I have might be wrong if we considered actual data from Steam. There may also be technical limitations to consider as well.
Steam is a huge platform that caters to many different kinds of users with very different interests. It was difficult trying to appeal to all of the users without sacrificing anyone. In this example, the subgenres may prove useful to experienced users, but not to novice users.
