Project Overview

Facebook Gaming Redesign is an effort by me and my team to redesign the existing Facebook Gaming app. The goal is to simplify the overall UX flow of the app and improve user experience.

Members:

Chu Rui Heng

Denny Liong Yong An

Elcoms Khang Jun De

Michael Seah

Woo Seik Yee

Wang Cheng

Tools Used:

What is Facebook Gaming?

Facebook Gaming is a platform for gamers to stream, watch, and interact with gaming content. It allows users to create and join communities around their favorite games, watch live streams, and discover new games and content creators. Facebook Gaming also enables users to participate in gaming tournaments and other events, as well as connect with friends and other gamers.

Users can stream their own gameplay or watch others' streams on Facebook Gaming. They can interact with streamers and other viewers through chat, reactions, and other features.

Credit: Facebook Gaming

Competition Research

Before we started, we researched on similar apps and found Twitch and YouTube Gaming. After establishing our primary, secondary and tertiary audience, we analyzed the good and bad design aspects in the Facebook Gaming App.

Target Audience

Primary: Young Adults

Age: 18 - 30

Interested in gaming content and popular streamers, whether or not they like playing games.
Wants to interact with people of similar interests.
Has disposable income.

Primary: Game Streamers

Age: 16 - 40

Enjoys games in general.
Streams either casually or professionally.
Tech literate.
Looking to interact with an audience while playing games.

Tertiary: Teenagers

Age: 12 - 18

Interested in gaming content.
Understands and uses social media frequently.
Watches streams mainly for entertainment.

Research and Analysis

We used the app and then created a user journey map to visualize the range of emotions of our user while completing a certain task. The user journey is based on a persona that is considered a primary target audience.

Good and Bad aspects of the app

After mapping out the user journey, we created a list of positive and negative aspects of the app we found while navigating through the task.

Clear color scheme ( + )

App has a clear color scheme and consists of a distinguishable primary and secondary color.

Easy filtering ( + )

App has an easily filtering system that contains the most common tags.

Android navigation tab

Inconsistent use of icons & lack of clarity ( - )

Meaning of navigation tab icons are not clear about what it represents. It is also inconsistent across Android and iOS platforms.

iOS navigation tab

Clustered search page ( - )

Pages are bloated with unnecessary options and content. The search page provides game lists, suggested games, top picks and live stream which is unnecessary.

Inconsistent layout and interface ( + )

The color scheme and layout of the interface were different as compared to the other screens which made it feels like two different design.

An example of the inconsistency of design is the Continue and Quit game buttons that were placed in an unusual positions at the top of the screen (on the left image) which users would not normally interact with.

After listing out the positive and negative aspects, we created a list of issues to tackle according to a priority list.

High Priority

Inconsistent button styles
Inconsistent style and layouts
Review UX flow and minimize number of subpage

Low Priority

Poor icon design
Clustered search page
Lack of organization

Research Document

User journey and task flows

After finishing our analysis, we started creating new the new task flows for our redesign.

Overall UI flow

Search flow

Watch stream flow

Paper Prototype

The paper prototype is then created to further improve and identify existing flaw in the app and different ways to change or improve them. Through the paper prototype and further playtesting with them, we identified several more issues:

Too many icons and different type of buttons on each page
Categories in game tab is rarely used
Unclear of where streamer profiles are in the live stream tab

Overall, users were also unsure of where to tap whenever they entered a new screen due to overwhelming number of elements, suggesting cognitive overload.

Moving forward, we decided to deal with these issues in the next iteration and proposed a few changes:

Removal of the different type of buttons or grouping them together
Removal of categories in the game tab
Drop down menu to display live streamer's information

Setting User Tasks

After having most of the important screens on paper, we then find suitable people and carry out a quick playtest session with the following list of scenarios. In this stage, my role mainly involves observing and jotting down the actions as well as emotions of the play-testers while undergoing each of the task.

High fidelity prototypes

We move on to our digital prototype in Figma, where we focus on tackling the issues of cognitive overload in some of our screens. Below are the screenshots of our iterated designs based on the insights and feedbacks we have gathered.

Feed, streaming and gaming tabs

Providing clarity: The main icons displayed at the bottom of the screen are associated with a 'name' (Feeds, Stream, Gaming) to allow users to have an easier time identifying each icon as well as what to expect upon tapping on them.

Game page and gameplay

While reviewing the initial screen flow of Facebook Gaming, I happened to realize the overwhelming numbers of subpage that user will tend to go through while sourcing for a game to play or watch. To improve the UX flow for that, I have decided to have only as little subpage as possible.

As seen below, each game will have their own subpage which contains the description of the game, gameplay videos, suggested streaming videos and a play now button that then allow the user to choose their preferred game mode (Livestream or offline).

Streaming screen, info and sending stars

While designing for the streaming screens, we encountered problems with users not knowing what is the meaning of the star icon as well as the supporter button. To solve that problem, my team have suggested displaying a one time descriptive pop up for users viewing a stream for the first time.

Search page results

The search screens seen in the initial Facebook Gaming app were clustered with many information which tend to evoke confusion. In our iterated design, we focus on simplifying the number of elements on this screens to reduce cognitive overloading and potentially enhance the overall user experience.

Support page

The benefits on the support page of the streamer are now shown in a more clear and concise manner, making it easier for the user to see.

Prototyping process

The prototype was created in Figma due to its ease of use and support for collaboration between multiple people. The goal was to connect all the screens together to create a comprehensible flow.

Prototype Link

Post-mortem

Although the project was successful, there were still unexpected problems and hiccups along the way that could have been prevented. We also learned a lot of new things during the project that made us better designers overall.

Working from home forced us to create this project entirely online. Since we were not used to it, it became harder for us to communicate and playtest.
A bigger team means that the project also became harder to keep track due to everyone having different ideas. It is important for us to always communicate with each other to make sure everyone is on the same page and up to date.
Testing should be always be done at every stage of development and design constantly updated to fit the needs of the target audience.