TikTok China
Product design intern
6 weeks
2 PM
2 UX designers
1 UX researcher
3 SWE
Figma, ProtoPie
Interaction design
Rapid prototyping
Product strategy
During my 2024 internship at ByteDance, I initiated the north-star design to growing user engagement for TikTok's static contents in Photo feeds with new interaction feature "On-screen Live Comment". Feature launched in 2024.
Working within a XFN team, my initiation and design of the north-star interaction design "On-Screen Live Comments" got approved from leaders and was added as part of the priorities to continue exploring in product's 2024 H2 roadmap.
This feature was launched at the end of 2024 in TikTok China with 4M+ DAU measured 30 days post-launch.
Daily Active Users
Viewers
Lack of Viewer Engagement
Viewers found photo feature to be more static compared to the more kinetic video content.
Creators
Lack of Content Creation
Creators lacks motivation to create photo-based content due to its low engagements.
Introducing a video-like viewing experience of photo feeds, dyamic and familiar - to increase core user engagement metrics for photo feeds.
The Goal
Introduce an interactive feature to drive engagement for Photo feeds from consumer side to increase core engagement metrics.
The Proposal
Photo's "On-Screen Live Comment" allows viewers to publicly comment on the content, sharing and connecting in real-time.
"On-Screen Live Comment"
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.
Active Discovery
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 TikTok users value these three aspects while consuming both video and photo feeds:
User prefer motion based content.
Users enjoy forming communities.
Users want to feel involved with the content.
How might we promote motion-based and community-forming features that allow users to feel more involved?
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.
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;