top of page

TikTok Game Stream Improvement

Game streaming differs significantly from e-commerce and show streaming, with different target audiences, objectives, and design focuses for the live streaming rooms. This design aims to enhance the user experience of Chinese TikTok's game streaming through product functionality improvements.

Role

Project type

Time

Tools

Sole UX designer

Design, Stream (Game)

May, 2024, 3 days challenge

Figma, Sketch

Overview
Background

BACKGROUND

Game streaming is a major category on TikTok, featuring various monetization methods.

China's TikTok (Douyin) has a well-developed live streaming system, making it a significant industry. Streamers and their teams can quickly monetize their live traffic for profit. Game streaming is a major category, attracting different audiences and having various monetization methods.

WechatIMG157.jpeg
Challenge

CHALLENGE

Distinguish game streaming rooms from other live streaming rooms, and improve user experience and social engagement by upgrading the game streaming rooms.

Time Limit: 3-Day Challenge

Challenge Review: ByteDance (TikTok Company)

Review Result: Passed

SOLUTION

01.

Redesign Bullet -Comment feature

Solutions

The new design improves the user experience of watching live streams and added more mechanisms for "Bullet comment" in live streaming rooms..

1. Remove Obstructions

Redesign the layout when the keyboard pops up to avoid obstructions.

RPReplay_Final1718163209.gif

​2. Add Bullet-comment Styles selection

Enhance Bullet-comment playability by adding customizable styles, increasing user engagement and interactivity.Additionally, introduce certain consumption points for special Bullet -comment to address the issue of low spending in game streaming rooms.

更改弹幕.gif

02.

Chat content recognition and related info display.

Set up a discussion content recognition system in the comments section. When a popular topic related to games is detected, it will be displayed on a card. When users click on it, they will see the meaning of the topic and related information, helping them quickly understand the discussion in the comments section.

· Automatically detect a topic when it's discussed extensively in the barrage.

· If the topic is detected, slide in a card with the message "Hot topic detected."

· After expanding the card, it should display the title of the hot topic and a brief summary of its content. 

7878.png

· Clicking on the card should then raise a modal page showing the detailed information about the hot topic.

03.

Chat interaction content recognition: Display cards for frequently mentioned streamers.

In the chat interaction area, most users will recognize the streamer on the opposing side during the live stream. Through content recognition in the comments section, when it detects a commonly discussed streamer, a card will slide in to notify users. Users can then click on this card to enter the streamer's live room or visit their homepage.

Group 66.png
Group 67.png

Expand card

Detected hot topic streamer

​Click to enter the hot topic streamer's live room

04.

Add display of team streamers within the same event to help users experience multiple perspectives.

If a streamer has added team members who are participating in the same event before starting the live stream, those team members will be displayed within the stream. Users can quickly enter different streamers' live rooms by clicking on their portrait to observe the game's progress from multiple perspectives.

0909.png
Analysis

How I Got There

Research - Analysis

RESEARCH

What are the differences between live streaming rooms?

What are the characteristics of game live streaming rooms?

social-media.png

User Characteristic

User Psychology

Idolizing game live streamer, real-time following streamer.

User Behavior

Mostly interacts in the comments section and with real-time chat.

live-streaming.png

Community Operation

Need to create a richer image of the game streamer, fostering a community centered around the streamer and building networks.

gaming.png

Live streaming room requirements

High-quality video content and clear visuals; less emphasis on guided consumption behavior.

Live streaming room research detail ⬇️

Before conducting pain point analysis, a clearer understanding of the differences between game live streaming rooms and e-commerce or show live streaming rooms can help understand the positioning and design focus of game live streaming rooms. It can also initially guide me in engaging with users and understanding their needs.

Interview: Who are our users?

Research - Interview

Based on the basic research above, I conducted simple user interviews to understand user needs and refine user personas. I interviewed three users with varying degrees of enthusiasm for game live streaming. 

Main research questions and target:

Understanding what users focus on in game live streaming rooms, their interaction behavior with game streamers and the community, and their consumption behavior, which can help to refine the user base and understand the needs of different user segments.

