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.

The 7 deadly sins

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.

Someone discovered Photoshop filters

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.

Steam website redesign concept

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.

Steam desktop application & friends list

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.

Left side navigation on Google TV software

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.

Steam running on an HDTV in situ

Steam TV application

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.

iOS featured games and new releases

iOS new releases

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.

iOS sidebar

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.

iOS friends list

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.

Goog

Last summer I had the privilege of interning at YouTube in San Bruno as a user experience designer, it was a fantastic opportunity and I loved every moment. I believe internships are an extremely underrated experience for students in the UK and I urge undergraduates to begin seeking them out from year one of higher education. Be ambitious and apply to any company you love. I would never have thought to apply to Google for an internship until they contacted me.

As I believe, for the most part, in what Google is doing I wanted to return, become a part of, and influence what they’re trying to accomplish. Therefore, in December last year I proceeded with a number of interviews hoping to earn a place within a team there.

When August 2012 comes around I shall be working for Google Korea as a design oriented webmaster. Definitely more than a stone’s throw from the UK where I currently reside, but I’m extremely excited to work with the team there and I aim to learn a lot. The Far East technology sector has always intrigued me with regards to the use of daily consumer products and services. I’m also extremely interested in the differences between interaction design in the East and West and what makes products created there succeed where others from the West fail. I have to admit that I’m also a massive sucker for the information density seen on many of the products and services throughout Asia.

If all goes well I shall be flying out at the start of August to start hunting for accommodation, and settling in, but until then I hope I can write a few more posts about design and other events.

If you have any questions do feel free to tweet @joshcollie or email me at hello@joshcollie.com.

Design Arsenal

Designers always have a lot of variation in how they work and what they use to get the job done. I’d like to share my methodologies of working along with the hardware and software I used to complete it.

My day to day machine for work, play and everything in between has recently become the low end 13″ MacBook Air and I’m sure many readers may find this typical of a designer but I’ll tell you this much, I’m really not an Apple fan. It is the only Apple product I own. My old machine (Samsung Q70) was a brilliant workhorse for the 3 years I had it and only set me back around £300 at the time of purchase but it was time to update as it was showing its age a little. I have a few thoughts on the platform of choice debate but I shall save that for another day.

The hardware accessories I use in conjunction with my laptop consist of a Logitech MX518 mouse, 8GB SanDisk Pattern USB drive and a set of Sennheiser HD280 cans for one of my main design motivators, music. If you’re ever interested in the music I listen to when writing these posts or designing then you can look at the bottom of any post on this website and see the song I listened to the most when working. I’m a huge consumer of music and will sit for hours on end wearing my Sennheisers tearing through my music collection as I work.

I am a die hard Fireworks fan and wouldn’t switch to anything else for design. There are many other tools for web and UI design but they’re just not part of my workflow. For creating markup I have recently been using TextMate but I have a strong love for Notepad++ on Windows, simple and to the point.

My favourite tools for sketching and wireframing are the closest pen and paper me. No, I don’t have a stack of precious Moleskines accompanied by fine Japanese pens. I’m completely at home with a “borrowed” hotel pen and some Post-it® notes. Anything to get the job done quickly. You may also be surprised to know I don’t sip lattes in Starbucks while I work and nor do I place my phone on the table for all to see. As a matter of fact I don’t actually own a phone at all.

My method of designing is very simple. I tend to generate most design ideas when I’m not actually designing as it produces fruitful results with minimal effort. I honestly find it very difficult sitting in an office from 9 to 5 attempting to design and therefore if I can get out of it, I will. Most of my designs and ideas are spawned after midnight in which case I grab the nearest pen and paper to get the idea out and documented. If I can’t stop thinking about the design I’ll fire up my machine and start playing in Fireworks as I cannot stand to waste time. This way I can do a weeks work in 2 days solid and the best part is that I never get stressed about what I have to do.

One of the worst ideas I could possibly attempt is sitting down and forcing myself to work when I just don’t feel like doing it. If there comes a point where I have been unable to design for a while, I pick a completely random website and redesign it within a couple of hours to try and create new ideas. If it fails, I at least have a design I can throw out to the Dribbble or Forrst community for ideas and perhaps they’ll throw me a line to work with. Who knows, it may snowball into something great. Although this has been a rather brief overview of how I work, I hope it can provide you with an idea or two for yourself.

If you would like to know any other details about my working environment, send me a message on Twitter and I’ll get back to you.

Nascence

After months of countless redesigns never to see the light of day and much deliberation over what shall suit me best as an online presence, I have finally decided that for the time being a simple journal of thoughts will be appropriate for what I have planned.

For those of you who are visiting this domain for the first time, I am Josh Collie, a final year student at the University of Dundee studying Applied Computing. I’m also a freelance designer who has interned with Google and used to be lead designer on the multi-platform digital distribution service Desura.

Desura's Landing Page

I plan to write articles about design, technology, travels and topics of interest to me. I also have a few application designs which may end up making their way onto smartphones at some point in the future and also a monthly feature focusing on website redesigns. If you wish to follow me on Dribbble where I will be posting teasers of the new things I am working on, do feel free.

The design of this site was created with two objectives in mind; speed and simplicity. The typographical elements at first may not appeal to all, especially the use of Times for the body text, but for a number of reasons it has become the typeface of choice. As much as CSS font stacks allow for substitution and fallback alternatives, I’d rather not leave it to chance or slow down request times with extra font embeds.

The font for headings is the rather commonly used Proxima Nova but after experimenting with over 40 different fonts for the headings, Proxima suited the style of the site best and provides high readability at smaller sizes. The font embedding service of choice is the marvellous FontDeck which is my favourite service out of those that provide fonts at a cost but I also love the service Google WebFonts offers.

You may see some minor changes over the coming months and a little testing will be carried out, the results of which shall be made available to readers of this site. If you wish to hear about these first or keep up to date with what I’m doing, I encourage you to follow me on Twitter.