Above is the final result of this re-design case study of the Steam store (product page).

Case study – UX/UI Redesign concept

Steam store (featured section & product page)

Introduction

All PC gamers use this app to buy games, launch games, and/or to communicate with friends. It is the number one platform of its kind in the industry. In fact, they are so successful that they are not afraid of competition. Not having to be afraid of getting overrun by competitors has lead to very few improvements to the UX/UI of the app over the years.

My case study is going to cover the product page in the store section of the Steam app.

The redesign concept I have made is a case study from my own initiative and is not implemented in the app, nor made in cooperation with the developers at Valve.

Tools & resources

Affinity Designer

My vector-/pixel tool of choice, for creating concept designs.

Overview

I will begin this case study with, showing the product page of the original Steam app. I will discuss my general mindset regarding the product page and adress the problems I find with the current design. After each identified problem I will present a solution and finally at the the end of each section you will find a rendered solution I have made to solve the problems.

At the end, I will show before and after pictures.

Original Steam store (featured section & product page)

Featured section

Above is the original featured section in its current form, at the time when I performed this case study.

Steam store – Product page

Above is the first part of the product page in its original form, at the time when I performed this case study.

Steam store – Featured section

Above is the Steam store original featured section.

Problem – Confusing UI (left menu)

The first problem I would like to address is the confusion factor in the left side menu. Too much information is being displayed to the user. The text size is very small for the wrong reason. A small text size can be used for design reasons or in order to to create more whitespace in order to make a UI easier to read, in this case the text is small for the purpose of squeezing more text into a certain area.

Solution

To sort the too-much-information-problem, I will create a menu with expandable sub-categories. They will not be expanded by default, as is the case with the current design.

Problem – Disorganised menu systems

In the current app there are four menu systems. They are spread out all over the design, two menu systems are located in the top element, one menu is on the left side and one menu system is located in the main content element. This level of disorganisation is very confusing for the user, and can easily be avoided without losing functionality. The key problem here is that it doesn’t feel intuitive, you can have complex menu systems as long as they feel intuitive for the user.

Solution

Three of the menus in the app can be neatly combined into one menu. I will create one menu system for the user, and one menu system for the store functionality. This will reduce the number of menu systems and make the app easier to navigate.

One more menu system will be available inside the main element of the app as the user has selected a product or a menu element. What makes it work in this case, is that it will be easy to see that this menu is only related to the selected menu element or the selected product. This makes the presentation intuitive, and therefore, not confusing for the user.

Problem – Un-modern design theme 
The design theme feels very old. The UI design of games are constantly evolving, this target group of users are familiar with crisp and modern UI design. Because of this reason, it is extra important to keep a platform like Steam up to date. The contrast between good and bad UI design becomes extremely apparent in this case, the reason for this is that the users are constantly switching between the games modern UI design and the Steam platforms un-modern UI.    

Solution

I have redesigned the whole look and feel of the app. It has a harmonic dark-mode activated by default. I have made the typography up-to-date, with more contrasting text sizes, thin letter weights and lots of white space. 

Problem – Hard to find search bar 
The search bar in the original app doesn’t stand out. I have used it hundreds of times, but I still have to look around for it each time I am going to use it.    

Solution

I have moved it up to the top bar, given it contrasting colors. In this way a user will never have to think about where it is again, it will feel intuitive.

Rendered solution

Problems solved:

• Confusing UI – Fixed
• Disorganised menu systems – Fixed
• Un-modern UI theme – Fixed
• Hard to find search bar – Fixed

Product page

Above is the Steam store original product page (over the fold).

Problem – Information distribution
The information displayed in the element to the right of the video, is too concentrated. Too much text in a too small of an area. In order to communicate effectively with the user we need to distribute the information in a way that doesn’t overwhelm or confuse the recipient.   

Solution

I have re-distributed the information in a way that is easier for the user to comprehend. The information regarding the game is now structured in an intuitive way. You can now with ease, see the power whitespace possess in order for the information to be communicated efficiently. 

Problem – Misdirected attention
The scroll bar has a little too much contrast too the rest of the product page. Everyone knows that the scroll bar is on the right side, so it doesn’t require the amount of exposure it gets. We want to highlight call-to-action-buttons, not the scroll bar. The same goes for the wishlist button.

Solution

I have adjusted the color and size of the scroll bar to make it harmonise with the rest of the app. Now we can have more intuitive call-to-action-buttons. The wishlist is now located in the menu where it belonged all along.

Problem – Irrelevant information at expense of UX
The original pictures show you that we need to scroll three times in order to get the relevant information. There are unnecessary information that takes up space. We know that the attention span of users is getting shorter and shorter, so we need to be efficient in pour communication. We will lose the user if they need to scroll around to find the information they seek.

Solution

Four pages have been reduced to less than two pages. 

Problem – System requirements need to be read
On modern platforms like this, system requirements should be detected automatically and communicated efficiently to the user. 

Solution

My solution is a traffic light, for the user that want details there is an option to maximise the details section. I have added a scan button so the app can read the system specifications at disposal.

Problem – Inefficient user ratings
We face a similar problem as we did with the system requirements. It should be enough to cast an eye and with just a small glimpse the user should be able to interpret information like this. The user shouldn’t have to read information that can be presented more efficiently in other ways than text.

Solution

I created a graphical experience with a colorful graph, the x-axis shows time and the y-axis shows an average  of the ratings. This is enough, because an interested user will click a read more button.

Rendered solution

Above is the final result of this re-design case study of the Steam store (product page (over the fold)).

Above is the final result of this re-design case study of the Steam store (product page (under the fold)).

Problems solved:

• Information distribution – Fixed
• Misdirected attention – Fixed
• Irrelevant information at expense of UX – Removed
• System requirements need to be read  – Fixed
• Inefficient user ratings – Fixed

Before – After

Before (Store – Featured)

Above is the Steam store original (featured section).

After (Store – Featured)

Above is the final result of this re-design case study of the Steam store (featured section).

Before (Store – Product page (over the fold))

Above is the Steam store original product page (over the fold).

Above is the final result of this re-design case study of the Steam store (product page (over the fold)).

Before (Store – Product page (under the fold))

After (Store – Product page (under the fold))

Above is the final result of this re-design case study of the Steam store (product page (over the fold)).

Final results of this Steam store re-design concept case study

Above is the final result of this re-design case study of the Steam store (featured section).

Above is the final result of this re-design case study of the Steam store (product page (over the fold)).

Above is the final result of this re-design case study of the Steam store (product page (under the fold)).