Steam

Steam

A User-Friendly Mobile Experience

Steam, a top video game distribution platform, provides game installations, updates, and community features. However, its mobile app has held a low 2.6-star rating in the app store for the past eight years, reflecting a poor user experience and missed opportunities for increased engagement and sales. To tackle this, the team is redesigning the app to improve its design and boost user retention.

Year: 2020

Project Type: Personal Project

Produced: Independently

Steam

A User-Friendly Mobile Experience

Steam, a top video game distribution platform, provides game installations, updates, and community features. However, its mobile app has held a low 2.6-star rating in the app store for the past eight years, reflecting a poor user experience and missed opportunities for increased engagement and sales. To tackle this, the team is redesigning the app to improve its design and boost user retention.

Year: 2020

Project Type: Personal Project

Produced: Independently

Objective

To refine the design of a feature-rich software client, ensuring it remains user-friendly and accessible to the average user.

Approach

The redesign will streamline the user flow with touch gestures, enhancing accessibility to key features.

Research Plan

Research allows me to deeply understand users—their frustrations, hopes, fears, and goals. It forms the foundation for creating effective solutions. To stay focused, I develop a research plan outlining goals, questions, assumptions, methods, participants, and timeline before beginning the research phase.

Research Plan
Accordion Content
  • Identify the target audience of Steam
  • Learn about how the main competitors of Steam are catering to customers’ needs, as well as their strengths and weaknesses
  • Get to know how people are managing their steam
  • Uncover people’s experience of finding key features and games they want to play
  • Gamers are the main users of digital game distribution services
  • Gamers are willing to use a mobile app to view content and make purchases
  • Most people wait for discounts to make game purchases
  • People are constantly looking for new games to play

Steam (2018)

Steam UI

  • Gamers 26-35 years old play for eight hours 12 minutes per week. This increased more than 25 percent in the last year. (Limelight Networks)
  • Video gamers spend an average of 7.1 hours (seven hours, seven minutes) each week playing games. This is an increase of 19.3 percent in the last year. (Limelight Networks)
  • It is equally important to research enterprises that pioneer in the market of platforms related to games, as their solutions to similar problems will help me gather insights about their strengths and weaknesses. These insights also help me identify any gaps in features that Steam might address. A complete competitive research can be viewed here.
  • With the data gathered from market research, I started to generate provisional personas using the statistical knowledge I gained to represent a certain type of user that is potential audience of Steam. These personas will help me screen appropriate people to interview.

Market Research

Understanding the market is crucial to identify what we know, who the audience is, and recent trends. Insights from market research guide the creation of personas and shape secondary research questions. A complete market research report can be viewed here.

Market Research

User Interview

Building on initial market insights, I conducted in-depth interviews with 15 users about their Steam mobile experience, utilizing an Interview Guide containing 15 open-ended questions.

Interview Guide
Accordion Content
  • Gamers are the main users of digital game distribution services (Validated, 14/15)
  • Gamers are willing to use the app to view content and make purchases (Validated, 13/15)
  • Most people wait for discounts to make game purchases (Not Validated, 6/15)
  • People are constantly looking for new games to play (Not Validated, 4/15)

To synthesize the qualitative data gathered from user interview, I created an empathy map to identify patterns across users, uncover insights, and generate needs.

       Insights
    • Users have a hard time navigating through the current steam app
    • Users get game recommendations from friends, streamers, and featured sales
    • Users are more likely to make game purchases when they are on sale
    • Users feel a sense of security when using the steam app for confirmations
       Needs
    • Users need a clean and simple design
    • Users need an intuitive way to navigate through steam’s game collection
    • Users need a way to find their favorite games on sale
    • Users need to be able to access steam’s key mobile features such as steam guard
  • After gathering knowledge of the audience, as well as their goals and needs, I use the user persona to represent key segments. It helps me focus on tackling the most important problems – to address the major needs of the most important user groups. It is both fictional and realistic. Let’s meet Ryan, a college student at Cal State Fullerton. He treats gaming as a way to take a break from school and work, and enjoys the memorable moments he has playing with his friends.

