VALVe Mobile App Redesign
Project Overview
During the fall semester of December 2024, I was prompted to redesign a mobile application user interface within a one-week sprint. The project entailed analyzing an existing application to identify areas of opportunity and then addressing those areas within a high-fidelity Figma prototype. I chose to redesign the Steam e-commerce application because of my familiarity with VALVe Corporation’s branding, my experience using the current app, and a clear understanding of its pain points. My enthusiasm for the company, its mission, and its products motivated me to approach this project aggressively.
Goal
The redesign of the Steam mobile application aimed to address usability issues and improve the overall user experience. The app needed to offer a responsive, visually appealing, on-brand, and intuitive interface for its target audience. The design focused on enhancing interaction effectiveness and clearly conveying interaction logic.
Design Process
Analysis of VALVe Corporation’s User Base and E-commerce App
To identify key pain points and opportunities for improvement, I gathered and analyzed both qualitative and quantitative data:
-
Conducted three usability tests to observe user behavior and friction points
-
Reviewed user feedback on Google Play, filtering by frequency to highlight common issues
-
Held two in-person interviews to gain deeper insights into user expectations and frustrations
I also reviewed the Steam mobile app version 3.9.5 for Android and referenced a publicly available VALVe survey from November 2023, which indicated that the primary user base is aged 20–29, technically savvy and familiar with modern mobile navigation patterns.
Areas of Opportunity
I created a value proposition, use case, and identified potential problems for our target audiences. Additionally, I created a persona in Figma that outlines the key characteristics of our primary user demographic. We proceed to create a user journey map that identifies our users' actions, goals, feelings, pain points, and potential areas of opportunity.
Pain Points -
-
Navigational components do not signpost how they redirect users
-
Used an in-depth workflow
-
Broken Links
-
Poorly pagination
-
Difficult Navigation
-
Inaccessable content
-
Homogeneous product display
-
Inconsistent use of spacing, shape, size, and color
-
Lack of responsiveness
-
Small touch margins
Areas of Opportunity -
-
Add Animations for app start-up and content loading
-
Introduce a thumbnail grid for displaying wishlisted products
-
Implement Miller's Law throughout the app
-
Introduce image carousels for each product
-
Ehance visual design
-
Add Call-to-actions(CTA)
-
Implement more of VLAVe's branding across the app
-
Add universal navigation patterns
Results
Using Steam’s brand manual and UI elements, I redesigned 12 application pages, with a particular focus on adding interactivity and improving product presentation.
Key enhancements included -
-
Improved feedback and navigation for login, checkout, Wishlist management, and store browsing
-
Clearer interaction patterns and a more intuitive thumbnail grid
-
Consistent branding and visual hierarchy
-
Integration of animations, image carousels, and CTAs to boost engagement
-
Application of User-Centered Design (UCD) principles to reduce cognitive load and improve usability
The redesigned Steam mobile app prototype resolved key usability issues by streamlining navigation, improving visual hierarchy, and enhancing responsiveness. I introduced clearer interaction patterns, a more intuitive wishlist thumbnail grid, and consistent branding elements. Animations, image carousels, and CTAs were added to boost engagement, while applying Miller’s Law helped reduce cognitive load. Usability testing showed faster task completion and higher satisfaction, validating the redesign’s effectiveness within the one-week sprint. I presented my final redesign to the course section and received a 95.3% on the project.
Figma File
