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
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.
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.
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.
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.
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.
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.
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
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.
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 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 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.
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 screen final mockup
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.
