Steam Redesign
Introduction
Introduction to the project
The Steam platform is often criticized for its clunky and frustrating user experience, causing difficulties in navigation and finding desired content. In our project, our team wanted to redesign Steam, transforming it into a user-friendly platform that brings enjoyment instead of frustration.
​
My role in the project was to recreate and enhance the Games page and the News page. Additionally, I created various iterations of the game's page, too see how the design would apply to other products .
​
Overall Design
Describing the project and its parts
Original Sketch
To start our project, our team began by sketching three design concepts for each of the main pages of the Steam platform. The selected pages included the Home, User Profile, Browsing, News, Library, Community, Game, and Friends Tab. The sketches showcased on the right side are the designs I contributed. While Steam has many other pages, our project scope limited us from working on the majority of those pages due to time constraints.
Figma Prototype
The picture on the right is a look into the initial wireframe of the project. In addition to the main pages mentioned earlier, we also incorporated a Steam Login page and a Points Shop page.
Overall Project
This is what the final project looks like. It includes even more pages such as the Error page, Messaging, as well as variants to some pages (like the User Profile and Game page).
Game Page
Describing the game page and the issues the original had
Challanges
As a team, we collectively determined that the Games (and News) page designs I sketched were the most engaging and appealing. Our research, including a survey with Steam's target audience, showed that there were common complaints regarding the difficulty of finding relevant game information and issues with readability, particularly for users with visual impairments. For example, the gray text color would often overlap with the background images.
To address these concerns, I focused on enhancing the contrast of text beneath the game title. That being the description, reviews, publication date, and game creator information. By reducing the size of the game name box and shopping button (on the middle left of the image above "System Requirements"), I created space to highlight information about the game higher on the page (such as the About section). Additionally, I moved the game tags higher for quick identification of the game's genre or category.
Game Page Variants
These are some of the game page variants that I created with the help of my team.
News Page
Describing the news page and the issues the original had
Like earlier, the team determined the sketches I created for the News (and Games) pages were the best. In the existing live Steam news page, I noticed that the gray text used on the game page was also present here, so I changed the text color. To enhance readability and highlight the publication date, I relocated the date to a corner of the article box and adjusted the text color as well. I kept two essential filters on the left side (For You and Featured). The rest of the filters were redesigned to enable users to quickly access their desired content with a single click. Lastly, I moved the search bar to the top of the page.
