What is Steam?

Steam is a video game digital distribution service. It is the most widely used video game distribution platform in the world, with around 75% of the global market share, with around 120 million monthly active players.

Why Redesign?

Steam is mostly used on a PC, however it has an app as well. This case study is about redesigning the android app.

As a Steam user, I recently chose to enhance my account security with 2-factor authorization (Steam Guard). To enable it, I had to download the mobile app, which includes Steam Guard. However, the app had a low rating (2.9 stars with over 1 million reviews). I decided to investigate further. After using the app for a few days, I found areas that needed improvement. So, I decided to redesign certain aspects of the app.

Also turns out it is the 20th anniversary of Steam, so there was another reason to do it :)

So…

If you're in a hurry, here's the final prototype!

Core Users

Before continuing, we must first define who exactly the users of Steam are.

• Gaming enthusiasts
• More than two-thirds of users are male
• The majority of users are between the ages of 18 and 38
• 94.17% of users have a Windows PC for gaming

Research

Competitor Analysis

I took the time to explore two of Steam's major competitors,

1. Epic Games
2. GOG Games

It is worth noting that neither of these platforms currently offers a mobile application as of now, so I went ahead and studied their websites.

Other than that I analyzed some products that are not actually direct competitors but are catering to the same audience i.e. Gaming Enthusiasts. These included Xbox, Google Play Games and Ubisoft Connect.

In order to gain a better understanding of the industry and identify any prevailing trends, I conducted an in-depth analysis of the navigation and search functionalities on their respective websites.

User Research

I had conversations with two of my friends who are avid users of the Steam platform. I also went ahead and read as many of the user reviews as I could find on the Play Store and across discussion forums. Through this, I was able to find out user goals with the app, and the issues they face.

User goals with Mobile app

• To authorize their account from the app while logging into a new device, using a feature called Steam Guard — for privacy
• Explore and buy new titles since they can't always be on a PC
• To not miss a sale or announcements (like gaming competitions) since they can't always be on PC
• Manage their account and downloads

For this project, my primary focus was on point 2, and I did also touch upon some aspects of point 3.

Objectives and Scope of Work

From research, I found out the product problems that the users complained about the most. These are the following problems I attempted to solve with this redesign

• Navigational Issues: These created problems for users by making it difficult for them to find information, access features, or complete tasks, resulting in decreased user satisfaction.
• Visual Clutter: It disrupted the app's organization, making it difficult to concentrate on important content.
• Search and filter flow: It enables users to find what they need quickly and efficiently. Without it, users face problems such as difficulty in locating information, frustration, and longer task completion times.
• Accessibility fixes: The lack of accessibility leads to exclusion and frustration for the users. These were important since I felt this area specifically needed some revamp. Mostly these are going to be UI fixes like font size and contrast ratio so I won't be mentioning it as a separate point for each screen.

Metrics to be improved

• User retention
• User satisfaction (Play store ratings)

Home screen

Problem 1: Lack of hierarchy

The home screen was a series of endless carousels that were categorized under different headings. This is not optimal since it does not assist the user with what to focus on and increases cognitive load.

Solution

Introduction of a Hero section

This helps the user by giving a disproportionate space to a few carefully chosen recommendations. Reducing the number of choices to just 4 and making the home screen feel more personalized. This section can also be used for important announcements that you don't want the users to miss.

Problem 2: Complex flow to Wishlist an item

Wishlist is for the items you want to save for later but aren't sure about adding to cart yet.

In the current flow, if the user wants to Wishlist an item, they must go to the product page first, and scroll down a couple of times until they find the option to do it. But that is when the user knows it exists. First-time users might not even know that there is an option for it.

Solution

Having the option at the card itself

Since the information on the card is enough for the user to make a decision of whether they want to Wishlist an item or not, having the option on the product page doesn't make sense. It also increases the number of clicks which is not a good thing. Hence, I decided to put a small 'heart' icon that users can take advantage of.

Bottom Navigation Bar

The following changes were made to the old nav bar,

• Icon labels were added since I felt that the icons alone did not communicate clearly what section they were representing.
• I changed the icon for Steam Guard (used for providing access for two-factor authorization) from a 'shield' to a 'QR scanner' one. The thought behind it was that first-time users would be looking for something relating to 'scanning' rather than 'protection'.
• I decided to shift notifications to the top navigation bar as I figured that there were more important things that required a tab.
• Introduced 2 new tabs, My Cart and Account, (more on that later in the case study)

Top Navigation Bar

News Screen

Problem: Cluttered news card

The old news card had unclear organization and lacked emphasis and hierarchy in its elements. The 'recommended' tag was awkwardly placed, making it seem like part of the title. The main issue was having like and comment options on the card surface, which felt out of place because the card expanded into an article.

Solution

The new iteration has a clear emphasis on the 'recommended' tag. I removed the options to like and comment since at this step of the flow the user doesn't have enough information to take either decision. I also added a small clock icon for time to make the card more scannable.

Product screen

Problem: Lack of CTA in the first fold

When a user taps on the product card, it is an indication that they are interested in the product. In the old design, the user visits the product page, and the CTA is placed in the second fold that users can't get to without scrolling. This increases friction and might lead to confusion.

Solution

