UX Design

Redesign

PC Gaming Platform

Personal Project

Steam Mobile ─ APP Redesign

Project Duration

8 weeks (2022.04 - 2022.06)

Tools Used

Figma, Xmind

Responsibilities

User research, UX design, UI design, prototyping

Project Overview

Background

“Steam Mobile” is the mobile companion app built by the PC gaming platform Steam, letting users browse and buy games and chat with friends in the community on their phone. But the app's structure was cluttered and its flows clunky, leading to a poor user experience.

“Steam Mobile ─ APP Redesign” project overview

Project Challenges

Challenges

01｜Multiple features had to fit into one product

Steam Mobile covers most of Steam's functionality — “Store,” “Friend Chat,” “Community,” and more. Helping users quickly understand how to use each feature and reach their destination smoothly was a major challenge for this project.

02｜The design had to balance brand identity with readability

Steam's brand palette skews dark, so designing the app in dark mode fits the brand identity better. That meant, beyond matching Steam's brand style, I also had to weigh readability and color contrast so users could browse the interface comfortably.

Design Process

Design Progress

01｜Research & Analysis

Gathered user feedback through “analyzing App Store reviews” and “interviewing users” to understand the app's current state and what its users needed.

02｜Synthesizing Data

Turned interview findings into personas and used the KJ method to organize user pain points, honing in on the target audience and the problems that needed solving.

03｜Prototyping Ideas

Restructured the app's information architecture and drew wireframes to test whether the overall flow held up.

04｜Building the Design System

Built a design system matching the brand identity — colors, typography, component library, and more — to save design time and avoid rework.

05｜Producing Mockups & Interactive Prototypes

Produced mockups and prototypes, iterating through repeated testing and revision to land on the final interface.

Store Reviews

User Reviews

Observed and synthesized low-star App Store reviews into three major user pain points:

Pages and features weren't organized — everything was dumped into the hamburger menu, so users often couldn't find a feature or understand how to use it.

01｜A cluttered app structure

The interface wasn't responsive — text too small, spacing too tight — leaving information less intuitive and clear, and making it hard for users to browse content or tap buttons.

02｜An inflexible interface that didn't follow any design standard

Filter buttons were scattered — not only did users have to hunt for them, they also struggled to find the product they wanted; the mobile authenticator code would refresh before there was time to type it in... these unforgiving flows wore down users' patience fast.

03｜Flows that weren't user-friendly

User Interviews

Conducted video interviews with five Steam Mobile users, inviting them to share their firsthand experience and opinions to gather feedback from more angles.

Interview Questions

· What got you started using Steam Mobile?

· How do you feel about the overall interface? Any thoughts on how information is presented?

· When did you last use Steam Mobile? What made you use it that time?

· What features do you use most? Did you run into any difficulties while using them?

· What's your habit for browsing the store — do you prefer exploring on your own or following recommendations?

· Have you ever bought anything on Steam Mobile? Could you share what that purchase experience was like?

· How do you feel about Steam and Steam Mobile respectively?

Personas

Persona

Combined interview data with my own extrapolation to build three personas with different usage habits and personalities, helping me interpret target users' behavior and feelings so I could make better design decisions and pin down which problems needed solving.

Click the image to view it enlarged

Affinity Map

Recorded user feedback gathered from store reviews and interview data on sticky notes, then categorized it into an affinity map to dig deeper into user pain points and each feature's strengths and weaknesses.

Click the image to view it enlarged

Existing Problems

Focus on Problems

Carefully reviewed the current Steam Mobile page by page, flagging the parts with poor interface design or clunky flow to guide the redesign that followed.

Main Menu

Login & Mobile Authentication

Store List Page

Store Detail Page

Friend Chat

Steam Community

Sitemap

Split features into five categories — “Authentication,” “Chat,” “Community,” “Store,” and “Me” — simplifying the categorization and adjusting the hierarchy so users could find their way and complete their goals more easily.

Click the image to view it enlarged

Wireframe

Sketched an interface prototype through wireframes, confirming the component layout was complete and sound, and testing how smoothly the feature flows worked.

Key Improvements

Design Deliverables

Quickly Find What You Want

·Merged search and filters into a single step.

·Users can use tags to find or exclude specific product types, narrowing their search more precisely.

A Clearer Page Structure

·Tucked away secondary features like “Report” and “Ignore” to help users stay focused on the content.

·Used scrollable tabs to categorize information, easing the information fatigue that comes with an endless feed and improving the browsing experience.

·Reviews now use a card-based design, making them simpler and clearer to read.

Easier Shopping

·Users can batch-add items from their wishlist straight to the cart, making it easy to buy a bunch of things at once.

Stay on Top of the Latest News

·Official news and game news are now shown separately, so information no longer feels like a jumbled mess.

·Users can bookmark news they like to revisit later, so nothing important slips by.

·Added category tags so readers know what kind of news it is before they even open it.

More Intuitive, Friendlier Mobile Authentication

·Kept code-based login and added QR-code scan login, making authentication safer and more convenient.

·The mobile code now clearly shows its refresh countdown, so users can better judge how long it's valid for.

·Switched to a manual refresh for the code, so the authenticator doesn't have to keep running in the background.

Page Showcase

Page Display

Visual Guidelines

Design Guidelines

Learnings & Reflections

Takeaways

01｜Considerations for Mobile Authentication

While designing the authentication page, I considered a few different approaches — biometric login, SMS or email verification — and ultimately chose to keep the original code-based verification and add QR-code scan login on top of it. Both the QR code and the mobile code refresh periodically, letting users log in quickly and securely without ever leaving Steam Mobile.

02｜Balancing Design, Development, and Operations

This project focused mainly on improving the interface and flow, but working in the industry for real means factoring in business and development considerations too, not just overall polish and user needs — that's what it takes to build something that's actually feasible and good for both the team and the company.