TikTok livestreaming AR

Project Lead, 3D Designer, UX designer, interaction designer, art director

Overview

TikTok livestreaming focuses on real-time social engagement. Streamers can casually chat with friends, sell products, or earn money through gifts from viewers. My role was to design AR effects for livestreaming’s social environment to increase livestreaming durations.

What I did

  • Developed effects to boost social engagement on livestreams using AR, AI, and other emerging technologies.
  • Built the Livestreaming effect pipeline and design systems for U.S. designers
  • Led user research, competitor analysis, created 3D designs, and launched 100+ effects.
  • Collaborated with engineering on optimization standards and performance fixes.

Impact

  • +15% on effect usage rate

  • +4% on user livestreaming duration

  • 100+ new livestreaming effects on new pipeline

  • avg 200%+ increase on comments, likes, and gifts from audience

Animal Album Effect

Background and Research

Context

At this time, TikTok LIVE was a newly introduced feature in the United States. Most users were used to short-form videos from the FYP where they could spend time perfecting video edits. Our goal was finding solutions using effects that would build user’s confidence and comfort for livestreaming and increase the time they spent on TikTok LIVE.

User Research

To get better context on our design challenge, we partnered with the PM team to understand user behavior on TikTok LIVE.

Design Process

Improve users’ comfort with livestreaming

We hoped this effect could encourage new users to adopt the livestreaming feature. We included the following into the design direction:

Shared effect experience

To maximize the experience of a "shared effect", version 1 of this idea combined multiple users into one scene. However, after speaking with the engineering team, technical barriers required us to pivot our idea. We decided to utilize an existing album feature that was mainly used for simple color filters until now. This animal album grouped 6 animal characters with the same design language so users can feel like they are part of the same world.

Full-body Interactions

Increase host audience bonding through play

  • Since most livestream phones are stationary, I created exaggerated full-body interactions to create a fun atmosphere and better bond hosts and audiences.

  • I made interaction prototypes with stand-in 3D models through visual scripting. Then I modeled and rigged the final 3D assets and implemented them into the project.

interaction prototype

visual scripting

final interation

Interaction design guidelines

User's real-world units are drastically different from the engine space units. I created several movement range guidelines for mapping real-world rotation and position units into digital space, decreasing the friction of effort from users and improving our pipeline efficiency

users' movement are remapped to a smaller range to ensure they stay within the camera screen

Results and Impact

  • Animal albums contributed to increased user livestreaming duration by 4%
  • On average, comments, views, and likes on livestreams increased by over 200%.
  • Animal Series was one of the most popular live streaming effects to date
  • Users built communities from animal album and received physical gifts from fans.

3D Visuals