Steam App Redesign

Project Overview

Steam is a video game digital distribution service by Valve. It allows users to purchase, download, and play games together. Steam has a mobile digital storefront in the form of an app, and this project aims to redesign it to turn it into a user-friendly experience.

SteamLogo

Target Audience

Largest user range is from Ages 18-35, PC Gamers who want to purchase games and/or keep in touch with their friends and interact with gaming communities.

Product Purpose

The app acts as both a marketplace and account manager, with some social features. Users can purchase games and be recommended games that they may like, can feel secure with their account being protected by Steam Guard (2-factor Account Authentication) and interact with their friends and game communities.

Why Redesign?

  • Navigation - Navigation is done solely through a hamburger menu that often feels cluttered.
  • Non-Responsive Design - UI elements overlap on smaller screens such as text and images.
  • Confusing Structure - You can get lost easily while navigating and for some reason, there are two different friends lists.
  • Incoherent Design - Pages look like they belong to different apps, rather than one unified design.

Feature 1: Marketplace

Marketplace

The Marketplace is where users can browse and purchase games. They can search through a variety of categories and may be recommended games that their friends play or based on their interests. The grid-based. horizontal swiping system makes it easy to look for a product you'd like to purchase, and the store page pleasingly delivers tons of information.

Feature 2: Steam Guard

Steam Guard

Steam Guard is a two-step authentication method, an extra security measure to ensure someone logging into Steam via a computer is the real owner of the account. The user sees a code on their app that they then enter into the Steam PC/Mac Client when they log in.

Feature 3: Friends & Messaging

Messaging

Steam is not only a retailer, but provides communities for gamers to get in touch and interact socially. Users can add their friends, see what their friends are playing, groups they are in, and message them.

Wireframes

Wireframes

Design System

Design System