Steam Mobile Redesign

Kenny and I worked together to conduct a heuristic evaluation on the Steam Mobile app and redesign it for iOS. Our redesign focused on overhauling the mobile user experience of the app.

ROLES

Research
UX Design
UI Design
Prototyping

TIMELINE

Aug 2020 (2 weeks)

CREDIT

Kenny Leung

WHAT IS STEAM MOBILE?

Steam Mobile is a video game distribution platform by Valve. The service helps the gaming community connect with one another, purchase games, and stay up to date with the latest gaming news.

PROBLEM

Steam is one of the most popular gaming services with 33 million daily active users; however, their mobile app needs a lot of improvements in terms of UX and UI.

Common feedback from the iOS app store:

• The app has overwhelming content
• It is hard to understand the functions
• The app is confusing to navigate
  

TASK FLOW

A new user adds a game to their wishlist and confirms it on the wishlist page.

APP ANALYSIS

Here are the violations that stood out to us:

BEFORE

Overloaded hamburger menu with overlapping options (e.g., Friends and You & Friends)

AFTER

Create an accessible navigation bar that gives users a more organized and efficient way to access their needs.

Aesthetic and Minimalist Design

BEFORE

A blank start screen can be confusing for user who has not yet added anyone to their friend list

AFTER

Add text to properly indicate the current state and a CTA button to encourage users to interact with the product

Visibility of System Status

BEFORE

Repetitive contents make the interface cluttered and difficult for users to focus properly

AFTER

Remove all the repetitive information to make the interface look cleaner and less cluttered

Aesthetic and Minimalist Design

BEFORE

Users are not able to uncheck “On Wishlist” to undo their actions, which can cause confusion and frustration

AFTER

Enable an option for users to undo their actions for better user control and freedom

User Control and Freedom

BEFORE

Lack of visual elements can increase user's cognitive load

AFTER

Add the game cover on the wishlist to enable quicker recognition and less effortful recall for the users

Recognition Rather Than Recall

BEFORE

Irrelevant content displayed on the store page, which is where users browse/purchase a game

AFTER

Relocate “Games Streaming Now” to the “Community” in order to make the “Store” page more focused on browsing/buying games

Aesthetic and Minimalist Design

BEFORE

Users should be correctly informed of what screen they are at. Improper screen label may cause confusion or require cognition

AFTER

Rename the screen to “Store”, so users will have little issue understanding what page they are on

Visibility of System Status

DEMO VIDEO

REFLECTION

After applying heuristics to a real-world app really allowed me to understand the meanings behind those rules - they are no longer just words. Moreover, I learned how to design a better, usable, and accessible interface.

Throughout my journey at BrainStation so far, I normally designed a digital product from scratch by incorporating design principles. However, this was my first redesign project in which we create improved designs based on usability assessment and heuristic evaluation by working within established design constraints and incorporating UX patterns. After seeing the changes side by side, I truly felt the importance and power of design. It fired up my passion for design even more and reminded me of why I want to become a designer.

Thanks for reading! 😊

Let's connect!

Please feel free to reach out to me on any platform anytime! I'd love to connect with you and talk about anything.

Made with lots of 🥩 + 🍞 = 🍔 = ❤️