Steam Steam is an online gaming platform that allows game developers and gamers alike to connect. Developers can distribute their content for other users to buy and utilize. To make this community safer and more efficient, Steam has recently implemented mobile apps to provide an extra form of security. I found that the desktop app was already hard enough to navigate let alone the mobile app.
Taking a first crack at it
Because this desktop app was something I used almost everyday, I decided to recreate it to better suit the user.I found that the app is very outdated in its design and difficult to navigate; the value it adds to the customer's experience is ultimately affected by these two things.
What's actually important to users?
Through user research, three overbearing aspects of Steam stood out as being invaluable to the experience.
1. Being able to navigate the client using as few pages as possible.
The Front Store Page was redesigned to have less links to click on. Originally, this page had too much going on in the UI, not providing a clear path for the user. The store should only present the user with relevant information as in sales for certain games and most popular items.
The number of links is significantly less but that does not make each exisiting link any less relevant.
Navigating through this app is also very time consuming as there are many actions that can be done using this app and not knowing where certain tasks can be done is very annoying. To tackle this, I decided to make the navigation menus toggle on a hover. Finding information regaring the user's account is also made easier as it can all be found in one place. The clear colour contrasts also make these naviigation bars stand out as opposed to the traditional grey on grey navigation bars Steam uses.
2. Have some options for customization. A new addition to my design is the Application Game Bar. This is a bar that is present at all times during the user interaction with the app. It shows the most recently played game, allowing the user to quickly re-open the game as opposed to having to find the game library hidden in the app. The game bar isn't exclusive to the most recently played game, as different games can be added for a quicker launch.
The application bar contains a lot of information that users would otherwise have to search for.
3. Be specific and concise. The Game library is very similar to the one currently implmented. Most of the changes here are mostly design changes with the exception of having the main navigation also included in the library. This allows users to filter out different applications in the library.
The "Explore" section acts as a general feed, similar to Reddit, but can also be specified into a category.
Steam features a series of links for each game which provide information such as the store page and discussion groups. These links were omitted because they take up too much space and hinder users from starting the game. For this same reason, The section that displays online friends has also been enlarged to enhance the gaming experience.
One huge aspect of Steam are the sales on games that are constantly taking place. Users will buy games by the dozens at any given time. To streamline this process, the games detail page was made more clean and minimalistic to provide the most efficient amount of information regarding said game. The most common things users look for are the game trailers, the user reviews to confirm the quality of the game. Videos will play on hover instead of autoplay so that users will not be as distracted when reading about the game. The systems requirement section has been enlarged so that users can quickly glance at the screen and are quickly able to determine whether or not their system is compatible with the game.
Result In the end, although I only created unoffical mockups for an application that wouldn't see these changes. I was very happy with the result. This was more of a passion project because I, and probably many more people, would like to see UI changes made to this application.