TikTok China
My Role
Product design intern
Timeline & Status
4 weeks
Launched Q4 2024
Team
2 product managers
3 designers (including me)
1 ux researcher
Tools
Figma, ProtoPie
Skills
Interaction design
Micro-interaction
Product strategy
Rapid prototyping
During my internship at ByteDance, I spent the last 4 weeks working with the TikTok China's team to improve its user engagement on Photo feeds. It is the most used and downloaded app globally, known for its dynamic interactions of short-video and live stream.
However, its more static Photo feeds significantly lacks user engagement and interaction. Introducing features to drive higher engagements for Douyin Photo has become a top priority to explore.
Working with the product team and UXR, I my proposal "On-Screen Live Comments" got approved from product leaders and was added as part of the priorities in product's H2 roadmap. I started with open exploration in low-fidelity wireframes, narrowing down the options with feedbacks from UXR and PMs, finally fine tuning design and interaction details in high fidelity prototypes.
This feature was launched at the end of 2024 in TikTok China with around 4 million DAU 30 days post-launch.
daily active users
TikTok China currently have around 740M+ active monthly users, known for it's short-video and live stream. It's operating independently for the Chinese market.
The Problem
TikTok's Photo feature signifcantly lacks user engagement, when compared with Video feeds.
The Goal
Introduce an interactive feature that users are familiar with to drive engagement for Photo feeds.
The Design Proposal
Adapting to the existing Video feature, Photo's "On-Screen Live Comment" allows viewers to publicly comment on the content, sharing and connecting in real-time.
"On-Screen Live Comment"
While TikTok China's main Video feature is highly engaging and entertaining, its Photo feature significantly lacks user engagement and content creation.
Lack of Viewer Engagement
Viewers found photo feature to be more static compared to the more kinetic video content.
Lack of Content Creation
Creators lacks motivation to create photo-based content due to its low engagements.
Photo feeds are not the main feature on TikTok China, and lacks user engagements compared to Video feeds.
Douyin's Live Stream and Short Video remain the two most engaging formats on the platform; while it's Photo and Text based formats significantly lacks user engagement due to its more static content.
Users are used to passive consumption, where Video feeds can actively and constantly deliver more information than Photo feeds.
Passive Consumption
Douyin users are used to highly-personalized content been delivered and automatically played out to them.
Douyin users rarely take initiative to intentionally discover content, such as searching to find specific content or solutions.
Why do TikTok users engage a lot more with video feeds than photo feeds?
Working with the UXR team, we gathered data from both Video feeds and Photo feeds to understand the pros and cons of both, categorizing and understanding why certain ones are more engaging than others.
Existing video features are highly engaging, but why?
71% - highly engaging
Live Stream Comments
Live Comments allows viewers not only react live to the content, but also to other viewers' comments, making the experience more entertaining and relatable.
54% - highly engaging
On-Screen Comments
On-Screen Comments is a feature already widely used in the Asian video culture. Viewers react in real-time to specific video content, creating a virtual "watch party" effect.
How engaging are the existing photo features, and why?
37% - semi engaging
Short Text Overlay
"Short Text Overlay" allows viewer to easily digest text within a short attention span. Creators often create eye catching tags to gain viewer attention.
31% - semi engaging
Long Text Overlay
Creators utilize "Long Text Overlay" for more detailed captions, most times inviting viewers to express opinions in the comment section.
10% - low engagement
Photo-only
"Photo-only" feeds are usually static and don't provide as much information as video feeds. Majority of the viewers skip photo feeds, or quickly scrolling through.
"Text-only" feeds typically requires viewers to scroll horizontally for more information, an new interaction gesture opposite of the vertical scrolling that viewers are used to.
We found from UXR discoveries that Douyin users value these three aspects while consuming both video and photo feeds:
User prefer motion based content
Adapt to the more native Video features. Leverage similar interactions that users feel engaged to.
Encourage viewer-to-viewer interactions that promotes connections by forming communities.
Create opportunities for viewer to be more engaged and feel more related with the content.
How might we promote motion-based and community-forming features that allow users to feel more involved?
Design principles
Based on researching the existing pros/cons and the competitive landscape, I generated a set of product principles with the Product Manager to help the team guide the direction of this design feature.
Proactiveness
Actively providing user information in additional to the original content.
Familiarity
Adapt to existing interactions from Video feeds that users are familiar with.
Community
Encourage collective participation that forms connections within communities.
The anatomy of existing Photo feed
Understanding existing layout and functions is important to identify areas of design opportunities and access its feasibility. I started by dissecting the existing features of a Photo feed into functional areas and explored the design options from each.
Exploring opportunities for interaction features.
I started with open explorations on brainstorming new interactions with Photo's existing features. Exploring various options for users to interact with photos, text overlays, captions, and comments. I met with product design and managing leaders frequently, to discuss the feasibility of each.
Live comments on photo
Emoji react to photo
Comment for multiple photo
Book style for TikTok read
Rearrange photo and text
Quote from caption
We chose live comments on photo because:
provides additional content
spark more conversation
community building
increase photo view time
Fine tuning the details of design.
After discussing with the product leaders, we decided to combine "On-Screen Live Comments" and "Live Comments Panel", and I dived into the detail design of the following two aspects: the format of live comments on photo feeds and placement of CTA button.
Detail #1: How do live comments show up on screen?
Option 1
because it's adapted from existing video feature that users are familiar with.
Option 2
because as comments increase, they will disrupt the original photo content.
Option 3
because the profile picture are distracting and not essential to the comments.
Detail #2: Where to put the Live Comment CTA button?
Option 1
because it informs the users of its function, and encourages them to take action while not competing with others.
Option 2
because a lower count is not desired to display on feeds; a higher count will compete attention with comment count.
Option 3
because users might not understand Live Comments' function right away just from the icon;
"On-Screen Live Comment"
Launched in Q2 2024 with 4 million+ DAU
The 4 week of exploration was just the beginning of this design project. While my proposal "On-Screen Live Comments" got approved by the product leaders to be included in the product roadmap. This feature was launched at the end of 2024 with 4 million+ daily active users in TikTok China.
Exploring opportunities for interaction features.
I started with open explorations on brainstorming new interactions with Photo's existing features. Exploring various options for users to interact with photos, text overlays, captions, and comments. I met with product design and managing leaders frequently, to discuss the feasibility of each.