Steam App Redesign

PRODUCT DESIGN

INTRODUCTION

Steam is a leading digital distribution platform for video games, serving millions of users worldwide. Despite its popularity, the Steam website had become cluttered and difficult to navigate, with a dated design that didn't adequately address the diverse needs of its users. I wanted to redesign the Steam website to create a modern, user-friendly experience that caters to both new and seasoned gamers.

MY ROLE

Research, analysis, product design

THE TEAM

Solo designer

Timeline

1 week

problem statement

The Steam website, initially designed for a broad range of gamers, became cluttered and hard to navigate as the platform grew. It struggled to meet the diverse needs and complex workflows of its users, from new gamers to seasoned veterans.

How might we redesign the Steam website to provide a seamless, engaging, and intuitive experience for all users, while maintaining simplicity and delight across the diverse gaming community?

breakdown of the problem

Navigation Complexity

Users find it challenging to move around the platform due to a cluttered layout and unclear organization of information.

Information Overload

Users feel overwhelmed by the amount of content presented on each page, making it difficult to focus on relevant information.

Disconnected User Journey

Users experience disjointed interactions as they navigate between different sections of the platform, with content lacking cohesion and consistency.

Outdated Design

The platform's design feels old-fashioned and does not align with modern user expectations, resulting in usability issues and a lack of visual appeal.

THE USERS OF Steam

Steam serves a diverse user base, spanning casual gamers to dedicated professionals, providing relaxation and entertainment across various interests and demographics.

Our users include college students who seek engaging, manageable games and appreciate discounts and personalized recommendations. Professionals balance gaming with busy work lives, valuing immersive experiences and social interaction through multiplayer games. Casual gamers enjoy user-friendly games for fun and relaxation, preferring personalized suggestions. Hardcore gamers invest significant time in gaming, seeking advanced features, detailed reviews, and active community engagement, often participating in Steam Labs experiments and providing feedback.

PROCESS

I began the process with a thorough review of the current user experience on Steam.

KEY TAKEAWAYS

Creating user journeys for casual and hardcore gamers revealed significant redundancy in the app, exacerbating navigation challenges.

The existing design had low usability scores based on my benchmarking.

The user flow was overly complex, making navigation difficult.

The UI was outdated and needed a modern refresh.

Design Goals

Modern Aesthetic

Aim to update the visual style with contemporary design elements, ensuring a clean and appealing look that aligns with current design trends.

Simplified Navigation

Focus on decluttering the interface and streamlining navigation, making it easier for users to find what they need quickly and efficiently.

Enhanced Content Accessibility

Prioritize the organization and presentation of content to ensure users can access important information easily and without feeling overwhelmed.

PROCESS

In redesigning the Steam website, I systematically addressed usability issues to enhance user experience, gaining valuable insights that shaped a more intuitive platform.

  1. Unveiling Usability Gaps

  • Conducted a comprehensive usability test of the Steam website.

  • System Usability Scale (SUS) score was 37.5 (below average of 68, "Awful").

  • Gathered qualitative and quantitative data to identify pain points.

  1. Charting the User Journey

  • Developed a detailed user flow for the entire website.

  • Visualized the complete user journey.

  • Identified friction points and inefficiencies.

  1. Spotting and Marking Redundancies

  • Analyzed user flow to find redundant elements.

  • Marked inefficient components in red.

  • Highlighted areas needing streamlining.

  1. Decoding User Behaviors

  • Conducted extensive research to understand users.

  • Created detailed user personas.

  • Mapped user journeys, focusing on key interactions and pain points.

  1. Evaluating the Existing Landscape

  • Performed an in-depth analysis of the Steam website.

  • Evaluated structure, functionality, and visual design.

  • Identified strengths and weaknesses.

  1. Streamlining and Revamping the Interface

  • Removed identified redundancies.

  • Decluttered the interface and enhanced visual elements.

  • Ensured a consistent design language.

  • Simplified navigation and improved content organization.

  • Guided by insights from usability tests, user flow analysis, and user journeys.

solution

Final Outcome: Highlights

Each highlight captures an aspect of the Steam experience. It calls out which design goal it adheres to, what user scenario or problem it's addressing, and what the solution is.

DESIGN GOAL: Modern Aesthetic

Rounded Corners

USER SCENARIO

Users find sharp corners and outdated design elements unappealing, impacting the platform's modernity.This visual inconsistency affects their overall perception of the platform's modernity.

Solution

Introducing rounded corners modernizes the interface, enhancing visual appeal and cohesion.

DESIGN GOAL: Simplified Navigation

Repositioning the Sidebar

USER SCENARIO

Users struggle with a prominent, overwhelming sidebar, hindering navigation.

Solution

Moving the sidebar to a hamburger menu declutters the interface, improving navigability.

DESIGN GOAL: Simplified Navigation and Enhanced Content Accessibility

"More Like This" Section Placement

USER SCENARIO

Users feel distracted by the "More Like This" section, diverting attention from current game details. Users also feel overwhelmed by excessive information presented on game pages.

Solution

Moving the "More Like This" section to the end of the page allows users to focus on current content before exploring similar options. Also grouping overwhelming information under a "More Info" dropdown menu provides optional access without initial overload.

DESIGN GOAL: Enhanced Content Accessibility

Optimizing Image Placement on Game Pages

USER SCENARIO

Users find the terms "mostly positive" and "very positive" too vague, making it hard to judge a game's quality

Solution

Replace vague terms with specific percentages and review counts, like "84% of 135,154 reviews are positive." Use of star icons for categories such as Graphics and Gameplay. Include 2-3 one-line review snippets with a “Read More” link for detailed insights. This approach provides clear, precise information, helping users like Alex make informed decisions without feeling overwhelmed.

DESIGN GOAL: Enhanced Content Accessibility

Video Pause Indicator

USER SCENARIO

Users experience confusion when video playback is paused due to lack of clear indication.

Solution

Adding a pause/play button overlay when video is paused improves user understanding and control.

Learnings and relfections

│Listening to Users is Key

In this personal project, focusing on what users need and want helped me create a better platform. Usability tests and user feedback highlighted major issues and guided my redesign efforts, showing how important it is to keep users at the center of the design process.

│Simpler is Better

Simplifying the interface made a big difference in user experience. By removing extra elements and streamlining navigation, the platform became much easier to use. This project taught me that a clean, organized design can greatly enhance user satisfaction.