Image for post
Image for post

Reimagining Steam

This article is a companion piece to this Behance case study. With this, I aim to bring some more context to my decisions in terms of approach and design. If you want more visuals, and less rambling, check that out instead!

Juan Herrera
May 16, 2018 · 9 min read

An introduction

I’m a designer. I’ve also been a Steam user for a long time.

My first Steam account was created when Half Life 2 came out. It was necessary to set up this “Steam” thing to download, and then install the game. At the time, broadband was just starting to be a thing in my country, so the thought of downloading huge chunks of a game I just bought, especially when I was holding the CD in my hand, wasn’t exactly appealing to me. The experience didn’t feel necessarily convenient… not only because of the errors, bugs and other issues that come bundled with new technologies but also because of the aforementioned download speed limitations.

The memories of this green window fill me with despair to this day.

I’m sure you can read similar experiences online — Steam definitely had rocky beginnings. Still, it thrived. And with time, it became a viable service. Then it sort of became the norm.

Image for post
Image for post
How things have changed. Gaming on a Mac! Who‘d a thunk it?

Today, 14 years later, what Valve started with its platform is still the norm. When people think of gaming on PC, they inevitably end up running into Steam at some point. What initially was conceived as a distribution tool for Valve-developed games evolved slowly into a storefront for both AAA as well as indie developers and publishers. In a way, Steam became a synonym for PC gaming.

Of course, this growth came with a lot of extra features along the way:

  • Messaging.
  • User reviews.
  • Communities.
  • Curator profiles that provide recommendations.
  • User-submitted content on a per-game basis like guides, screenshots, videos, mods and so on.
  • A Market (note that this is different from the Store), mainly for in-game items trading.
  • Steam Trading Cards.
  • Big Picture Mode, a TV-oriented experience for Steam.
  • Game Streaming.
  • Video content (as in movies, shows, etc.).
  • Software.
  • …and probably more, with more to come.
Image for post
Image for post

In short, as of today, Steam is huge.

Inevitably, mobile apps would come into play in the midst of this expansion. So one day, it happened.

Image for post
Image for post
Steam for Android

Huh. That looks familiar.

Image for post
Image for post
Steam website on Chrome (Left), Steam for Android (Right)

Is that…

Image for post
Image for post
Steam website on Chrome (Left), Steam for Android (Right)


Image for post
Image for post
Steam website on Chrome (Left), Steam for Android (Right)

Yup. That’s definitely the website. The mobile apps are web wrappers!

The Steam mobile apps — what’s the deal?

When thinking of Steam as a platform for buying games, the idea of having a mobile component definitely makes sense. But as we discussed before, Steam has grown in so many different directions that it’s a bit difficult to narrow down the experience to a particular kind of user:

  • Username1 is heavily invested in their favorite games’ community group and discussions.
  • Username2 is into streaming.
  • And then we have Username3, who is all into Steam Trading Cards and selling items.
  • Username4, meanwhile, just wants to know when the next big Steam sale is.
  • Finally, Username5 is simply keeping track of their wish list items, and installing games remotely.

If that sounds like a lot of different features being discussed at the same time, it’s because that’s exactly what it is. For good or bad, due to the “web wrapper” nature of these mobile apps, users have access to essentially all these features in their phones. And also to a bunch of other problems stemming from that. As you can probably imagine, it’s not very difficult to find some user feedback online.

Let’s not forget there are App Store and Google Play reviews as well. While the ratings aren’t that bad on Android (though the comments themselves are quite… divisive in nature), do note that as the time of this writing, the iOS version hasn’t been updated in almost 2 (two! ¡dos!) years. Even knowing all of this, it’s still very difficult to say whether users can manage to do all the things they want to do within the app successfully. To that, add some quirks these apps have, like mixing actions and pages in the navigation drawer; or the app not remembering your age unless you’re under 18, naturally; or just generally being inconsistent in terms of visual design and platform-specific patterns. The minor things that pile up and hurt the experience.

I guess could go on… but I won’t. Instead, I’ll share what I came up with after I thought: “what would I do if I had the chance to improve on some of these points?”

After the word salad: heading towards the point

What do the five previously mentioned users have in common? Well, first, it’s very likely that they initially got into Steam because they wanted to buy and play games. And second, we can also infer that they have access to a computer in which they can play these games. Simple.

Reiterating what I said before…

“When thinking of Steam as a platform for buying games, the idea of having a mobile component definitely makes sense.”

— Me, literally five paragraphs and one list ago

At a core level, making this service accessible on devices other than computers cannot possibly be a bad thing, can it? Now, I don’t mean that this mobile component should literally mirror the desktop experience. I think it should be more of a companion app.

