Live Comments for TikTok Photo

✽

TL;DR

✽

Impact

✽

Context

✽

Highlights

✽

Why design

✽

Research

✽

Iterations

✽

Next steps

✽

Learnings

TL;DR

Growing user engagement and building communities with "Live Comments" for TikTok Photo.

TL;DR

Turning ambiguous problem space to tangible & shippable design: "Live Comments for TikTok Photo", growing user engagements and building communities.

Timeline

9 weeks
June - Aug. 2024

V.1 launched.

Skills

Interaction design
Prototyping
User research
Micro-interaction

Team

3 UX designers
(including me)
2 Product managers
4 Engineers
1 UX researcher

Tools

Figma
ProtoPie
Lottiefiles

Timeline

9 weeks
June - Aug. 2024

V.1 launched in 2025

Skills

Interaction design
Prototyping
User research
Micro-interaction

Team

3 UX designers
2 Product managers
4 Engineers
1 UX researcher

Tools

Figma
ProtoPie
Lottiefiles

My Impact

Turning an ambiguous problem space to a tangible & shippable design: "Live Comments" for TikTok Photo, growing user engagements and building communities.

+23%

monthly engagement rates

+4 million

daily active users

V.1 launched

on 15+ TikTok global apps

Impact

Highlights

Context

In 2024, TikTok aimed to diversify its ecosystem by promoting photo content.

As part of a company-wide growth strategy, TikTok wanted to expand beyond video-based content, and by promoting the consumption and creation for TikTok Photo.

In 2024, TikTok aimed to diversify its content ecosystem by promoting TikTok Photo.

Why is TikTok Photo important?

It promotes more diverse and creative content.

It lowers the barrier for content creation.

Easier to create high quality content.

The Challenge

On a platform that prioritizes video, static content like photo doesn't attract user attention.

Viewers

Lack of Viewer Engagement

Static content like photo generate less engagements than video.

Creators

Lack of Content Creation

Creators lack motivation to create due to photo's low engagements.

Platform

Lack of Content Diversity

Current platform primarily focuses on video-based content.

The Solution

Transform static photos into a more dynamic and video-like watching experience, creating more viewer-to-viewer interactions.

Highlights

Live Comments allows viewer to see what the crowd thinks on the big screen.

Live comments are publicly and autoplayed on photo feeds, allows user to see other's comments on the big screen, emphasizing on sharing and connecting.

Feeling inspired? Join the conversation on the big screen.

Feeling inspired? Join the conversation on the big screen.

Viewers can comment, react and express their thoughts directly on the big screen; emphasizing on the viewer-to-viewer connections.

Viewers can comment, react and express their thoughts directly on the big screen; emphasizing on the viewer-to-viewer connections.

Found your people?
Connect with them now.

Found your people?
Connect with them now!

Live Comments give viewers the opportunity to engage with individual photo: like, reply and connect with like-minded people.

Live Comments give viewers the opportunity to engage with individual photo: like, reply and connect with like-minded people.

Personalize the viewing experience! Adjust speed, opacity, text size, etc.

Personalize the viewing experience! Adjust speed, opacity, text size, etc.

Viewers can personalize the viewing experience with control settings such as speed, text size, transparency, line density, etc.

Viewers can personalize the viewing experience with control settings such as speed, text size, transparency, line density, etc.

Scroll for more detailed process

Why design?

Compare to video content (700M+ DAU), TikTok users don't feel engaged enough with photo content (54M DAU) .

Research insight

TikTok is a video-first platform, and users are naturally more drawn to content with motion.

TikTok is a video-first platform, and users are naturally more drawn to content with motion.

71% - highly engaging

Livestream Comments

54% - highly engaging

Video Live Comments

Static contents require active discovery with higher cognitive load, which TikTok users are not used to.

Static contents require active discovery with higher cognitive load, which TikTok users are not used to.

37% - semi engaging

Short Text Overlay

31% - semi engaging

Paragraph Overlay

10% - low engagement

Static Photo

9% - low engagement

Text as Photo

High-Level Principles

Design for video-like viewing experience, leveraging existing motion patterns that users are familiar with.

Motion

Users prefer content that feels more dynamic.

Involvement

Users want to feel involved with the content.

Community

Users enjoy forming online-communities.

Success metrics

How to measure success? What metrics should we track?

Core engagement rate per photo.

Total view time.

View completion rate.

Total photo content creation.

Ideation - 1st Round

Brainstorming all the possible ways to interact with existing elements.

I first started dissecting existing key areas, identifying opportunities and evaluated feasibilities of each with cross-functional team.

Ideation - 2nd Round

Narrowing down to "Live Comments"

As one of the options to interact with Text Overlay, "Live Comments" win

Provides richer and additional content per photo.

Creates more opportunity or viewer-to-viewer interaction.

Increase individual photo view time.

Ideation - 3rd Round

How do Live Comments show up?

Where to position the CTA button?

How to access the Live Comments panel?

Next steps

If I had more time, I would…

Test performance of each options with real users data.

Fine-tune the timing of the Live Comment's first entry.

Explore text customization during the creation process.

My biggest learnings

Collaborating in a fast-paced environment with designs that impact millions have taught me…

Show, don't tell.

Prototype~ Make them move! The best way to showcase an idea is to visualize it. Sometimes, the tools themselves can provide more ideas, opening up more possibilities.

Iterate, fail, learn, repeat!

There’s always room to improve. I’ve learned to move fast - iterate, learn, and repeat - while seeking experienced perspectives and asking for feedback strategically.

Communication is key to build trust with stakeholders.

Proactive stakeholder communication is key to building trust. Before 1:1s or design crits, I share a clear, structured agenda so everyone understands my ask upfront.

Advocate for design with data and evidence.

Making design decisions more defensible by grounding in data, working closely with XFN to align on the most meaningful metrics and the best evidence to validate the direction.

Wanna hear more?

There's so much more behind the scene!

There's so much more behind the scene!

Sometimes not everything can make the cut…

email Jen for the entire case study