Project Overview

Steam is a game and software platform developed by Valve in 2002. It is now one of the largest comprehensive digital distribution platforms in the world. As a platform for PC, STEAM's mobile app design has many design and usability issues, which has provided an opportunity for a complete redesign.

Project Type

Self Project

UI Design

Duration

1 Weeks

Design Role

UI Designer

Prototyping

Tools

Adobe XD

Header 2.png

The Problem

As a platform designed specifically for PC, Steam Mobile App design is not very intuitive. The app offers most of the desktop platform's functions, yet its incorporation into the mobile app was unintuitive. Many functions are placed in the same location, and the information architecture is also confusing, which provided a bad user experience. 

The Solution

In order to solve the problem that the app currently has and provide a better user experience, I have decided to do redesign the UI of the Steam Mobile App. The goal is to focus on the user's needs and improve the overall usability of the design.

Header.jpg

Welcome screen of the new Steam Mobile App design

The Challenge

The Steam Mobile App shares the same layout structure of its desktop version, but due to the limitation of the screen size of a smartphone, incorporating the same design without proper iteration has provided the user an unpleasant user experience.

How might we make the purchasing process from one platform to another without losing continuity and consistency?

User Research

The first step in my redesigning process is to identify why do users use Steam and which feature attracts them. I have sent out online surveys and analyzed my findings. These data helped me to identify the feature that is most important to the user and allows me to have a better understanding of my user's need.

Pie Chart-01.jpg

Research finding pie chart

Identify Design Issues

To redesign the application, I have conducted a complete audit of the current Steam Mobile App to identify the problems and design issues. Due to the app's complicated navigation menu, too many features are mix in one screen, or related features are separated into different screens. Some screens' entry points are also hidden and hard to find, and content organization is also an issue.

Old Design Issues.jpg

Identified design problems with the current Steam Mobile App

Information Architecture

The IA for the current Steam Mobile App shares the same IA as its desktop version, which is practical and easy to follow on the desktop version. But using the same IA for mobile has caused the app to be harder to use and less user friendly. So I reorganized the contents and features and developed a new IA structure for the new app design.

IA.jpg

New IA structure for the Steam Mobile App

Ideation

With the new IA in mind, I am ready to start sketching my paper wireframes. While I am sketching, I kept the current design issues at heart and tried to sketch out different possible solutions for those issues. 

168346610.jpg

Paper wireframe sketches

Digital Wireframe

After I have completed my paper wireframe sketches, I turned those sketches into digital wireframes. At this point, I am refining the design and frame out some important elements and contents. Digitalizing the wireframes allows me to view the design in actual size.

Wireframes.jpg

Digital wireframes

Design System

I established a design system for the app before I create my final high-fidelity mockup. Having a design system established allows me to keep my design consistent when I am creating my mockups.

Design System.jpg

Design System

High-Fidelity Mockup

I transform my digital wireframes into high-fidelity mockups using my design system. 

Steam Guard and Side Menu

The new design has simplified two of the most used features: the Steam Guard and the side menu. The new design has reorganized the menu options and reduced clutter by organizing some of the options into a tab bar, and the Steam Guard now has become part of the tab bar where it is much easier to access.

Menu.png

Side menu and the Steam Guard

Steam Store

The new Steam Store has improved the organization of the contents, removed oversized contents, and any unnecessary spacings. The new game details screen also features a cleaner look and a more noticeable and easy-to-access CTA button.

Steam Store.png

Steam Store final muckup

Community

The community screen is where the users share their gaming experience, reviews, fan art and receive the latest news about game updates. The new design provides better content organizations and layout, helping users find the content they are looking for more easily.

Community.png

Community screen final mockup

Social

The social and message screen in the current Steam Mobile App is one of the options in the side menu, which is hard to access, and users cannot get the latest notification when their friends message them. The new design has made this feature an option in the tab bar, providing more accessible access to the entry point of this screen. The social screen also displays the users' current status, such as in-game or offline, and their recent activities, such as completing an achievement. 

Chat .png

Social screen final mockup

Profile

The profile screen displays the user's account information, such as achievements they have earned or the numbers of games they own. Users can edit their account ID or avatar in this screen or manage their inventory or game library. 

Profile.png

Profile screen final mockup

High-Fidelity Prototype

To finish up this project, I converted the high-fidelity mockups into a interactive prototype.

What I Learned

Redesigning an existing app is very different from designing a new app from scratch. I learned and practiced identifying the usability and design issues the current app has and developed a possible solution. I was able to work iteratively to find possible improvement points that meet the needs for both the app and the users.

The Next Step

Overall it was a gratifying experience. If I had more time, I would like to conduct a usability study based on the new design, which I did not have a chance to do during the process. I would love to turn this simple UI redesign into a complete UX case study.

More of my work

The solution.jpg
Case Study
Holding Phone.jpg
Case Study
Home copy.jpg
Case Study