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.
Research
UX Design
UI Design
Prototyping
Aug 2020 (2 weeks)
Kenny Leung
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.
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.
A new user adds a game to their wishlist and confirms it on the wishlist page.
Here are the violations that stood out to us:
Overloaded hamburger menu with overlapping options (e.g., Friends and You & Friends)
Create an accessible navigation bar that gives users a more organized and efficient way to access their needs.
Aesthetic and Minimalist Design
A blank start screen can be confusing for user who has not yet added anyone to their friend list
Add text to properly indicate the current state and a CTA button to encourage users to interact with the product
Visibility of System Status
Repetitive contents make the interface cluttered and difficult for users to focus properly
Remove all the repetitive information to make the interface look cleaner and less cluttered
Aesthetic and Minimalist Design
Users are not able to uncheck “On Wishlist” to undo their actions, which can cause confusion and frustration
Enable an option for users to undo their actions for better user control and freedom
User Control and Freedom
Lack of visual elements can increase user's cognitive load
Add the game cover on the wishlist to enable quicker recognition and less effortful recall for the users
Recognition Rather Than Recall
Irrelevant content displayed on the store page, which is where users browse/purchase a game
Relocate “Games Streaming Now” to the “Community” in order to make the “Store” page more focused on browsing/buying games
Aesthetic and Minimalist Design
Users should be correctly informed of what screen they are at. Improper screen label may cause confusion or require cognition
Rename the screen to “Store”, so users will have little issue understanding what page they are on
Visibility of System Status
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! 😊
Other Projects