Steam Redesign
Gamer's Passion
background Info
Steam Client has been one of the top platforms for PC players to be able to consolidate and play a variety of games all through one client.
The client has been with the same layout for several years without much updates to revamp and improve the user experience.
This case study will demonstrate your visual design capabilities as well as adding my own taste and design experience all while keeping the feel of what Steam Client is.
The Problem
Steam Client is one of the top platforms for PC players to manage their game libraries but has not been updated in years for a better user experience.
The Solution
Redesign the Steam Client to streamline the Store and transaction process with a modern UI.
User Persona
Gamers are all about the UI/UX whether they know it or not. What makes a good experience will either retain or deter a user from further playing a game. A clunky UI with information overload can deter users from exploring more.
Maybe I can utilize the popularity with minimalism. A more modern UI will help the user navigate through a transaction process smoother creating clear and distinct Call to Actions (CTA).
The Pros and Cons
Leading The FLow of Users
This user flow shows the navigation through the transaction process as well as the game library which are the two main pages of the client.
I will focus on the first three pages as part of this case study and see how I can maximize content on each page. I can also talk about how I will combine the Game Information with Purchase for Myself which will reduce a page.
Style
This style sheet is to keep in line with how steam feels and what it looks like. Keeping the same dark tone it has for the background. Clean and modern but still interesting and full of explorable content.
Wireframe
Wireframes are essential to creating a good design, as it serves as the skeletal structure of the design. The preliminary ideas were to consolidate the current steam engine which displays a large amount of information into a more streamlined version of itself.
I do this by keeping certain aspects like the sections similar, but giving a different look. Moving towards a more paneled approach allows me to maximize the amount of space that the user lands on, as well as the expandable and collapsible game library feature which allows me to browse my current games while on other areas of steam (e.g. store page, community page).
The shopping cart wireframe tries to lead the user to other games they might enjoy in a more efficient way by giving them a variety of options, versus the original buy page which has a lot of negative space and requires more scrolling to see other games.
Demo & Feedback
“The update looks great but the special offer content seems way too big and in your face.”
—"ChrisWhooster" - Gamer
“I like the personalized game library but I like to see all the games I have. I like the current steam library design.”
—TheRealCaviar - A Half-Life Player
Revision And FInal
These mockups demonstrated my ability to utilize the user feedback and implement them back into my design. I’m delivering a modern game library but with a full view of the library of games. And I was able to reduce the size of the special offers but keep the necessary information to entice users.
Future FOcus
More Negative Space let User less “crowded"
Condensed Game Library with Original Taste
Having Game Library On the Sides When Browsing Steam Store
I was able to deliver a modern UI that was still able to maximize the explorable content. But I also have other focuses that I would tackle on in the future.
-
Creating a light mode for Steam.
-
Implementing a ”sticky“ game library that will pop up in the store.
-
Designing pages for gaming communities.