TikTok Photo Live Comments
Product design intern
8 weeks
2 PM
2 UX designers (including me)
3 engineers
1 UX researcher
Interaction design
Rapid prototyping
Product strategy
In 8 weeks, I proposed the north-star design called " Live Comment" to grow user engagement for TikTok Photo. Working closely with UXR and the product team - identifying gaps, researching user behaviors, prototyping through all design fidelities - my final design gained leadership buy-ins as part of official roadmap.
"Live Comment" was launched on TikTok China's mobile app in 2024,
launched
TikTok China app H2 2024
4M+
Daily Active Users
Known for short videos and livestream, TikTok now aims to diversify and expand into photo contents.
A TikTok Photo feed
Collaborating with UXR team, I scoped a detail research plan to understand user behavior and market trend.
2024 Executive Product Report
Survey responses
7-day span
Moderated user interviews
3 Previous UX Research Report
71% - highly engaging
Livestream Comments
Let viewers react to the video and to each other, creating a more interactive and relatable real-time experience.
54% - highly engaging
On-Screen Comments
Popular in Asian video culture. Let viewers react in real time on top of the video, creating a virtual watch-party feel.
Static contents require active discovery with higher cognitive load, which TikTok users are not used to.
37% - semi engaging
Short Text Overlay
Help viewers quickly scan key info; creators use punchy tags to grab attention
31% - semi engaging
Long Text Overlay
Richer context and prompts that invite viewers to share opinions in the comments.
10% - low engagement
Photo-only
Feels static and low-information, so most viewers skip or quickly scroll past them.
9% - the lowest engagement
Text-only
Force horizontal scrolling, breaking the vertical scroll pattern viewers are used to.
Promote motion-based and community-forming features that allow users to feel more involved with content and connected with people.
Motion-based Content
User prefer motion based content.
Involvement
Users want to feel involved with the content.
Connection
Users enjoy community-forming with people of similar interest.
Working with the PM, I consolidated key metrics to measure success.
Core engagement rate
Like, share, comment, save counts.
Total view time per feed
Time spent on the entire photo feeds.
View completion rate
Time spent per individual photo.
Live comment rate
Amount of live comment posted.
I first dissected the existing photo feed into key functional areas to spot design opportunities and evaluate feasibility.
Brainstorm on all the possibel ways users can interact with a photo content.
Live comments on photo
Emoji react to photo
Comment for multiple photo
Book style for TikTok read
Rearrange photo and text
Quote from caption
Narrowing down to option "Live Comments".
Connects viewers of similar interest.
Increase individual photo view time.
Adapt to existing popular feature from short-videos, create a video-like viewing experience for photo.
Option 1
Reformatting existing live comments from short video.
Maximize live comments display per photo
Option 2
Reformatting existing live comments from livestream.
Viewer profiles are not necessary to show
Option 3
Might be disruptive to the original content
High testing efforts from engineering
Adjust to format differences, modify a video-native interaction to photo with consistency.
Video's Live Comments is based on timestamp.
Photo's Live Comments is based on individual photo.
Where to position Live Comment's CTA button?
Option 1
Inform user of a new feature; Utilize existing component
Option 2
Might compete with main comment count.
Option 3
User might not be familiar with the new feature just from the icon.
How to view Live Comments under each photo?
Option 1
Carousel gives user more flexibility to browse individual photo.
Able to display more live comment per screen area.
Option 2
Drag and drop interaction gives users more viewing agency.
Half sheet hides important content of the original photo.