Steam Redesign
Steam is a well-known online game mall with a long history and many players. However, precisely because it is an old website, its UI design no longer meets the needs of modern players, and the products you want can never be found. The bad UX experience makes many players hope that it will make changes.
In this project, we will focus on analyzing the pain points of users and making improvements. Furthermore, this is a teamwork project and we will explore how to communicate as a team and how to design and plan the entire workshop to ensure progress and quality are controlled.
Discover. Click. Play:
Your Ultimate Online Gaming Store Experience!
I’m excited to redesign the famous but old gaming e-commerce!
An e-commerce platform built to let people explore, play and enjoy their gaming journey.
Overview
Steam redesign is an interesting group design challenge. Steam is a very old online game sales platform. It has a history of more than decades and has not updated its website since 2017. Therefore, this website has many designs that are not in line with current players’ usage habits.
Our goal is to identify these pain points and redesign the interface to bring players a new visual and operational experience. In this project, we focus on providing a player-friendly modern UI design, a better search page, and easy-to-understand game classifications to make it easier for players to find the game products they like or are interested in.
Problem
It’s hard for the user to find the game that they want to play.
The website style is too old-fashioned so it’s not attractive to new users.
Navigation bar isn’t vey clear so the user doesn’t know how to use it and gets confused.
Customer Service is non-existent
Managing “my wishlist” is difficult
The event calendar isn't prominent. Make it more visible.
Solution
Separate the landing page into “home page” and “store page”. The home page’s target users are those who want to find some popular games to play and don’t have a lot of time to explore. The target users of the “store page” are Players who have a lot of time and want to explore the game for an in-depth experience.
The simple and modern visual design clearly marks the price and discount date. It also reminds players on the wish list page that the discount will end, so that players will not miss the discount date to buy their favourite games.
Redesign the store page so users can easily find games by category.
Make the wishlist easier to organize.
Add the “support page” to handle users’ problems.
Steam Redesign
Team Work
Sena, Rodolfo, Rosie, Grace
Home
Page
Store
Page
Support
Page
Wishlist
Page
Tools
Figma
Photoshop
Clip studio
Role
Team leader
UX research
UI Designer
Usability Testing
Timeline
Overall: 2+ weeks
Discovery & Research: 1 weeks
Ideate, Design & Testing: 1 weeks
Design Process
Discover the problem
The first step in this process was developing a clear understanding of the problem. This involved researching the common challenges faced by targeted users by using user interview and gaming community Research.
Research
Improved User Experience: The current design can be confusing. Simplifying it would make it easier for users to find what they're looking for.
Stay Competitive: Other platforms have cleaner designs. Redesigning would help Steam keep up and attract more users.
Modern Look: A redesign could make Steam's website look more up-to-date and appealing.
Better Navigation: Simplifying the layout would help users navigate the site more efficiently.
Enhanced Brand Image: A refreshed design would improve Steam's brand perception and make it more attractive to new users.
Addressing User Feedback: Many users have asked for a redesign. Doing so would show that Steam listens to feedback and cares about user satisfaction.
By addressing these pain points in the redesign of Steam, the website can provide a more comprehensive and user-friendly experience that meets the needs and preferences of gaming online store, helping them achieve their goals more efficiently and enjoyably.
Industry Leaders Analysis
Conducting an industry analysis study is crucial because it helps gain insights into the current state of the industry, its trends, and its challenges. This information helps me develop a user-centered solution that addresses the needs and preferences of the target audience while also standing out from the competition. By understanding the strengths and weaknesses of existing products, I can identify opportunities for improvement and innovation. Additionally, an industry analysis can help anticipate potential obstacles and risks, allowing them to mitigate them early on in the design process.
About Steam
Steam is a video game digital distribution service and storefront managed by Valve. It was launched as a software client in September 2003 to provide game updates automatically for Valve's games, and expanded to distributing third-party titles in late 2005.
Observations & Key Features
Key Features
Game purchase
Community forums
Social networking
Design update
Layout
The interface is cluttered due to its densely packed layout, which includes numerous sections that contribute to a less user-friendly experience.
Market Position
-Dominant in the digital distribution platform market
-With a large user base and vast library of games.
UX Design
The platform has strong community features, but the complexity of its user interface can be overwhelming and difficult to navigate for some users.
About Company
Epic Games, Inc. is an American video game and software developer and publisher based in Cary, North Carolina. The company was founded by Tim Sweeney as Potomac Computer Systems in 1991, originally located in his parents' house in Potomac, Maryland.
Observations & Key Features
Key Features
Intuitive experience
Modern design
Game developer
Layout
The design is sleek and modern, with a strong focus on showcasing Blizzard's iconic games, highlighting their unique aesthetics and rich histories.
Market Position
-Growing user base
-Known for exclusive game deals and competitive revenue sharing for developers
UX Design
The platform offers a smooth and intuitive experience, providing easy access to games and social features, enhancing overall user engagement and satisfaction.
About Company
GOG.com is a digital distribution platform for video games and films. It is operated by GOG sp. z o.o., a wholly owned subsidiary of CD Projekt based in Warsaw, Poland. GOG.com delivers DRM-free video games through its digital platform for Microsoft Windows, macOS and Linux.
Observations & Key Features
Key Features
DRM-free games
Classic titles
Retro gaming
Layout
The design is clean and retro-inspired, with a strong focus on DRM-free classic games, appealing to nostalgic gamers and collectors alike.
Market Position
-The Niche platform caters to fans of classic and indie games
-is known for its commitment to preserving gaming history.
UX Design
The platform provides a user-friendly experience with a straightforward interface, allowing easy access to classic games and enhancing overall usability.
User Interview for the Problem
Conducting user interview allowed us to gather and analyze feedback from potential users. This information helped us to identify the needs, preferences, and pain points of the target audience. By synthesizing the survey data, I was able to identify the patterns and themes that emerge from the responses, helping to guide decision-making about the app's features, functionality, and overall user experience. This approach ensures that the final product is tailored to the needs of the target audience and is more likely to be successful in the market.
Current product
We have a problem where the visitors on the website are not coming back again
Specific audience
Many of our clients are asking for features that the app doesn’t have yet
Specific tasks
Our clients are old, but we want to get the younger generation
Design System
A UI design system is a comprehensive collection of reusable components, guidelines, and standards that ensure consistency, efficiency, and a cohesive visual language across a digital product's user interface.
Typography: Inter
Heading 1 - 60 Semibold
Heading 2 - 50 Semibold
Heading 3 - 40 Semibold
Heading 4 - 30 Semibold
Heading 5 - 24 Semibold
Headline - 20 Regular
Headline - 20 Medium
Body Large - 18 Regular
Body Large - 18 Medium
Body - 16 Regular
Body - 16 Medium
Footnote - 14 Regular
Footnote - 14 Medium
Caption - 13 Regular
Caption - 13 Medium
Small - 12 Regular
Small - 12 Medium
Wireframe
Usability Testing by Users
We created a fully-functional, high-fidelity prototype of the new flows using Figma. At the same time, we started recruiting subjects for the test who fit our criteria. We conducted 7 usability tests in the first round and 3 after iterating on the issues that we’ve identified.
Steam Redesign users interviews report
June 2024
7 interviews were conducted:
4 pro gamers,
3 casual players
Yuyu
Nanhee
Max
Carlos
Aim
Nut
Javier
Main insights
Positive aspects
The store looks good because it feels familiar to users.
The sales event calendar is easier to find.
The interface, looks less cluttered.
Having the original price and the discounted price is very good and important for a store so you keep customers.
The sharing function can share a Wishlist game with friends.
Expandable Info Pop-Up: Allow users to click on a game card to expand it, revealing a detailed description, screenshots, and trailers.
The layout of the chatbot is appealing, and having the option to choose questions directly is a good idea.
separate "hame" and "store" is a good idea. For me, "home" is like recommending the most popular games when I just want to relax and don't want to explore too much. "Store" is like I have a lot of time and I want to explore different categories.
Obstacles
It doesn’t spot a difference between the home page and the store page.
Comment Section: Include a comment section under each game card where friends can leave feedback or suggestions.
Integrated Reviews: Display a few top user reviews directly on the expanded view of the game card.
I use the mobile app more than the website so maybe on the home page, there should be more of an incentive for people to download the app itself.
Things to improve
The wording of some of the categories can be improved
Bulk Actions: Checkbox Selection: Add checkboxes in the top-left corner of each game card to enable multi-select.
The "home page" recommended games' names are better different from the "store". If you can change the "Featured product" to "The most popular" it will make more sense to me.
Conclusion:
We have solved most of the pain points of users. Most users like our UI design and are amazed by our new features such as chat room and design style. Most players agree with our distinction between "Home page" and "Store page" Because they serve different target users respectively.
Thank you for reading the Steam Redesign Project
Want to work with me? Feel free to contact me!
...or just say hello on my social media😄.
Let's Connect there
Hire me
Sena
Good at game main visual settings, assisting in developing process architecture, and flow, and introducing user experience to improve game operation and make it more user-friendly.
Contact
senatomoki@gmail.com
Get the latest information
Email Address