User persona: What are the characteristics of the users?

happy-man-illustration-vector-removebg-preview.png

Basic Information:

Predominantly male

Generation Z

University students (ages 22)

Characteristics:
Passionate about gaming
Part of a gaming community
Follow the esports scene and track events

Research - Persona

Based on the research, users can be broadly categorized into two types: Streamer-oriented users and Game technique-oriented users. I analyzed the two types of users from three perspectives: purpose of watching live streams, user psychology, and user behavior, to create detailed user personas.

Problem

I avoided designing specific game live streaming rooms on TikTok since it's not primarily a gaming platform. Instead, I looked for solutions that address common user pain points without overly investing in specialized designs.

What do users require in a game live streaming room?

Leave comments

Cross-streaming behavior

In moderate and heavy game live stream users, many follow not only the game streamer but also other streamers who are friends with that streamer. When streamers collaborate or team up for joint broadcasts, users move between different stream pages to gain multiple perspectives on the game.

Moreover, streamers may also lead their fans to cross-stream, aiming to increase viewership and the liveliness of the live stream room.

"I want to leave more diverse comments to get noticed!"

Users enjoy commenting and interacting with each other. They prefer using diverse and engaging messages to grab the attention of streamers or others.

Users only join the discussion if it's a topic they're familiar with, familiar topic can also let them stay in the live stream to keep watching.

" What topics are they discussing in the comments? "

清清浅浅_edited.png

What are the corresponding product issues?

清清浅浅_edited.png

Limited interaction options and dull social experience

The interactive features in TikTok live stream rooms are relatively limited, with few options for real-time comments. For users watching casual games, the social interaction can be monotonous and somewhat dull.

Restrictions in switching perspectives during team games on TikTok.

Users are currently limited to one fixed live stream room, which restricts their ability to switch perspectives freely, especially during team-based games like shooters. This limitation can be inconvenient for users who enjoy watching team-based games.

Interaction Design

Feature 1 Enhance the diversity of bullet comments

The primary interaction method in game live stream rooms is through sending comments. Diversifying the ways comments can be used can increase viewer interaction. 


Introducing customizable comment styles and interactive features can also boost user engagement and interaction rates. Additionally, incorporating certain spending points on special comments can indirectly address the issue of low spending in game live stream rooms.

Feature 2 Comment content topic Recognition:

Problem:
Game live stream fans often form tight-knit fan circles, frequently discussing topics that only hardcore gamers fully understand. Newcomers and those unfamiliar with the game topics face a "high entry barrier."

Ideation:

Implement a comment section discussion recognition system that identifies popular game-related topics. When a topic is recognized, a card appears displaying the topic. Users can click on the card to see the meaning of the current topic and related information.

Effect:

This feature helps users quickly understand the discussions in the comments section, aiding streamers in retaining more viewers and encouraging increased interaction.

Additionally, the design cost is relatively low. As a short video platform, TikTok already has abundant content and information. The educational content can simply display related introductions or trending topics within TikTok.

Feature 3 Displaying a Card for Frequently Mentioned Streamers

In the comment interaction section, most users will recognize the 'opposing' streamer during the live stream, or mention streamers of similar skill levels after a spectacular play. At this point, many users would want to switch perspectives to search for the 'opponent' streamer or any streamer mentioned in the comments.

One of the solution to improve this user experience is to display a card in the comments section featuring frequently mentioned streamers. When users discuss a specific streamer, this card slides in, allowing them to easily navigate to the streamer's live broadcast or profile page without the hassle of searching again.

Feature 4 Display of Teammate Streamers from the Same Event to Enhance Multi-Perspective Experience.

If the main streamer in the live room is part of a team with other streamers before the broadcast starts, those teammates will be displayed in the live room. Users can click on their avatars to quickly navigate to different streamers' live rooms and observe the game progress from multiple perspectives.

Group 51.png

The design outcome passed TikTok's product designer assessment.

“It's a well-thought-out design that meets user expectations.”

"Analysis of game live streaming viewers is very good."
"Meets the needs of game live streaming viewers..."

bottom of page