STEAM Mobile App

STEAM Mobile App - Redesign proposal
Even though Steam is a very popular service in the gaming community, its app is known for having a poor UI. Please choose 3-4 screens from the app that you think are key to the users’ experience and redesign the UI.

What is Steam

Overview

Steam is a video game digital distribution service by game developer Valve; launched in 2003 as a platform to distribute their proprietary games, it has evolved into the largest digital distribution platform for PC gaming in the world.
The Steam mobile app allows users to browse, purchase, and remotely install video games to their PC’s, as well as access video games communities and resources.

Login

Keeping in mind that sometimes “less is more”, I reduced this screen to its very basics. Minimise the content to focus the attention on just one action: login and access to the Steam mobile experience. To make it a little bit more interactive I added small gradient animation as a background, adding life to the screen without creating a distraction.

Navigation

Due to the number of sections and products contained in Steam, it is key to be able to access all them through a clear and simple user journey. Because of this, I structured the navigation through three different categories: Main Menu At the bottom of the screen, it contains the most recurrent actions for a Steam user: Library, Store, Community and Chat. Also, in terms of interactivity, the menu will disappear when scrolling to give more visibility to the content. Side Menu Accessible through the hamburger menu, it contains the secondary actions or less frequent actions for the user: Profile, Steam Guard, Confirmations, Support, Settings. Tabs Just below the title, each of them leads to a specific area inside the main section.
Store At the header beside the Side Menu, we can also access the Search option (which has the same functionality as the desktop search bar). Next to the Search option, we can find a variable option that creates quick access to relevant content on that specific page: Wishlist or Notifications among others. Filters Adding the filter option is key, to find any item in the catalogue in a fast and simple way. As the filters will vary depending on the section we are in, it makes sense to locate it at the “secondary level” of the Tabs.

Store

As I already mentioned the Store will appear as the landing page of the app, the main reason is that offering an up to date catalogue through the phone could translate into an increase in sales for Steam. Through the tabs of this section, the user can also see the content in a more accurate layout to cover the specific needs Other elements visible on the screen will lead the user to different suggested products from the Steam catalogue.

Game Detail View

As the final element of the catalogue, the detailed view of each game is probably one of the most relevant bits of the app. Here is where the user makes the decision of adding or not their purchase to the cart. Menus and tabs are disappearing at this point reducing and focalising the action. About the information and structure of the page, we can find the different operating systems that the game is available for, description, graphics and videos from the game among other details.

Broadcasting

It is as important to offer our product at the most optimal condition as to be able to adapt to new trends and listen to our customers. Because of this it should be a priority for Steam to enhance their Broadcasting Section

Reflecting on the real-time fluctuation of content is essential to enhance community engagement. Also, giving visibility to the users and their common interactions allows and encourage them to participate. It is also a perfect way to reiterate the offer of Steam products and easy access to it.

Look & Feel

Colour Palette

As a well-recognised brand, it was important to keep their already identifiable look and feel. For it, I kept the dark and white and updated the blues.

Font Family

As one of the most definitory aspects of a brand, I decided to stick to their current font family. Which brings a value of familiarity with the brand.

Shadows & Glassmorphism

Shadows, glows and glass morphism are the most noteworthy elements style wise. The idea is to transmit a modern tech vibe, almost sticking out of the screen.

Icons

Thin line and modern look and feel to give relevance to the action. A simple and clear visual language that the user will already recognise from previous digital experiences.

Approach and process

To get a broader idea and a deeper understanding of what the brand aimed to achieve and represent through the app. As well as the added value of the mobile ever desktop, I decided to dig deeper into the three main foundations of every product: Values, Users and Structure.

Users

To get to know the users, I approached two different paths: App Reviews: as Steam already counts with an app (both in android and iOS operating systems), it was the perfect way to figure the user’s overall impressions and expectations. Direct questions to users: although I have not personally used Steam before, I do know a lot of people who does it on their daily basis. So it was a great way to complete my research on user’s needs and hopes for the future upgrade

Direct questions to users

Structure and content

Understanding the app content structure was essential to optimise it. Keeping in mind that including the current processes and capabilities in the design was a priority to find the best solution, I decided to break down the structure and contents to get a better understanding of the hierarchy and dependencies between the sections and possible interactions.

Conclusions