/

/

Steam Redesign

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