So I tinkered around with the idea for a few weeks and this happened.

An in-depth look at the concept

Image for post
Image for post
These are all good games, by the way.

Minor visual identity updates

While this is not the main point of the concept, it’s probably one of the things that stand out the most, so I’ll get it out of the way. As an additional task, I did some initial explorations on how to update the Steam look, or brand, a little bit. This is by no means a drastic change, and I tried to maintain the original spirit of the brand while updating colors and typography to give it a more modern look. I was inspired to pursue this after seeing what other digital stores are doing in terms of design: GOG, Fanatical, Humble Bundle, Origin... and of course, Sony, Nintendo and Microsoft, also put a lot of effort in terms of their aesthetics and design. It’d be great to see Steam follow in their footsteps too.

Update: Valve has a new website though. And it’s so refreshing! I love it.

Image for post
Image for post
The Capsule, a rather difficult format to play with on mobile due to its aspect ratio. Also pictured: a good game.

Focus on feasibility

When I started working on this concept, the main focus was to keep things feasible. It might have been easier for me to completely reinvent the visual side to my tastes, but I wanted to use as much as I could from the current identity and build something new on top of that. As such, the… rather odd Capsule format lives on in this redesign.

I saw this as both a challenge and an exercise in being practical— consider that, were this a real-world scenario, publishers/developers would not need to provide new visual materials in different formats, or resolutions, to Valve. This is also relevant to the brand refresh I mentioned before. Keeping it all in the same spirit is what it’s all about.

Image for post
Image for post

The core features

While the approach I took was designing for scalability, I’d like to keep the app as concise and compact as possible. With that in mind… we know Steam users want to buy games. What else could we offer?

  • They could learn about new sales events while being away from their computers. Especially useful when there are flash deals involved!
  • Manage their libraries by installing games on their computers (which, by the way, is already possible to do).
  • Add products bought in other storefronts to their libraries.
  • Have an even simpler, friendlier 2-factor authentication.
  • Better Community Market listing confirmations. While having the market itself in the app is a bit excessive, leveraging the companion app to confirm the listings can work, for security.
  • Enjoy a functional messaging system!

The rest of the features on the desktop app can stay there. In the end, they are basically just additional features to the core Steam mechanics. Which takes us to…

Image for post
Image for post
Tidying up! Or, the new starting point of everything.

Reorganized hierarchy and navigation flow

Shifting the concept to a companion app meant rethinking the structure and flattening it to make it more concise, by narrowing down the core functionalities I mentioned to 5 basic top-level views. The actual Steam apps have a big number of top level views that inevitably need to live in a navigation drawer.

Image for post
Image for post
Things to do! Lots of ‘em!

Navigation drawers aren’t great things: if an app needs a drawer it probably means that there are too many unique top-level screens. And, well, that probably means that the app is a bit (or perhaps unnecessarily?) complex. With this in mind, I decided to think of a structure that didn’t lose the main point of the app to a bunch of added features — because remember, in this case, we’re working on a companion app, not a full mirror of the desktop experience. And of course the cherry on top is that we end up hiding vital information from users by hiding these links in a drawer.

Lastly, while the drawer is a known Android pattern, Google introduced a bottom navigation bar that mirrors iOS tab bars to its Material Design Guidelines relatively recently, which should be pretty telling.

Image for post
Image for post

Native experience

Of course, we cannot complain about not having native apps and not have our focus be delivering a polished experience that follows appropriate platform conventions that users expect to interact with. While the core functionality is meant to be naturally identical between apps, there definitely would be platform-specific features to improve the general experience for each group of users.

Image for post
Image for post

Big Picture

To get a feel of how flexible this new visual direction could be, I took some liberties to play around with a simplified approach to the Big Picture mode, focusing more on following better practices for designing for TV. This is because, albeit usable, the current version of Big Picture suffers a lot from content overload and tiny type syndrome™. Admittedly though, this was more of an over-ambitious after thought.

Incidentally, while working on the last stages of these articles and case study, Valve announced two new apps for Steam — Link and Video that will be released soon. You can probably tell that I personally agree with the idea of separating these features into new apps, as they diverge too much from what Steam is at its core. So maybe this is a sign of things to come?

Either way, I’m looking forward to seeing the direction that Valve will take with its new apps. Here’s to change.

And you made it this far. Good job! 🙏

STRV is a one-stop mobile app development shop working with top-tier startups like Y Combinator and 500 Startups among others. It currently has offices in San Francisco, Los Angeles, New York and Prague.

Follow the STRV design team on Dribbble or Behance.

Image for post
Image for post

Design Insights

A series of design articles by STRV

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store