How to satisfy “99.9%” of gamers on Steam with UX and UI design?

Amine Moussous
tkt-agency
Published in
10 min readDec 17, 2019

--

You can also find the case study on the website of our agency by clicking here.

Steam, what is it?

Created in 2003, Steam is a platform where you could buy and download video games online. According to SteamSpy, Steam’s revenue is estimated to have been $4.3 billion in 2017. Steam would account for 18% of the total PC game economy, with an estimated catalog of more than 21,000 games referenced.

Steam is the perfect place to play, create and talk about video games.

— Steam

These are the values ​​promised on the site. Steam attempts to position itself as the holy grail for gamers.

But the beginning incarnations of the Steam platform were different from the system we know today, so let’s revisit its origins. Initially, this platform was designed to function as a distribution channel for games developed by Valve. Since then, the tool has constantly evolved and opened its door for games from other publishers, both AAA (big budget games) and independent.

In a certain way, Steam has emerged over the years as THE platform for computer gaming.

This growth has been accompanied by many additional features:

  • Inbox mail
  • user critics
  • Community help — chatroom
  • curator profil with recommandations
  • recommendation and documentation submitted by users for each and every game such as guidebook, screenshot, video, mods,
  • a stock market for game articles
  • card to exchange
  • a Big Picture to display Steam in the living room
  • live gaming
  • video display ( movies, broadcast …)
  • steam workshop
  • and much more

Now Steam has become a complete tool with very advanced and complex features. For example, I remember discovering the object exchange a little by chance. I can imagine the new users arriving on the platform today and their perplexities as they discover the interface. It would be interesting for Steam to review the user experience of its service to attract new users and face the competition with a modern and easy-to-use product. Faced with this new set of challenges, how could we optimize the Steam user experience and better retain new customers with an original product?

Before going further, it should be noted that this project was not commissioned by Valve, but comes from the own initiative of the TKT agency. At TKT, many of us play on Steam, and this article comes from our desire to improve the service that we like to use on a daily basis:).

For nearly 10 years, I have been playing regularly on Steam, alone or with friends, and sometimes I even connect there just to chat.

After all these years, there are still some services that I can’t use or access (e.g.: buying cards) because it’s not clear at all. Even as a “senior” user, it is often difficult for me to navigate into the interface. This is due to an information overload and difficult access to certain features (ie: Wish list) that require you to explore.

After several searches, according to my friends and to chatrooms , I’ve discovered that the review is quite general: many Steam users complain.

Here is a small selection of comments collected on chatrooms 😛

“[…] And when we connect for the first time, no help, no tuto to help us to understand how the platform is working … they let us manage on your own in a really blurred platform, extremely hard to use.[…] “

“Well, years after years Steam is getting messy. The platform don’t really care about the user, the super offer they use to do are now the standard price we can find on other site, and the Steam guard is just a huge joke. Honestly, I’ll be glad to see an alternative”

“The store is too overestimated. Estiticly poor and confusing. A lot of options are hard to find”

“Steam’s library is an holy mess, games are listing but we cannot put them away like we’ll wish”

“Some intrusive advertising pop up in a different window … this is utterly insane/ totally sick.

The most common remarks are :

  • the library is poorly organized and difficult to access;
  • an intrusive advertising window opens when Steam is launched;
  • the interface is obsolete and not attractive;
  • updates slow down the launch of Steam;
  • the support is sometimes non-existent.

The benefits of a revamp that takes all these aspects into account seem obvious, both for Valve and for users (old and new.) However, the platform is lagging behind the competition. Because the gaming market is extremely competitive, new players, new technological possibilities appear regularly. For example, the advent of Cloud Gaming in the gaming industry is attracting the interest of many players (Google Stadia, Playstation Now, etc.) and could change the way we all consume video games. Video streaming (Twitch) is setting progressively larger audience records, particularly with the world championship of League of Legends and charity events, promoting the rise of esports, which are gaining international recognition.

We also have community platforms such as Discord, which even become spaces of citizenship, during election periods.

The Steam interface is labyrinthian

Screenshot of Steam’s home page (store page)

Lost at sea, with no land in sight

Steam’s architecture is very complex and composed of many elements (too many perhaps.)

The current design does not help the user, since all elements are positioned at the same hierarchical level regardless of how likely they important they might be to the user. Worse still, the navigation is composed of redundant elements and so it causes confusion. For example, in the product page, we have too much information (articles, available languages, technical configurations,…) the problem is that everything appears to have the same level of visual importance, which shuts down easy access to the essential information: the price, the gameplay, etc.

Another sticking point is the double “profile entrance” that leads to different pages and especially the activity of friends. A newbie could be very quickly destabilized and feel lost.

The interface can’t breathe