The purpose of the product page is to convert a user who is interested in the product (since they tapped on the card) to a sale. Hence CTA's were prioritized to be there.

Also, the bottom navigation bar was removed since the user is one layer deep into the navigation (product page). I assumed it would create a distraction.

Problem: Direct transition to cart

In the old design, when the user taps 'Add to Cart', the screen transitions to the Cart and asks the user to proceed with checkout. This is helpful if they plan to check out right away. But if they want to add more items, going back from the cart each time they add an item can be frustrating.

Solution

I have identified that the user's most important need at this step is feedback. To address this, I have added a snack bar that appears at the bottom of the screen when the user adds something to the cart. The snack bar also includes an action for the user to proceed to checkout if desired. Additionally, I have included a cart icon in the navigation bar on this page, allowing the user to easily navigate to the cart after the snack bar has disappeared.

New feature addition to check system Requirements

Every game has system requirements that need to be met for the user to run it on their PC. According to Steam's Privacy Policy, it collects data about the user's device information and operating system.

I felt if Steam knows the specifications of the user's PC, then it should be able to convey if the system can run the game or not.

When users want to purchase a game, they review the minimum and recommended system requirements for two main reasons:

• To verify if their PC meets the requirements.
• To find out what the requirements are.

I've introduced a brief section that informs users whether their PC can run the game, while the detailed specifications remain available for those interested. My belief is that if Steam has access to a user's PC specifications, it should be able to determine if the system can handle the game.

There is also a feature to change the device on which the check is performed, as users may have multiple PCs with different specifications.

Cart screen

I opted to create a dedicated tab for the cart screen in the bottom navigation bar; previously, users had to tap on the cart icon in the top-left corner of the top navigation bar, which was very inconvenient to access, and I believed that the cart should be easily accessible from any part of the app.

The purpose of the Cart screen is to provide a clear review of the products that are in the cart with the details regarding the price. Keeping this in mind the following changes were made,

• One CTA is for Purchasing as a gift and the other is buying it for yourself. Both CTA's having the same emphasis increases cognitive load and friction. I went through multiple iterations and finally settled on a checkbox that can be used if the Purchase is a gift.
• I added a bin icon and used a soft red colour to indicate destructive action.
• I added a savings indicator text that tells users the amount they will save and encourages them to proceed with the checkout.

Account section

Problem: Scattered information

There were 2 particular areas in the app that belonged under the same umbrella,

• The Profile Section that was located on the top navigation bar
• The More section that was located in the bottom navigation bar

Both of these sections included information regarding the user's Steam account. So having the information in different sections just complicates it.

Solution

I decided to combine both sections into a single section called 'Account' and included it in the bottom navigation bar. This reduced clutter in the top navigation bar and made it easier for users to find information related to their account in one place.

In the process, I also included the Wishlist and Wallet sections in the account page since they were positioned somewhat awkwardly beneath the top navigation bar in the original design.

Search and filter flow

The purpose of this flow is to help users efficiently find and narrow down their product selections based on their specific preferences, needs, and criteria.

Problem: No assistance during the search flow

I analyzed that the current flow and the lack of assistance made the search flow very targeted. It means that the user can only use the search bar if they know what they want exactly (which may not be the case always). There was a missed opportunity to give them some suggestions before they typed their query.

Solution

• I added some assistance such as recent searches, trending topics and searching by category when the user taps on the search bar. It can help with the exploration of different titles.
• I decided to exclude price information when suggesting games related to what the user is typing. Price can often be the determining factor for a product, and I didn't want the user to prematurely stop exploring based solely on that.

Problems with the Search Results page

• A persistent text above the search results informing users that "some games had been hidden due to their chosen preferences" added to the overall visual clutter. To deal with this I decided to include a checkbox that will show unfiltered results by overriding the preferences of the user.
• Additionally, I incorporated a set of quick filters that can adapt and update based on the filters users frequently use.
• I removed the date on the result card since I didn't think it helped the user make a decision.
• I think the bottom navigation bar is not really needed at this step, but this particular decision is based on my assumption only.

Problems with Filters

There were many problems with the current way of filtering the search results,

• Apply filters and reset buttons were hidden in the second fold, they also had the same amount of emphasis. I changed that to sticky buttons at the bottom and also introduced some visual hierarchy.
• Filters opened in an overlay that was pretty inconvenient so I chose to replace it with a bottom modal sheet.
• I added a search bar at the top for users to search for a particular tag they want associated with search results. Since there are 100's of tags that exist it would be very hard and time-consuming for the user to find the exact one they need.

Notifications

For the amount of time I used the app I did not receive any notifications. This was surprising even though I purposely left some items in my Cart and my Wishlist, still got no reminders. So I went ahead to designed some.

Here's the final prototype!

Some reflection and learnings

• Firstly, now I truly understand the importance of naming one's layers. I saw how things can go from organized to total chaos in hours. :P
• I learned why defining the scope of work is important. I wanted to solve everything at first, but I soon recognized that it was not the best approach.
• I learned how to design with components, auto layout and variables.
• I realized how important it is to have a pre-defined colour palette and type system.
• I learned about documenting the entire process and the challenges that are associated with it.

Thank you for taking the time to read my Case Study. If you want to discuss anything you can always reach out to me via LinkedIn.

Fin.