Browsing games, made easier
MY ROLE
Individual product designer (no affiliation with Valve Corporation)
TIMELINE
2 Weeks
COMPANY
Steam is a video game digital distribution platform developed by Valve Corporation. It was launched in 2003 as a way for Valve to provide automatic updates for their games, but eventually expanded to include games from third-party publishers.
THE PROBLEM
Users found the layout and navigation system of Steam confusing, spending longer time to find the correct page. Several users also found that the overall design of the UI is outdated and inconsistent across every page of the platform. The amount of information displayed overwhelmed the users and triggered analysis paralysis.
THE GOAL
1. Provide better information hierarchy and reduce the number of CTAs and buttons
2. Make the navigation more intuitive and make the UI consistent across pages
3. Allow the user to see the buy button for the game easily
final deliverables & results
A cleaner, modernized design
To challenge myself, I conducted a usability case study to see how Steam could be improved. Being an avid gamer and long time Steam user myself, I wanted to see how other people use the platform. In a 2-week spring, I made changes to current the layout to streamline the navigation, reduce information overload, and to match users' mental models
PROFILE PAGE & NAVIGATION
USER'S LIST OF GAMES
GAME STORE PAGE
DISCOVERY
Buying games on Steam shouldn't be so foggy
I used several methods to identify pain points of a user while using Steam: through usability tests, reviews and reseaching competitors.
USER INTERVIEWS
I started off with conducting usability tests with 5 people and interviewing the users about their pain points from using Steam.
COMPETITIVE RESEARCH
I analyzed a few competitors in the gaming industry to find common design patterns and information presented on their platforms
USER REVIEWS AND FEEDBACK
Steam has a discussion page where people post feedback, opinions, and issues relating to any part of the platform or games that it carries
iterating
Redesigning the Platform
ITERATION ONE: ADDING TABS TO PROFILE VIEW AND MOVING THE MENU TO THE LEFT
From the first iteration I liked the idea of keeping tabs on profile, to separate information better. Since several users were confused by the main menu navigation on top I tried moving it to the left side
ITERATION TWO: GAME LIST VIEW
I played around with several ideas of designing a user's list of games, finally deciding on larger thumbnails with a simple box below with information about the game (hours played, etc.).
ITERATION THREE: STORE PAGE
In this iteration I wanted to improve the Store page of a game by adding a visible buy button within the landing screen, and improving the information structure
deliverables
Final Result
PROFILE VIEW
BEFORE
1. User thought the main menu was related to user's profile. Users clicked "LIbrary" thinking it will get them to the full list of user's games.
2. Users found the overall design outdated, with unnecessary gradients, and inconsistent across pages
AFTER
1. The redesigned menu showed to be more effective for navigating
2. Flat design was seen as more up-to-date and modern. The colors and layout across the pages was kept consistent.
USER'S GAME LIST
BEFORE
1. Users' first instinct was to click the game's thumbnail or the title - neither worked (must first click "Links", then select "View in Store" from the dropdown)
2. Too many buttons/options under each game confused the user and they spent more time clicking around
AFTER
1. Made reaching the Store page more intuitive by allowing user to click on the thumbnail
2. Reduced number of buttons by moving them into a collapsing menu and made the thumbnails bigger for better aesthetic appeal
GAME STORE PAGE
BEFORE
1. No visible buy button upon landing on the store page - took the user a few moments to find it
AFTER
1. A visible buy button upon landing on the store page, above the page fold - will bring to the full list of purchasing options
validation testing
Users found the new design clearer and easier to use
5/5 of the users found the redesigned version easy to navigate through and managed to complete the tasks within 2 minutes.
final thoughts
Key Takeaways
KEEP IT CLEAN
Too much information can trigger an analysis paralysis to a user. Providing visual structure, contrast, and keeping it to the minimum allows the user to focus on what's important.
CONSISTENCY IS THE KEY
Keeping a consistent design promotes brand reliability and recognition. It's important to have design, copy, visuals support what your company is
USER KNOWS WHAT'S UP
Users have certain expectations, mental models and intuition that help them make decisions quickly, without having to actively think about it. Challenging such mental mental models can cause the user to become frustrated and unless their value of the product is high, they might leave and look for alternative options.
Let's chat!
I'd love to connect with you! Let's talk about anything, and grab some coffee
© Anastasiya Pak 2020