Disclaimer: This is a non-functional concept of a non-existing version of Steam built from scratch in Adobe Fireworks CS6 and tested in Adobe After Effects CC. There is no download link or ways for you to use this right now.
BACKGROUND
Ahhh Steam, my second girlfriend. I pass a lot of beautiful nights with you, we share a lot of joy and frustration together and of course, you take all of my money. But I don’t care, because you are worth every penny.
Valve is an awesome company; they make awesome games and they do awesome deals through their awesome Steam service. The company on the inside is as beautiful as the outside. Great passionate employees, liberty, strong focus on building things that gamers will love and the dynamic Gabe Newell on top making sure that gamers and employees are always satisfied and happy (also insulting Windows 8, but that’s normal since Microsoft has their own built-in digital store right now).
Valve is an example of flawless execution and success stories, one after the other. In my opinion, the design and experience of the Steam software is good, but does not represent Valve, their games and the whole service as it should.
It’s messy, unorganized and filled with old design principles and ideas: the exact opposite of what Valve is. Don’t get me wrong, I love Steam and it works impressively well, but I think we need to move around the furniture and repaint it, get something as sharp as the company itself.
Let’s go!
BASICS
Steam is a pretty obvious software with three big ideas behind it.
1) Sell you games and apps… lots of em'!
Valve will take all of your money and you will never be happier in your life. 19.99$ games for 5 bucks, super specials with 80% off and massive sales for every occasion possible. You get a lot of games for ridiculous prices on the best platform to manage, store and play with your digital goods while Valve makes a shitload of money; everybody wins so hard in this, it's incredible. Valve is shameless about taking your money with Steam They announce their sales on the Store front, add lots of graphics to make sure you see them and if that doesn't work, there's a big splash window with today's special every single time you open Steam by default. So Steam is about selling you games –some apps too- but mostly games to be the biggest online digital marketplace. EA is fighting back with Origin, but no offence guys, if your games were available on Steam, I'd buy it there; you still got me to use Origin with SimCity and my girlfriend with The Sims 3 though (obviously). Sell, sell, and sell, quickly, fast, easy!
2) Manage those purchases effortlessly
So, you have 56 games in your Library (15 of them you just bought 2 hours ago because of a sell) and they got your money: now GTFO because they don't care about you anymore. Well, it turns out that they make the after sell experience even better. They really care about you and it shows. You are updated about your game whenever there's a change, you can install them wherever you want to, the games gets auto updated and they will make sure to track and give you all the tools/mods/user-content you need to extend the life of your game. You are not only getting a good deal when you buy your content, you're sure that you will get awesome service with it for years down the road. Easy to install, easy to move around, easy to update and to keep playing with it with all the achievements and content for years.
3) Be a gamer's paradise.
Valve is pushing sales and community with Steam. Workshop is one of the most amazing things I have seen in my life. When you passed most of your childhood extracting ZIPs, managing addons and sending links to friends to make sure they got all of the Garry's Mod stuff required, Workshop makes 5 years ago looks like the dinosaurs age. Forums are active, you can chat with your friends in and out of a game with the awesome overlay that gives you a freaking in-game web browser when you need it, news about your game, etc.
Note
Yes there, will be a lot of spelling mistakes, unfortunately you will have to leave with it. The goal was to put out the information of my research, not to write a perfectly check novel.
Most of the designs are a 1366x768 window.
This research project or I are not affiliated with Valve in any way.
ANALYSIS
Steam does not need to be “fixed” or has major problems like, let's say, Windows 8. Even Windows 8, with all of its quirks, is an amazing operating system that I love using, so imagine what I think of Steam. However, a small visual and reorganization update would make Steam a lot more fun to use.
On the Interface part, the use of gradients, half-opacity elements and textured diagonal lines are very dated. Valve redesigned their software only a couple of years ago and it looked fantastic when they first released it, but the modern design language is growing thanks to Microsoft with Metro, Google with their recent updates and even Apple jumped aboard the clean design train with their weird iOS 7 refresh and OS X. Steam could lose some of these extra/useless visual garnish to make sure that the UI gets a little bit more in the back so that users could better focus on the Store, their Library and the Community features. Make the content the interface.
Beyond the visual design, Steam is also suffering from poor app organization and a lot of repetitive navigation. There are too many unclear menus to do the same task all around the app and this makes it more difficult for a user to say “Here is everything related to navigation”. You need one place where every menu and options are so you don't end up lost looking all around the application. On top of that, controls are repetitive witht he same option found at multiple places and they are taking crucial space and clogging the interface; less space, less content for the users and less stuff to showcase from your store without scrolling. A quick example would be in the Library where you have a whole line with view options and a tiny plus on top of the scrollbar. Yet, there's a View menu right on top. Same thing with the bottom bar, taking a significant amount of vertical space (knowing that we are in the widescreen age with operating systems that have horizontal navigation) for options like the Friends list and picture that could be placed somewhere else and an “Add a game” button when you have a Games menu right on top. I know that they are trying to make things simpler by giving more options, and I am a big proponent of giving more options to users, but not when you lack a central navigation and you end up having a very repetitive navigation.
Social features are also poorly implemented. On the bottom right you have a link to your Friends list and the online count, on the top is the basic account settings and next to it is a unified notification center. Part of the main menu includes a link to your profile and social links. All social features are thrown all over Steam and common interactions like clicking on your profile picture to change it are not present. There's things to be improved there too.
One of the worst problems in my opinion is the Search. Search is extremely important for a software like Steam. You search through the Store, you search through your Library, you search through Forums, through Workshop, Friends, etc. Yet, there is no central Search Bar. In the Store it is on the top right, in the Library on the top left, in Community on the right sidebar and so on. Steam is begging for a central Search Bar that would work depending on what you are looking at and where you are in the app.
Now I understand that a big part of Steam is just a browser frame pointing to the website -I get it, it's easier- but I still strongly believe that the Store should have more love and focus. The Store is the key aspect of Steam, the objective is to sell you as much as possible and the Store could really be more organized and boosted with features. A lot of screen space is lost because of the web-frame-in-an-app approach and it's just sad for such a big and important piece of software. There is a way to fit more information, more features, bigger and more beautiful content and make sure that users have a better view at everything in the store. At the end of the day, you just query your database, get the same info and nearly the same page, just play with the CSS and maybe get 2-3 extra picture for the front-page and you're good to go! Selling digital goods is the primary mission of Steam and an extra minute of work per day for a way better Store is worth it.
Now, during my research I studied the idea of a Dashboard for Steam. A nice and simple screen where you have your important online friends, recommendations from the Store, latest news and updates about your games, quick launch to your last played games, etc. But here's the problem: as amazing as the idea is, it would not be a good idea for Valve to do one. When you open Steam you have 100% of the window filed with games, apps and specials. If only one of them catches your eye and you buy something before hopping in your library to play, it is a mission success for them. If you open Steam and only 20% of your window is filled with goods… then sales will take a hit. This is the part where you need a fine balance between the users' interest and the company plan and as awesome as a Dashboard would be, it would hit Valve quite hard. 15% of additional user satisfaction is not worth 30% of loss since you can't take advantage of impulse buys from your customers.
Valve, your mobile apps sucks balls and you know it. In fact, you don't even care. Simply by looking at your mobile app presentation page where you have the old iPhone 4 version with a Nexus One to showcase your apps, we get that you couldn't care less about them. But! You should put more effort into them. Notifications, tiles with specials and quick access to the Store when sitting on the toilet may all lead to a sale.
Let's recap! Modern redesign, central and cleaner navigation/organization, unified search, enhanced Store experience and improved mobile experience.
STEAM BY JAY MACHALANI
Okay, so here's the most important part of Steam: The Store Front Page. But, before I get into the details of the Store front, let's get familiar with the basic interface and navigation.
So, there is A LOT of wasted space in Steam and the objective here is to maximize the space we have. All of the navigation is thrown into the left side of the window. Everything is there. No more top and bottom big bars with repetitive navigation and confusing patterns. Main menu, sub-menu, a unified add option and everything social related. The main menu is pretty straightforward with the standard options you are used to. The sub-menu is there and bigger since there's a lot of useful options in there and when thrown into the classic top menu options, a lot of people don't look in there. The unified “ADD” button is here to replace the “Games” sub-menu and make it easy to add whatever to your steam account. Going downwards to the social stuff, we have your avatar with your Steam status (Yes I know, nobody on Steam uses their real picture, but for this research it was way easier to do that!) and a breakdown of your notifications. Currently, online friends count is found on the bottom and a unified notifications panel with a mail icon (wtf) on the top. Since I don't really care for cards inventory notifications, here's a clean 3 part notification zone with friends currently online, all notifications like friends' invites and community and finally everything getting in your Steam like a gift or something in your inventory; easier to know what kind of notification it is. The top has a unified Search bar with the classic navigation buttons. Wherever you are, it will search where you're looking at.
Back to the Store front, there's a simple top navigation for you to move around in the Store and your Wishlist and Cart to the right with a count next to them.
Big, clean and most important, more. With this new design you get better navigation, but also more content. More in your face might mean another sale since you saw something you like on the bottom because of the additional space of the page and you clicked on it; this could mean a lot for Valve. Even if you don't want to redesign the Store, which is kinda dumb since it's just a matter of a couple of new layouts and CSS sheets for the same database, at least get a nicer Store front, not a cramped webpage. The content is there, structured and very visible. Wayyyy bigger and nicer and also standard in the way they look and feel! You get that classic Steam green for the specials with the exception of Today's deal because that's extra special, so special that the countdown is in your face with the “Add to Cart” button right in front of you. You don't need to click to get more information about this game, just buy it, look at the price…. they're right!
Steam is dark for a reason: We gamers play games in our dark rooms until 6 in the morning and the last thing we need is a white retina killing interface to get super bright in front of our little tired eyes pushing to play more. But! If you're into retina destroying interfaces, here's a Steam Light theme that still looks awesome. Maybe an auto cycle between Light and Dark depending on the moment of the day would be cool. P.S. Use f.lux.
Let's click on a game. But you know what? There are other games that I want to check out too, but always hitting the back and forward button kinda sucks. The top zone is great to easily move around the window, but now, also great to stack a couple of tabs from the Store, Library and Community to review later or move arround more easily! Looking at Supreme Commander 2 we get a big picture with the title and logo and you can switch between the photos and videos easily, replacing the main picture. In case some of you ask me why I'm still using the old Windows logo in this design, let me explain. Valve are not stupid, they know that the majority of users are still under Windows 8 (with some reasons). Therefore, by using the old logo there is no confusion for them that the game is still working for their older OS and users of Windows 8 knows for sure that it's going to work for them too. 10 confused users, means 10 purchases that didn't happen.
Do the test, take Steam right now and go to the Supreme Commander 2 page and resize it to the same dimensions. See, no need to scroll, you can buy the game and the DLC, get the About, switch to the User Reviews and see which friend has the game… without scrolling anything. Efficiency.
You may imagine some awesome looking carousel or modern looking way to navigate through your games, but don't. That gray list with all of your games is efficient, clean and works perfectly. It's called “Refining Steam” not “Gotta change everything for the sake of design and awesome looking”. I'll leave that behavior to designers. The UX is fine, but there are improvements that could be brought in to the Library view. If you ask what happened to the view options on top, well, there's a View sub-menu on the left side, why repeat it? I call that everyone who publishes on Steam can choose a maximum of 3 colors to alter the way it looks in the Library. You know, get a little color in life. You can play, look at your stats and screenshots, get the news and the navigation is all there as you love and know it. On the top right you have a quick button to the downloads.
Here's Garry's Mod in my Library with the Workshop and Achievements. I also have a couple of downloads in the background.
So the Friends messaging panel is obviously a crucial part of the Steam experience. You can now make it open inside the same window to keep the size thus compressing the content, snap it to a side or of course simply detach and move it around.
The new Friends panel has subtle refinements compared to the current version as the way it is currently organized is already very functional and easy to use. The whole window will take the color of your current Steam status. It makes it easier to know your status, but most importantly, it gives a nice touch of practical color to the rather bland and dark interface of Steam.
The chat window keeps the same layout too with only some minor refinements. The emoticons button is removed in my design… simply because there are 8 emoticons as of now and two of them are the Trademark and Copyright symbol… So, no you will take the place once you actually have real emoticons (like if gamers are going to use them anyways). Also, the little arrow/triangle currently gives you 4 options, but with the space available why not put an icon for two very important options int hat menu: The widely used Steam Voice Chat and the "Add a friend" to the chat button. The window takes the color of the status of the friend you are talking to.
EDIT: As TehVict noted, you can have a lot more emoticons by unlocking and achievements.... so that's something to consider there.
Steam on mobile sucks. There is no attention at all to the design guidelines (in that sense it kinda fits well with their Desktop software…) and there is no Windows Phone app (my dream would be a WebOS app). Don't worry, I'm not omitting the Android app in any way, it's just that the Android app would be pretty easy to guess out of those two designs with the standard top navigation bar and webOS-trademarked-by-Matias-Duarte-swipes when interacting. The apps would be very straightforward and would follow the design and experience of the Desktop app while retaining crucial OS specific navigation and style elements like the Windows Phone panorama or the iOS 7 integrated title/sys top bar.
I know the apps might look like they're too small to navigate, but you need to understand that Steam is all about compressing a LOT of information. Don't worry though, it is tested on the tiniest Windows Phone 8 device on the market and it works/looks great.
CONCLUSION
Where's big Picture mode? Where's SteamOS? It kinda looks the same! Where's the rest?
I know, I know. Big Picture and SteamOS would be a completely different story and no it is not called “Redesigning Steam”, but "Refining" the current version. The guidelines are there, the main navigation and elements too, the rest would not be a revelation or surprising; it would simply follow the same style and guides. The community section might need a restructure, true, but this is about the Steam application and not the online features.
I have some wacky and awesome looking ideas for Steam, things that pushes Steam way beyond what is currently used. But refining the current interface first would be a good first step. Bringing those new navigation and feel concepts before a giant jump would be better to avoid alienating users.
Valve if you're reading this, this whole research project and design is a gift for you. If you want, I will personally come to hand you over one of my crappy USB Drives with all the original designs in vector format (this is all in vectors and layers in Fireworks). Okay, I admit that it would be an excuse just to visit you guys and the Valve office, but please take all of it; for all the awesome stuff you're doing and the great gaming time you're giving me while stealing all my money. Those are some blueprints to help you steal even more of my money, but also make gamers happier at the same time!
If you excuse me, I'll continue my slowly advancing research called “Improving iOS”… That one is tricky!
You can download all of the JPEGs in better quality right here.
You can also check the inks on the side (or top for mobile) or my Twitter, Facebook page and YouTube channel!
Jay Machalani
UX/UI & Branding Architect
2014
Thanks to everyone who helped me with their feedback!
Luke Plunkett, Carl Caron, Sacha Hussmann-Lapierre, Jahmssen Ruiz Castaneda, Steven Brown, Félix Bourbonnière-Clément, Francis Laparé, Sébastien Gagnon, Nicolas Krafft, Antoine Marsan, Jimmy Harvey, Etienne Gauvreau, Yannick Leblanc, Eric Payment and all the others.