Steam Mobile App Redesign
Wick Buccella
Steam Mobile Redesign
Project Summary:
This redesign addresses the friction points in the current Steam Mobile app: poor navigation, inefficient workflows, and outdated visuals.
By restructuring the Information Architecture and reconfiguring the hot-bar, there was streamlined access to high-frequency features like friend activity and trade confirmations.
The result is a modernized interface that improves task efficiency and social connectivity while staying true to the established Steam brand.
Role: Lead UX Designer, Researcher, Information Architect
Project Type: Mobile App Redesign
Team Size: 1
Timeline: 3 Months
Case Study Link: https://wickbuccella.webflow.io/steam
Hi-Fi Prototypes
The Problem
Confusing Navigation: A convoluted layout makes it difficult for users to find what they need intuitively.
Inefficient Workflows: Simple tasks require too many unnecessary steps, particularly within the crucial confirmations menu.
Unclear Visual Hierarchy: A lack of distinct visual cues makes the interface dense and challenging to parse at a glance.
Buried Social Features: Cumbersome access to friends' activities disconnects users from their gaming community.
Lack of Personalization: The interface fails to adapt to individual user habits or library preferences.
The Solution
Hot-Bar Reconfiguration: Restructured the core navigation bar to prioritize immediate, one-tap access to the most frequently used features.
Refined Visual Hierarchy: Reorganized layouts, spacing, and visual cues to guide the user's eye and make parsing dense information effortless.
Reduced Cognitive Load: Stripped away less pertinent information on individual pages to streamline user workflows and minimize decision fatigue.
Modernized UI: Elevated the overall aesthetic to feel clean, contemporary, and polished while remaining strictly true to the core Steam brand.
Research Phase
To map the cognitive friction within the current app, I conducted qualitative user interviews with core Steam users. The consensus was clear: users wanted desktop-level feature parity, but were hindered by an outdated, cumbersome mobile interface. They viewed the app primarily as a transactional tool rather than a gaming companion.
Core User Pain Points:
Navigation Failure: A staggering 80% of interviewees were unable to locate the settings menu in the current application state.
Workflow Friction: Users primarily open the app for Steam Guard, Confirmations, and checking store deals, yet these high-priority flows felt cluttered and buried.
Social Disconnection: Viewing friend activity—a crucial component of the gaming ecosystem—required far too many interactions, breaking the community connection.
Competitive Benchmarking
I analyzed direct and indirect companion apps from Xbox, PlayStation, and Nintendo. The benchmark revealed a stark contrast: competitors successfully integrate seamless social ecosystems and clear visual hierarchies. Steam’s mobile experience severely lagged in connectivity, validating the hypothesis that the redesign needed to elevate community features to meet modern console standards.
Competitor Analysis: Audience
Competitor Analysis: First Impressions and Content
Competitor Analysis: Interaction and Visual Design
Defining the Mental Models
Based on the synthesized research, I developed two primary user archetypes to guide the new information architecture:
The Optimizer: A busy professional using the app for pure utility. The Design Goal: Streamline Steam Guard and market confirmations so essential tasks take seconds, not minutes.
The Socializer: A student who uses gaming to connect. The Design Goal: Eliminate the friction of viewing online statuses and discovering what friends are playing.
Design Phase
Wireframing & Architecture:
Touch Optimization: Reorganized the primary layout and hot-bar to place high-frequency tasks squarely within intuitive thumb-zones for comfortable, one-handed use.
Decluttering the Interface: Implemented familiar mobile navigation patterns to reduce cognitive load, stripping away non-essential information that previously buried core features.
Elevating Hierarchy: Established a clear visual hierarchy that surfaces the most critical user goals—like Confirmations and Social ecosystems—immediately upon opening the app.
Wireframe Example: The Social Tab
Visual Identity & Design System
While the architecture needed a complete overhaul, it was crucial that the final interface still authentically felt like Steam. The goal was modernization without losing brand recognition.
Typographic Unity: Standardized Motiva Sans across all screens to ensure cross-platform consistency and improve mobile readability.
Strategic Color: Anchored the UI in Steam’s signature dark grays and blacks, deliberately reserving vibrant blues and teals as accent colors to clearly highlight interactive elements and calls-to-action.
Visual Depth: Incorporated familiar gradient treatments to add dimension, modernizing the aesthetic while maintaining the established brand identity.
Color Palette
Typography
Conclusion
The Impact & Results
To validate the redesign, I conducted a follow-up usability study focused on exploration, feedback, and overall impressions. The data confirmed that the new architecture successfully resolved the initial friction points, resulting in a significantly more intuitive mobile experience.
Usability Metrics:
4.8 / 5 – Navigation Discoverability
4.6 / 5 – Workflow Efficiency
4.6 / 5 – Visual Appeal
5.0 / 5 – Overall User Satisfaction
User Feedback:
"The ease it is to use... the current Steam app makes me have to search for things." — Participant 3, highlighting improved discoverability.
"Perfect, it matches the PC app, but on a mobile space now. Just about in every way... this would be an app I would actively use." — Participant 5, validating the cross-platform brand alignment.
Takeaways & Future Iterations
While this was a hypothetical redesign, a true product lifecycle is never finished. If this were moving into development, the next steps would include A/B testing navigation variations, continuous usability polling, and tracking user retention KPIs.
On a personal level, this project was instrumental in refining my end-to-end design process. It allowed me to sharpen my unbiased interviewing techniques, advance my high-fidelity prototyping skills in Figma, and solidify my approach to solving complex cognitive friction within digital interfaces.
Like this project
Posted May 31, 2026
A UX redesign of the Steam mobile app that resolves navigation friction, modernizes the UI, and elevates social features for a seamless companion experience.
Likes
0
Views
0
Timeline
Dec 1, 2024 - Feb 28, 2025
