Redesigning Steam UI for Better User Experience in Game Recommending System
timeline
My role
August - December 2022
Solo student UX/UI project
Project Summary
Steam is the leading digital distribution service platform for video games, with a vast library of games and tagged data on categories, best-selling games, and the average amount of time users spend playing each game. Despite this, finding a new game to play within the app can be difficult, leading to browsing external sources. Recognizing this pain point, I undertook a project to survey over 100 Steam users in order to collect their opinions on the current system and identify areas for improvement. Based on their feedback, I found solutions and redesigned the app for better usability and accessibility, with the focus being on the personalized page. The outcome is a new user-friendly interface that provides an intuitive browsing experience, making it simpler for users to locate and find games. With this project, I aimed to redesign the Steam app by enabling users to discover new games with user-friendly interfaces and an enhanced user experience.
Introduction- What is steam
Largest video game digital distribution service platform and storefront for PC gaming
According to Steam, it has nearly 30,000 games from AAA to indie games. Steam also has an enormous amount of game data including categories such as genres, tags, themes, player support, customer reviews, statistics of top-selling games, and most played games.
Problem - INCONVENIENCE of THE current system
STEAM's game recommendation system is lacking in a variety of personalization, simplicity, and usability.
As a gamer, I found the way STEAM recommends games right now to be frustrating. Even though I spend hours looking at recommended games, I often find that they aren't what I'm looking for or I've already played them. This problem is made worse by the lack of personalization and transparency, which makes it challenging for me to find games that fit my interests and playstyle. Additionally, the personalized recommendation page in the STEAM app is frequently difficult to locate and has a less user-friendly interface. As a result, many gamers seek out recommendations from external sources, which defeats the purpose of an in-app recommendation system. Enhancing the usability and accessibility of the personalized recommendation page would significantly improve the gaming experience of STEAM users.
Goals-ux project goals
Improve Usability
Enhance Personalization
Modernize the Interface
the Solution - prototype
Redesigned STEAM app UI
Experience the prototype by clicking!
Store -> Discover -> Save -> Click grey scroll button to scroll down
Redesigned main and discover page
The newly designed Steam app prototype offers an enhanced and thrilling user experience. To become acquainted with the updates, navigate from the Main Store page to the Discover page. The store page has been thoroughly updated with a modern and sleek design to improve the browsing experience. Moreover, the app now allows you to create tags in the Discover section, providing you with even more control over your browsing experience. This system of self-reporting assists Steam in recommending games that are customized to your interests. Simply by navigating to the settings and creating your own custom tags, Steam will present you with a variety of new games that match your preferences. Whether you are an experienced Steam user or a newcomer to the platform, the new prototype self-reporting system is worth investigating.
cause and effect - customer experience journey map
Understanding from the user's perspective
Before conducting the user interviews, I created a user journey map to ensure that I had a complete comprehension of the user's needs and pain points. This map assisted me in determining why users were encountering difficulties with the current system and how their experiences were related to the current Steam interface. By outlining each stage of the user journey, I was able to pinpoint pain points and improvement opportunities. This enabled me to tailor my interviews and design recommendations to the specific Steam user requirements, resulting in a more user-centric and effective redesign of the Steam app. The user journey map provided a valuable foundation for the project, allowing me to gain a deeper understanding of user perspectives and ultimately deliver an enhanced Steam app experience.
user survey/ interview
In order to identify and address UI issues that Steam users were facing with the game recommendation system, I conducted a survey of 105 Steam users through Google Forms.
I conducted a comprehensive survey of 105 Steam users to understand them and their experiences better. The survey was created using Google Forms and is available in English and Korean. I reached out to Steam users from numerous communities, including the Korean Steam community, Discord game channels, the PSU video game club, and PSU students, to ensure a diverse pool of responses. In addition to the survey, I interviewed a subset of respondents to better understand their experiences with Steam's system.
To analyze Steam users' experiences with the game recommendation system, I began by asking about their age, gender, and app usage frequency. I was astonished to discover that 47% of respondents had never used the app's recommendation system, with some stating they were unaware such a feature existed. In addition, the survey revealed that only 34.8% of users had discovered new games to play within the app, with the majority relying on external resources to find new games. These findings highlight the significance of enhancing the app's recommendation system and making it more visible and accessible.
Lastly, I asked respondents to identify the current Steam app system's areas of convenience and inconvenience. I presented a list of options and requested that users assess them based on their level of convenience. Most respondents deemed the app's recommendation system based on game popularity, category tag filtering, and the "recommended by friends" section its most valuable features. However, numerous users cited inaccuracies, a lack of filtering options, and less user-friendly interface design as significant sources of frustration.
After the survey, I invited respondents to share any additional thoughts. Numerous users were dissatisfied with the dated and complex user interface, the limited filtering options, and the recommendations that failed to account for language barriers and user preferences. These findings highlight the need for a more streamlined and user-friendly interface better tailored to Steam users' requirements, including language support and more effective recommendations. Using these insights as a guide, I listed users' pain points to redesign the Steam app's interface to prioritize user needs and make it simpler for users to discover and enjoy new games.
pain points
Using these insights as a guide, I listed users' pain points to redesign the Steam app's interface to prioritize user needs and make it simpler for users to discover new games.
Not user friendly interface
Recommender shows unrelated games
Lacking tag options of recommending algorithm
Through user surveys and in-depth interviews, I was able to identify the current Steam app system's primary pain points. By analyzing user feedback, I was able to determine where the current system works well and where it falls short. To address these issues, I intend to retain the well-received features of the current system while rebuilding the user-identified sources of frustration. This strategy will ensure that the new system retains what works while updating the required elements.
solution - wireframes
Visual design of Game Recommendation System
Store - Home
Discover - Settings
Discover - Recommended
Before developing new designs for the game recommendation system, I began by designing the homepage. The current Steam app interface features numerous icons, resulting in an overwhelming sense and the need for assistance locating the desired location. To simplify the interface design, I focused initially on eliminating unnecessary controls and keeping only the essential ones.
I placed the primary buttons on the left side of the screen, designating specific buttons for each primary button in the app's central column. On the Home page of the app's store, I included a large banner that displays the most popular titles. This banner is divided into four sections that display the game's category titles, trailer, price, and other essential details, followed by a section displaying "specially offered games." In addition, users can access additional features via the Statistics, Categories, Points, and News icons located at the top of the screen.
The personalized game recommendation page is now titled "Discover."
The section's Settings page allows users to create their own tag filters through a self-reporting system. Users can simply toggle their favorite tags and select genres, themes, the player supports, and system requirements. Additionally, users can evaluate the significance of the games' popularity and age. The "your tags" column on the right side of the screen displays all user-created categories. This design enables users to customize their game recommendations based on their preferences and interests, resulting in a more personalized and pleasurable user experience.
The page automatically navigates to the "Recommended" page once the user saves tag filters in settings.
The first new feature introduced to the "Recommended" section of the Steam app is a large banner displaying a game that matches the user's favorite genre. This is followed by the four most relevant game suggestions based on the self-tagging system, which will be updated daily to provide users with various new game options. This design strategy aims to improve the user experience by keeping them engaged and satisfied with their gaming experience and encouraging them to investigate new and exciting games that correspond to their interests and preferences.
The "More of Your Favorites" feature of the Steam app recommends games based on the self-tags that users have created. All of the relevant games are displayed, and the user can scroll down to view the suggested games. In addition, users' wish lists can be accessed from this page, which displays wish lists created by users.
All game recommendations from this section of the page are generated using data generated by Steam algorithms. The "Based on games you played" feature is intended to utilize Steam's category tags from a user's playtime, recent plays, and other pertinent data to generate more accurate recommendations relevant to the user's preferences and interests. This design strategy aims to improve the user experience by providing more likely-to-appeal-to-the-user targeted and personalized game recommendations.
At the bottom of the page, users will discover the "Friend's recommendation" feature, a pre-existing feature that utilizes user data from their friend's playtime and game reviews. To enhance the user experience, I have modified the visuals to make them simpler to view. In addition, users can view the best-selling games among Steam's global user base, which is designed to help users discover new and popular games that are prevalent globally. The "streamer's list" feature allows users to examine games suggested by streamers they follow. By integrating these new features into the Steam app's recommendation system, users will be able to discover new titles more quickly and efficiently while staying connected with their friends and favorite streamers. This design strategy seeks to improve the overall user experience and provide users with a more comprehensive and customized gaming experience corresponding to their interests and preferences.
conclusion
Reviewing the project
This project aimed to enhance the user experience of Steam's recommendation system by addressing the pain points identified through user surveys and interviews. By redesigning the main store and Discover sections, I have created a more streamlined and user-friendly interface that makes it simpler for users to locate and play games. Including personalized tags, recommendations based on games you played, and recommendations based on friends' and streamers' playtime and reviews have made the Steam app more customized to each user's interests and preferences. This project's ultimate objective is to increase overall user contentment with the Steam app, and we believe that changes made to the recommended system will accomplish this. This case study demonstrates the significance of incorporating user feedback into the design process and highlights the advantages of adopting a user-centered design strategy.