To define the problem I am going to solve, I create Point-of-View (POV) Statements that allow me to ideate in a goal-oriented manner, and How-Might-We (HMW) Questions to frame the ideation in the brainstorm session for solutions. The statements and questions are generated based on the insights and needs I gathered in my Empathy Map.

Brainstorming

Taking the HMW questions, I started my brainstorming process to come up with solutions for each of these problems. I decided to use mind mapping so that I could quickly generate as many ideas as I could. This is an extract of my brainstorm results.

Product Goals

With HMW questions and brainstormed solutions, I decided to list project goals that will both serve as a guide for the future development of the product and rubrics for determining what features to include in Steam’s mobile application. I summarized user goals from my user persona and empathy map, and established business goals based on the project brief.

Accordion Content
  • ‍After setting up the product goals and deciding what features to include, I want to continue building up the structure of Steam using the application map. An application map helps me to visualize the relationship between the content and examine the hierarchy.
  • To assist the users to navigate through the application better and identify the main flow of users when they are completing a task, I created task flows centering on the key features of Steam. In this way, I was able to decide what I am designing, and think through the necessary steps and examine the user experience in details.
  • Building on the task flow, I mapped user flows whose scenarios correspond to the established tasks. This process helps me walk in an individual user’s shoes, and think through different scenarios that this user might encounter. Below is the user flow for Ryan when he wants to mark navigate through the app.

Product Roadmap

The Product Roadmap aligns project goals with prioritized features for development. I compiled a list of product features, categorized as Must-have (P1), Nice-to-Have (P2), and Can-come-later (P3), based on their alignment with business and user goals.

Product Roadmap

Wireframes

After creating a UI Requirement Document outlining the key screens from the task and user flows, I sketched low-fidelity screens to quickly explore and refine concepts before digitizing them. You can view the UI requirement document below.

UI Requirement Form
Accordion Content
  • Once I had a visual direction of the layout, I started to add more details and precisions to the sketches by turning them into mid-fidelity wireframes.Creating mid-fidelity wireframes helps me focus on the visual consistency and hierarchy before applying styles. In these wireframes, I tried to incorporate common design patterns that have been tested on our competitors’ product, or included elements that directly address users’ goals, needs, frustrations, and motivations.

After I finished designing screens that are necessary for users to finish tasks, I linked them using Figma  and created a mid-fidelity prototype for usability testing. Conducting usability testing using a mid-fidelity prototype is useful for detecting issues in information architecture and flows before spending too much time designing details.

Some tasks include:

  • Task 1: Add a game to the Wishlist.
  • Task 2: Buy a game from Top Sellers.
  • Task 3: Confirm market trade through steam guard
Accordion Content
  • I then conducted both in-person and remote usability testing with 4 participants, and created transcripts for each participant based on my observation of their interaction with the prototype. I jot down their mistakes, slips, and confusions they expressed in the process. This transcript is a perfect raw material for summarizing the patterns of user’s interaction with the prototype. As the time and resources was limited, I made revisions based on the priority level I set up for each recommendation in the affinity map. View transcripts

Usability Testing

Before usability testing, it’s crucial to define test objectives, subjects, methodology, tasks, and measurement rubrics. I prepared a usability testing plan to clearly outline what I intend to test and why, ensuring thorough preparation for the testing process.

Usability Testing Plan

Design & Prototype

The final interactive prototype provides an overview of the mobile application, offering a general idea of the visual design and navigation. The full prototype can be viewed here.

View Prototype
Accordion Content
  • UI Kit is a compilation of existing UI elements on the application that provides references for future design and collaboration for the design team. It is also a living document and will be updated whenever there is an iteration of the design. Below is a basic component part of the Steam UI Kit.
  • I created high-fidelity wireframes by applying established styles. It further lets me to examine the overall aesthetic feelings and visual balance of the application.
  • After creating high-fidelity wireframes, I revisited user testing to ensure the interaction of the application was adequate.

Finally. Features that matter.

Play Video
Play Video

Previous Project

Dive into the creation of Feed the Bear, a puzzle game where you help a bear gather food for hibernation.

Feed the Bear

Next Project

Explore the guidebook we crafted to help your clients easily navigate and engage with your business, ensuring a smooth and informed experience.

Zatrox Informative Guidebook