The user is shocked when they first see the platform. Visual overload is present on all pages. It is caused by, among other things, the repetition of elements. The Steam shop, for example, is full of sections and filters that are not all relevant (I am thinking in particular of live broadcasts), all in a page with infinite scroll. The use of “endless scrolling” as a design technique is highly controversial and would be banned under the proposed SMART Act (Social Media Addiction Reduction Technology Act) in the U.S. Senate.

An unsatisfactory layout

The interface is aging and far from current trends. From one page to another, the interface changes and causes a loss of reference points for the user. This confusion reinforces the feeling of frustration.

Flawed at the outset

Screenshot of Steam’s start screen

Steam greets the user immediately with an appendix window, presenting the latest releases and platform promotions. This technique of presenting information is experienced by the user as intrusive and unproductive. Because of this practice, the user is prevented from accessing all the services of the platform.

As we have just seen, Steam is a maze and has inadequate ergonomics, both for current and new users.

In order to design an original solution that is able to meet the needs of users, I suggest you first take a look at what is done by competitors !

Overview of few others platforms :

A little overview of nine game launchers from left to right : Origin, Epic Games, Battle.net, Rockstar Games, Uplay, Bethesda, Apple Arcade, Gog Galaxy and finallyDiscord Nitro.

Overall, what is retained on the different platforms:

The dark theme is largely dominant. However, we see that Apple Arcade, Gog Galaxy and Origin have a light theme.

In regards to landing pages, there are two general categories: the platforms which have a lot of games in their catalog and offer news about all their games (Epic Games, Uplay) and those who have fewer titles, and offer a product page as a landing page (Battle.net, Rockstar Games, Bethesda.)

As far as product pages are concerned, Origin stands out among the others.

The player is more immersed in the unique worlds of each game through illustrations, images, gameplay information.

What about the Gaming Cloud in all this?

Cloud Gaming services, or in other words the possibility of streaming your games, represent for many experts the future of video games.

In the case of Steam’s redesign, it is therefore essential to imagine the possibility of a Cloud Gaming service.

It is now clear to us that Steam will offer a similar service in the future, only to resist to their competitors. (And the news seems to confirm it, at the time we are publishing this article, leaks seem to indicate that Steam is working well on a Cloud Gaming service).

I still have a lot to say, the game world is so interesting and changing 🙂 but for today, I have gathered the necessary information to offer you our vision of what the Steam service could become !

The new Steam platform!

As a reminder, the objective is to optimize the Steam user experience and retain new customers with an original product.

A touch of modernity

Looking for inspiration in the interfaces with a dark theme that works well in the gaming world (Discord, Epic Games, Twitch, Youtube Gaming…), because darken theme reduce the luminance emitted by the device’s screens, while respecting the contrast ratios of the colors. They contribute to improve visual ergonomics by reducing eye tiredness.

In the world of video games where many characters and colorful universes are highlighted , a dark background ensures better visibility of logos and game images.

Gaming platforms are often designed in the pursuits of these benefits.

Moodboard

For Steam, in main color, we will have orange 🙂 which refers to Valve’s famous opus, Half-Life. But beyond this small reference, I chose orange for its youthful property. In this way, it emphasizes liveliness and joy. On Steam, we play with passion, enthusiasm and joy!

Welcome to the new Steam :

Launch Steam, and land on the brand new home page. No more intrusive pages of ads and the shop with endless sections. Here you have everything you need to start playing, or find a game you might like.

Let’s scroll together in this new page :

First, we find in the first section some game highlights. This will replace the intrusive window we use to have when Steam starts.

Just below, you will find recommendations according to previous games you played, your friends or even curators you are following.

Then, you can find relevant sales and offers that have been selected by Steam that you can access by clicking on “see more”.

Promotions section

Are you following the release of the games? Find in this section the news and trends.

Let’s scroll a little further. Before, the broadcasts were hidden in the back of the shop. Now, you will find in this section directly on the home page.

Live broadcasts section

You are now at the very bottom of the home page. here you’ll find news and events related to your gaming taste. The next updates and tournaments will be here!

News section

Turbine, Steam’s new Cloud Gaming service

Through this page, we can access the new Cloud Gaming service “Turbine”. This page presents the “Turbine” subscription and the headline game titles..

A more immersive product page

Each game has its own universe, and I would like to show it through the product page. The idea is to present the game all along the page, with explanations of the gameplay, and illustrated information by videos or images.

This will immerse the player in the game world, which will create more interest.

Is this achievable? Completely!

By offering developers WYSIWYG features on their product pages, in order to stylize and give a unique universe to each product page.

The profile page — a real dashboard

The layout has been changed to present the information in a clearer way.

On the left, we have all the important information (username, description, avatar,…). On the right, the body of the page show general information (games obtained, DLC obtained, written comments, cards won, favorite games…)

Discover the video of the future Steam platform!

Finally, I would like to thank the TKT design team, without their criticism and valuable advice, I would not have gone this far.

Credit : Illustration Half Life — Klay Abele https://www.artstation.com/artwork/DonaR

--

--