Steam App Redesign Case Study
By Sedona Snyder
Responsive Design Project — Mobile, Desktop, and Watch Interfaces
Responsive Design Project — Mobile, Desktop, and Watch Interfaces
Project Brief
This project was a semester-long exploration of responsive design. The goal was to choose a real-world app and redesign it for three platforms: mobile, desktop, and wearable (watch). The project needed to incorporate key principles of usability, accessibility, and device-specific functionality. I chose the Steam app, which is widely used by gamers, but often critiqued for its dated UI and inconsistent experience across platforms. My objective was to create a cohesive, and streamlined design system that adapts fluidly to all screen sizes while improving key user tasks like chatting, purchasing, and browsing.
Why the Steam App Was Worth Redesigning
Steam is the largest digital distribution platform for PC gaming, with over 132 million monthly active users (Valve, 2023). Despite its massive user base, its mobile app averages only 2.9 stars on the Apple App Store, with complaints mainly centering around confusing navigation, broken purchasing processes, and poor communication features.
Redesigning this app was a meaningful opportunity because it serves such a large and diverse group of users like myself. Gamers use Steam across multiple devices—not just to buy games, but to message friends, track downloads, and manage their libraries. Improving its cross-platform usability and visual clarity could significantly enhance the user experience and even improve retention.
What I Did: Description of Work
I completed every stage of this project independently, including research, wireframing, prototyping, usability testing, and final visual design. I used Figma for all design and prototyping work, and recorded user feedback using OBS and Canvas peer discussions.
The full process included:
Initial research (2 weeks)
Low-fidelity sketches and wireframes (1 week)
Mid-fidelity prototypes for all devices (1 week)
Usability testing and research summary (2 weeks)
Responsive refinement and video walkthroughs (1 week)
This case study documents the final polished work as well as the iterations along the way.
Design Strategy
My design strategy focused on clarity, consistency, and control. Steam users want quick access to their game libraries, reliable messaging, and a smooth store experience. I reorganized the UI into simplified tabs, emphasized icons and text equally, and ensured consistent feedback across interactions.
Mobile: Prioritized thumb navigation, messaging fluidity, and smoother checkout
Desktop: Emphasized screen real estate with clean download management
Watch: Focused on notification clarity, game update status, and message alerts for quick glances, as well as download control/monitoring
I followed accessibility guidelines by ensuring font sizes were readable (15px+), buttons met the 44x44px touch target minimum, and contrast ratios were AAA compliant where possible.
Usability Test Feedback
Executive Summary
Overall, users responded positively to the layout and tone of the designs but identified areas where usability and accessibility could be significantly improved, particularly in messaging functionality and checkout flows. This feedback served as the foundation for my next design iteration.
Qualitative Findings
Participants mentioned the following:
Lack of visual feedback on messages: It was unclear when a message had been read or remained unread. Users expressed frustration about not knowing if someone had responded or not.
Navigation flow confusion: On mobile and versions, users wanted a way to return to the previous screen easily (especially from the chat interface), indicating the need for a back button.
Checkout issues in the store flow: Several users expected to be able to complete a full checkout process but encountered broken links or dead ends.
Font readability: A few participants commented that the font sizes: particularly on the watch—felt too small or stylistically hard to read.
Button size concerns: On touch devices (especially the watch), some buttons were too small to tap comfortably, raising accessibility concerns.
Quantitative Findings
From the usability test data:
60% of participants failed to complete the full checkout process without help.
80% of participants hesitated or backtracked when trying to send or read a message.
100% of participants attempted or noted about the use of a nonexistent back button on mobile interfaces.
1 out of 3 users mentioned concerns about font size or button tap targets.
Design Update Prioritization
Based on user feedback and severity of issues, I prioritized updates in the following order:
Fixing the broken store checkout process
Adding a clear back button to the messaging screens
Enhancing message state visibility (read/unread visual cues)
Increasing font sizes and using legible typefaces
Ensuring all buttons meet accessibility size guidelines (44x44px)
Sources
Valve Corporation. (2023). Steam Stats. https://store.steampowered.com/stats
Apple Human Interface Guidelines. https://developer.apple.com/design/human-interface-guidelines/
Nielsen Norman Group. (2021). Usability Heuristics. https://www.nngroup.com/articles/ten-usability-heuristics
W3C. (2023). WCAG Accessibility Guidelines. https://www.w3.org/WAI/standards-guidelines/wcag/
Steam Mobile App Reviews – App Store & Google Play
OBS Studio Recording Tutorials. https://obsproject.com/
Please see included Galleries below for video walkthroughs, final designs and screenshots.
Project Overview
Mobile
Downloads screen
Messaging screen (showing improved read/unread states)
Game detail screen
Home screen (game library overview)
User Profile
Store screen (with updated checkout flow)
Desktop
Library dashboard
Featured Page
Forum Page
Messaging panel
Store page
Watch
Checkout Screen
Game download progress indicator
Friend status / online notification
Home Screen
Quick Chat
Store
Steam Mobile Development
Steam Mobile App Redesign Update
Sedona Snyder — 4/27/25
Project/App Description
The Steam Mobile App redesign focuses on making it easier for users to browse their game library, manage downloads, purchase games, and stay connected with friends through messaging. The updated design features a cleaner, more modern UI, streamlined navigation, and improvements to key user tasks like purchasing and checking downloads.
Feedback Summary
In the usability testing phase, users praised the overall layout and aesthetics but encountered difficulties with navigation, unclear icon meanings, and errors in the purchase process. Based on their feedback, I prioritized updates to improve usability and accessibility across the app.
Design Updates
The redesign focuses on:
Adding clear labels and visual indicators to assist navigation.
Improving the purchase flow to ensure successful checkout.
Enhancing accessibility with better font sizes and touch target sizes.
Usability Issue 1: Missing Back Navigation
Problem:
Users had trouble returning to the Messaging screen after navigating away, causing confusion and interruptions in flow.
Users had trouble returning to the Messaging screen after navigating away, causing confusion and interruptions in flow.
Fix:
I added a visible, persistent back button to major screens like Messages, Store, and Downloads.
I added a visible, persistent back button to major screens like Messages, Store, and Downloads.
Usability Issue 2: Unclear Unread Message Indicators and Store Purchase Flow
Problem:
Unread messages were not easily identifiable, and users could not complete purchases due to broken store links.
Unread messages were not easily identifiable, and users could not complete purchases due to broken store links.
Fix:
Added inverted button and text colors to clearly indicate unread messages.
Corrected all store links and ensured users can now complete the full checkout process smoothly.
Accessibility Issue 1: Readable Font Sizes
Problem:
Some text was small and potentially difficult for users with vision impairments.
Some text was small and potentially difficult for users with vision impairments.
Fix:
I ensured all fonts use a readable font face and are at least 15px or larger in size across the app.
I ensured all fonts use a readable font face and are at least 15px or larger in size across the app.
Accessibility Issue 2: Button Touch Targets
Problem:
Some buttons were too small, making them difficult to tap accurately, especially on smaller devices.
Some buttons were too small, making them difficult to tap accurately, especially on smaller devices.
Fix:
I made sure all buttons meet the recommended minimum size of 44x44 pixels for easier interaction.
I made sure all buttons meet the recommended minimum size of 44x44 pixels for easier interaction.
What I Learned About Usability and Accessibility
This project taught me that small changes can make a big impact on user experience. Usability improvements like adding back buttons and clearer visual feedback can significantly reduce user frustration. Accessibility adjustments, like enlarging fonts and buttons, ensure that the app is usable by a wider range of people, including those with vision or motor challenges. Prioritizing both usability and accessibility together makes the app more intuitive, inclusive, and enjoyable for everyone.
User Research Report - Steam App Redesign
Steam Mobile App - Research Report
Sedona Snyder - 4/20/25
Name of project: Steam Mobile App
Summary of app: The redesigned Steam mobile app streamlines access to game libraries, purchasing, social features, and download notifications. It offers a more modern UI and simplifies common user tasks like game discovery, download management, and messaging.
Prototype link: https://www.figma.com/proto/kByarz4exaDst36g2hWR34/Sedona-Snyder?node-id=0-1&t=q7zOlPXsuZJZKZgE-1
Executive summary
The usability study identified several strengths in the Steam mobile app redesign, such as a clean and organized interface, a pleasing color palette, and intuitive access to some core features like settings and profile security. However, users struggled with understanding icon meanings, navigating between features, and completing certain key tasks like purchasing games or accessing downloaded games.
The most common pain points were unclear icons, inconsistencies in the store access flow, and limited ability to return to or switch between features like messaging and downloads. Based on this, the next steps in design will focus on improving icon clarity (through labels or tooltips/popups), enhancing navigation fluidity, and ensuring interactive elements work reliably across devices and user paths.
Detailed findings
Unclear Iconography
Users had difficulty understanding what certain icons represented without accompanying text. Three out of four testers relied on guessing or trial and error to interpret navigation icons. One user suggested the addition of descriptive text or tooltips to clarify icon meaning.
Users had difficulty understanding what certain icons represented without accompanying text. Three out of four testers relied on guessing or trial and error to interpret navigation icons. One user suggested the addition of descriptive text or tooltips to clarify icon meaning.
Incomplete Store Flow
Two testers (Monica and Adele) were unable to complete the task of purchasing a game due to broken or mislinked store pages. This issue prevented task completion and highlights the need for consistent linking and feedback across devices or versions.
Two testers (Monica and Adele) were unable to complete the task of purchasing a game due to broken or mislinked store pages. This issue prevented task completion and highlights the need for consistent linking and feedback across devices or versions.
Messaging Feature Confusion
While users generally found the messaging screen, they often struggled to return to it once navigating away. One user noted the lack of a back button or breadcrumb navigation made it difficult to return, while another noticed inconsistencies with usernames changing.
While users generally found the messaging screen, they often struggled to return to it once navigating away. One user noted the lack of a back button or breadcrumb navigation made it difficult to return, while another noticed inconsistencies with usernames changing.
Difficulty Switching Between Features
Multiple users (3 of 4) found it unintuitive to switch between different areas of the app, such as from the store to the library or to the download screen. This interrupted their task flow and made simple actions like checking a download’s progress more difficult than expected.
Multiple users (3 of 4) found it unintuitive to switch between different areas of the app, such as from the store to the library or to the download screen. This interrupted their task flow and made simple actions like checking a download’s progress more difficult than expected.
Data analysis
Quantitative:
3 of 4 participants found the navigation bar icons difficult to understand.
This feedback was repeated across testers who relied on guessing rather than clear labeling to identify functions.
2 of 4 participants were unable to complete the purchase task due to page errors or unclear interactions.
Indicates a significant obstacle in one of the app's core features.
3 of 4 testers noted friction when switching between app sections like messaging and downloads.
Qualitative:
“On the right is what I believe is the profile section.” – Marlen Sarmiento Rascon
“I know that the red indicator means an unread message, but its hard to know that, could be some better visual indicators.” – Adele Cardenas
“It’s not clear how to access downloaded games or see their progress.” – Monica Vu
Design updates
High Priority:
Add labels or tooltips to icons.
Helps reduce ambiguity in icon function and improves navigation accuracy.
Helps reduce ambiguity in icon function and improves navigation accuracy.
Fix store page linking and interaction consistency.
Ensure all users can reliably complete purchase tasks across platforms.
Ensure all users can reliably complete purchase tasks across platforms.
Improve messaging screen navigation.
Include a clear way to return to messages, possibly via persistent tab or back button.
Include a clear way to return to messages, possibly via persistent tab or back button.
Medium Priority:
Streamline navigation between app sections.
Consider adding a bottom nav bar or swipe gesture to switch between core features like Store, Library, and Downloads.
Consider adding a bottom nav bar or swipe gesture to switch between core features like Store, Library, and Downloads.
Review and update user profile details display.
Prevent inconsistencies like username swapping across different parts of the app.
Prevent inconsistencies like username swapping across different parts of the app.
Clarify download visibility and status tracking.
Add a visible section in the library for tracking downloads.
Add a visible section in the library for tracking downloads.
Low Priority:
Polish wording in message screen.
Minor fixes in UI copy to avoid confusion.
Minor fixes in UI copy to avoid confusion.
Refine animation/transition feedback.
Ensure users receive visual cues when moving between sections.
Ensure users receive visual cues when moving between sections.
Conduct device-specific testing.
Test across various screen sizes and OS to catch prototype mismatches.
Test across various screen sizes and OS to catch prototype mismatches.
Appendix
Testing Method
Users completed 5 neutral usability tasks focused on navigation, purchasing, messaging, settings, and download visibility. Observations and verbal feedback were collected via remote video walkthroughs and screen recordings.
Users completed 5 neutral usability tasks focused on navigation, purchasing, messaging, settings, and download visibility. Observations and verbal feedback were collected via remote video walkthroughs and screen recordings.
Screener
Participants were moderately familiar with Steam (used at least monthly) and comfortable navigating mobile apps. No participants were involved in the design process.
Participants were moderately familiar with Steam (used at least monthly) and comfortable navigating mobile apps. No participants were involved in the design process.
Task Questions
Find a game you’d like to buy and begin the purchase process.
Locate and read a message sent by a friend.
Check if a game you own is installed and ready to play.
Change your profile picture.
Change your notification settings to receive fewer alerts.
Metrics
Task completion rate
Time to complete task
Number of taps/clicks to success
Self-reported difficulty (1–5 scale)
Verbal feedback and confusion indicators
An Introduction - 01.29.25
Introducing myself to my audience has been something that is always hard to do. I never know how to define 'me'. I would like to retain this section of my portfolio website to reflect on my learnings, my success and my challenges. In my schooling, I have taken many online classes, finding them both exciting and new! What a thing it is to be able to learn from home, but get the same experience as in a classroom. For me, having the flexible time to learn on my own has been invaluable, as it can be hard to learn at someone else's pace. Although, I do enjoy the challenge.