Steam-App-mockup

Steam App 
Redesign

2019
Product Design
UI & UX

Steam is the Valve corporation's marketplace.
When 2-factor authentication became adopted, Valve released a companion mobile app.

The main function of the app is to generate a code that allows you to login on a PC. They also wanted to incorporate marketplace options of the PC version onto the app. This redesign aims to tackle the complexities of distilling features from PC to mobile.

The current experience leaves a lot to be desired.

A quick glance at the app quickly uncovers the shortcomings of the current experience.

BEFORE 

Main functions are buried 

UI inconsistencies 

Modern best practices ???

Bland

AFTER 

Sleek UI

Improved UX

Big bold images

Easy access

Great design begins with a story.

Hero

THE HERO

A gamer looking for adventure and excitement

Promise

THE PROMISE

A platform that can take you on numerous exciting adventures

Guide

THE GUIDE

A passionate game developer who loves a good story

Baseline

THE BASELINE

Jump in.
Adventure awaits!

What is Steam?

Steam is a video game digital distribution platform developed by Valve Corporation. It was launched in September 2003 as a way for Valve to provide automatic updates to their games but eventually expanded to include non-Valve games from third-party publishers. 

Power to the people.

What do the users think? I looked at comments from the play store on android.
Other good sources are Reddit forums and  Steam's forums.

review-6
review-4
review-1
review-3
review-2
review-8
review-5
review-7
Key Mentions

Steam Guard unease of use

Item/trade confirmation

Dislike for the web app style

Bad mobile UI/UX

Define.

Definition

Steam users use the app as a companion to the desktop experience because they need it for securing their account, trading, checking sales & purchasing adventures.

Main functions

- Steam Guard
- Item listing confirmation
- Shopping experience
- Interaction with Friends
- Notifications

Secondary

- Account creation
- Library
- Community
- Support

Solve the puzzle.

I have reflected on the menu organization and how features are presented. There are redundancies and each function has its own separate screen.

The key to organizing the features was to combine & display them together.

Sketchbook-MockUp-1-1
CURRENT NAVIGATION EXPERIENCE
Group-2435
NAVIGATION EXPERIENCE REVAMPED
Group-2459
mockup-app-sketch

Rough sketches.

Sketching has allowed me to explore layout for the Steam Guard.  This screen will now host notifications (trade, item listings, logins).

Wireframing brings clarity and speeds up the process of constructing a final design.

Components are pieces that build the cake.

The cake isn't a lie.

components

The Result.

The new design focuses on adventures. Aiming to help users pick and launch these experiences faster; removing hurdles.

Landing
LANDING

Large images show the personality of the games, portraying them as great adventures the user can embark on.
Tab bar now houses primary functions.

PRODUCT PAGE
product-page-1
  1. The product screen is tailored to provide basic information to trigger a purchasing decision.


  2. Large Netflix inspired hero image; this section can display a cinemagraph or short video extract.


  3. The information hierarchy is heavily inspired by amazon. Key information presented before presenting purchasing options.


  4. The purchasing system is redesigned to fit the mobile screen real estate. Information hierarchy alongside copy improvements produced cleaner, easier to understand UI.
2 FACTOR AUTH.
steam-guard

Spontaneous adventures are the best! The ‘enter this code on desktop’ UX seems like a slowdown. The new system is one click to adventure. Instead of using a screen with a code that refreshes over time, a simple pop-up with basic information and CTA’s reduces clutter in the app.

The design also includes a report button for suspicious activity. This allows users to take the necessary steps to secure their accounts quickly.

STEAM GUARD SECURITY HUB
Steam-guard-hub

What used to be the Steam Guard screen showing a security code the users need to type on PC, now became a hub for security-related functions.

Confirming trades has never been easier. When users receive a trade request the Steam Guard screen should be the first thing they see upon opening the app.

Top three latest trade/item confirmation requests are shown at a glance. The tertiary level button allows users to see all trade history. The last login attempt is shown on this screen and the a log of all logins made  can be accessed here.

Consistent with the store landing page, the friend screen shows the search bar placed at the top, followed by ‘Favorites’. In this section, the profile images are larger and square. Accompanying them, a status label showing their activity.

FRIENDS
Friends-page
HAMBURGER MENU
menu

The menu is home to your account options alongside other secondary features. Some were out-of-scope for the amount of time allocated to this MVP.

LAST WORDS

Steam must accompany the hero on their journey. Its mission is to help them find new & exciting adventures.

DD_logo
©Delapeta Design 2022
VAT ID — NL004194265B14
DD_logo
©Delapeta Design 2022
VAT ID — NL004194265B14