Steam Mobile
App project

Duration

May - August 2017

Responsibilities

UX, UI & Visual Design

Tools

Paper & Pen, TextEdit, Illustrator, Photoshop

Redesigning the biggest mobile game client in the world. Steam, created by Valve Software, is the biggest gaming client in the world, with 12.5 million active users.

The Steam Mobile App, the mobile equivalent of Steam, released in 2012, has maintained a lot of UI patterns from the time, with few updates to its design and usability.

Working on my free time, this side-project is intended to focus on the visual redesign of an existing app, exploring the limits of Photoshop as a design tool, to compare it to Sketch.

Challenge

To improve Steam Mobiles user interface, both functionally and visually, whilst maintaining its vast functionality.

Goals

  • - Refine usability by changing the app structure, navigation, and UI elements.

  • - Update visual identity to better match the contemporary Steam App, and to better suit higher resolution devices.

PROCESS

Research

  • App Taxonomy
  • Information Architecture

Ideation

  • Sketching
  • New IA & Sitemap

Iterations

  • Feature Breakdown
  • Finalization

RESEARCH & IDEATION

Before jumping into the redesign itself, we must breakdown the existing app and understand it in full.

TAXONOMY

Here we take a screen shot of every view, and organize its various elements into categories. This will help us keep track of everything as we reshape the app.

SITEMAP

A new sitemap is created based on a new, trimmed and organized Information Architecture, since the old one was very flat and disconnected.

SKETCHES

With the new structure established, we begin sketching and ideating each view, with variations of UI elements, and structures. We then select the best candidates based on feedback and established patterns.

VISUAL IDENTITY

The visual identity is updated, adding Roboto as an interface typeface, a greater range of colors, and a brand new set of custom made icons inspired by the forms of the Steam Logo.

TYPEFACES

COLORS

ICONS

RESULTS

Finally we deliver UI rendered mockups of key screens sporting an updated navigation, visual identity and functionality.

Start & Login

Start and Login Pages are streamlined. UI elements are given more space and confirmation pages are added.

Profile

The Profile view maintains the section buttons, and new ones can be added. Here the user also has access to various sections such as Notifications, Settings, Confirmations and more, all from one core location.

UI Details - Header & Tabs

The header contains quick and fixed options that provide the user snappy navigation between key parts of the app, be it through buttons (Profile, Settings, Back), Tabs, or a app-wide search navigation option.

Library

The Library gives room to games, that can be expanded for more information, which is also given emphasis. Display and Filter options facilitate the navigation of content also.

UI Details - Search Navigation & Filtering

Search navigation and filtering are given an almost constant presence, and filtering is available in any view with a lot of content.

Steam Chat

Communication and community is important for the Steam Mobile experience, and we make it more contemporary with more options, and clearer content.

Store

The centre of attention is the Steam Store. Again, the content is front and centre, with tabs and expandable content cards like in the Library.

Game Detail View

The Game Detail view has a lot of information, and has an action button that enables quick action from anywhere in the view.

UI Details - Action Button

The Action Button is a prevalent option that enables the user to take a related action, anywhere within the view.

Steam Community - Market

The Steam Community is important, and one of the big areas is the Steam Market. A lot of options are grouped to focus set of actions.

Steam Guard & Confirmations

Finally, Steam Guard, the most accessible option due to its immediacy of use, focuses on the delivery of a usable two factor authentication code.

LESSONS LEARNT

Use the right tools

The motivation for this project was based on the fact that I myself am a Steam user, and found the app to have a lot of room for improvement, but also because I wanted to practice my UI design skills using Illustrator and Photoshop only.

In the end, this was a challenge, and I conclude that these tools are not optimal for UI design, especially since there are far better alternatives such as Sketch.

Always do user research

I also lacked more in depth user research, testing and prototyping in this project. Although its focus was mostly conceptual and visual, the lack of actionable data made decisions feel unfounded.

In future, I will be more formal in my process, focusing on users instead of personal research.

CONCLUSION

The redesign proposes a more stripped down and focused experience, allowing gamers to focus on their gaming content, and less on looking for it.

A clean, almost subdued visual design puts content first, retaining the existing brand identity, whilst the new app structure retains Steams complexity without overwhelming the user.

Thank you for your time.

< visualbear
art ent >

You can email me at

hello@visualbear.com