Steam redesign

When using the digital game distribution client Steam the other day, I was rather perplexed when I discovered 7 links to my game library page all within a tiny area. This isn’t to say duplication is a bad thing, but I think in this circumstance it is a little overkill.

So with the prior event as a prompt, I set about redesigning the Steam application and website as a little design practice. Originally Steam was an application that took after the Windows UI back when the classic Windows look was the ‘in’ thing. I really liked this version of the application as it tied in rather nicely with the operating system and it was extremely responsive. I’m sure many users who were on Steam back when it was first released now feel a little sorrow regarding some of the extra baggage Steam has accumulated over the years making it a lot less responsive than the original software.

Steam has undergone a series of redesigns to bring it up to the current state. Some of those revisions weren’t so great.

I mean no disrespect to those who designed this on the team but it wasn’t Steam’s best phase and thankfully didn’t last too long if my memory serves me correctly. Design teams are usually working under some form of guidelines and I fully admit I don’t know what the objectives of this redesign were, so the onus probably doesn’t all fall on the designer. If it does, I’m sorry.

Please take all critique of the current style with a grain of well meant design banter.

The current Steam website has some lovely misaligned diagonal striping in the header, constantly depressed looking buttons in the navigation and more gradients than you can shake a gradient brush at. The variety of different button styles is absolutely ridiculous and the amount of misaligned sections really sets my alignment OCD senses tingling. But all aforementioned issues aside, the general information architecture isn’t terrible and the content is rather no-fuss which is how I imagine the gamer audience of Steam like it, I know I do.

I set out to create a site that would hopefully demand less rendering time and power from the WebKit engine that powers the browser within the Steam application as I know myself and others are a little annoyed at the responsiveness displayed on the website on lower end machines. Some may say this is a non-issue but I completely disagree. Secondly, I wanted to simplify and strip back the site but leave a more modern feel that should hopefully age and scale well with Valves supposed venture into the living room.

I’ve taken away a lot of, what I believed to be, the unnecessary bounding boxes of content to allow it to breathe a bit more on the site. The bounding boxes surrounding individual games hopefully give users a better indication of the click target area. The design is based upon a strict grid system but allows for responsive design too. I also added a small touch where every element is positioned, coloured and aligned using the number 4 (or a number divisible by 4) as I count this as Steam V4, but also because I’m a little crazy with numbers. Therefore, padding is 16px from the edge, some elements are 40% opaque and others have heights and widths divisible by 4. The iconic green colour Steam is known for remains and is used to highlight the key elements such as actionable items and sales.

I’m very aware that I’m not using the same FF Din type associated with the Steam brand but this is simply because I don’t believe it sits well with this amount of textual content. For those interested the font is T-Star OT. I believe a secondary typeface is required for more prolonged periods of reading and it would likely be Helvetica but I have yet to experiment with larger blocks of text. This may be seen in the game profile page which has yet to be designed.

To give an idea of the interactions on the site, the carousel and the large background image all fade between the next and previous images. The featured games could potentially slowly slide from right to left, varying in speed depending on the positioning of the cursor but my preferred interaction would simply have arrows shown on hover. When a game in the ‘specials’ section of the sidebar is hovered upon, the percentage drops down from below the game image. In a couple of days I will create a working HTML/CSS prototype for people to experiment with.

Now for the desktop application. I feel that this part of the design may be a little more contentious due to the positioning of the main menu but first of all, hear me out. The Steam hardware survey reports the majority of gamers use a widescreen display meaning, that for many, vertical space can become rather valuable especially if the widescreen display is on a laptop with a higher pixel density. Merge this with the possibility of a Steam console and it makes it clearer one would opt for a side navigation bar. However, this is merely a preference and the user could be allowed to place it at the top, left of bottom of the window.

Having the navigation on the left allows what I think is a simpler transition to a lean back consumption experience and something that many console or media streaming users are used to.

Assuming users are going to be an average of 8ft or more away from their television, there is not going to be much point in some of the metadata (release date, platforms etc.) surrounding the games but for now I have included the same details on both the TV concept and website.

I have not had a chance to use the Steam mobile application on any smartphone as of yet so I cannot comment on the merits and weaknesses of it. The iOS application concept has very similar features to both the website and desktop application. The pull out sidebar to the left allows you to access any area of the application in 2 taps. The friends list slides in from the right hand side so you can easily chat on the go while browsing new games or the forums.

Upon scrolling the list of new releases, the tab bar moves to a fixed position at the top of the screen. You can view new releases, games by genre, releases for OS X or recommendation for the current user.

To access the side menu, you can swipe from left to right at the left edge or tap the button in the navigation bar at the top left.

The friends list allows you to message your friends and add new buddys, much like how I imagine the current mobile application works. The friends list is viewed by swiping from right to left at the right edge of the screen or by pressing the buddy button in the navigation bar.

As of now, these are the only screens that have been designed but if I have any extra time I may implement some changes from feedback I get. Also, the iconography could be vastly improved but I would like to get feedback on this initial iteration before moving on to refine the icons. Please feel free to suggest a new icon for the library button as this is the worst of the set. It should hopefully convey a collection of games and also media.

Let me make this very clear. This is in no way a completed project and should not be treated as such. This is a beginning of a little side project that I would like to rapidly iterate on with help from other gamers. Let me know what you dislike about the current Steam UX and application and I’ll do what I can, from a design perspective, to fix it.

I’m really hoping some Steam users and gamers can provide me with some criticisms, warts and all, of where you see these designs falling flat in terms of both usability and aesthetics. Also let me know if there is anything I have missed out. I’m not one to shy away from criticism of my designs and welcome as much as I can get. Saying that, it doesn’t always mean that every criticism is followed through to revision or change but absolutely all feedback is considered. Feel free to tweet @joshcollie or reply to the thread in the Steam forums.