THIDA BUN
Steam
UI & UX Designer
The Steam mobile app is a great way to purchase and play games. With the app, customers can browse thousands of titles from third-party publishers and buy games from mobile devices. Customers can also socialize with friends, join groups, and discuss games in community forums. In this project we improved the booking experience and consistency across all devices and consolidated similar tasks.
Tool: Figma
Duration: 5 weeks
Role: UI & UX (school project, team work)
Project Goal:
Our focus centered on improving usability and implementing intuitive design principles, ensuring an interface that is easy to navigate. We incorporated customizable options, empowering users to personalize their Steam experience to match their specific preferences. While retaining beloved classic features, we also introduced new functionalities to elevate the overall enjoyment of the Steam experience.
Steam's current ios app
To get more insight and ideas on which section we should improve for user experience, we tested the original application with six participants before redesigning the UI.
Homepage
Shopping Page
Game page
Folded
Design Process
1. Project Definition and Planning:
-
The intuitive design ensures that users can quickly and easily find what they need without confusion.
-
The purchase button to a more visible location, eliminating the need for scrolling. This adjustment aims to streamline the process, enabling users to add games to the cart and complete purchases more quickly and effortlessly.
-
The "all about the game," "review," and "system requirements" information into overlay screens. This adjustment aims to declutter the page from excessive text, allowing users to navigate and read information without continuous scrolling.
User Journey
Once we identified the issues we aimed to address and enhance within the Steam UI, we initiated the process by sketching out a user journey. This visualization was instrumental in enabling our team to gain a comprehensive understanding of users' experiences, emotions, and pain points throughout their interactions with the platform.
Usability Testings
1.First iteration
Homepage
Overlay Page
Game page
Overlay Page
The testing results revealed suboptimal outcomes, as 13 out of 18 participants experienced difficulty locating the store to purchase games. Additionally, these users showed indifference towards the "Buy it Now" button. Furthermore, an overwhelming 80% of respondents found the landing page is overly complicated and in need of improvement.
2.Second iteration
Overlay Page
Homepage
Game Page
Overlay Page
We moved the drop-down menu to the navigation bar of the store, alleviating the user's cognitive load when approaching the store.
Despite the suboptimal testing results, which highlighted difficulties in locating the store to purchase games, in difference towards the "Buy it Now" button, and navigation issues, we decided to proceed to the next section. This decision was based on the positive feedback and acceptance we received for the second iteration of the design.
Prototype
.png)
