TikTok TV revamp
Overview
TikTok is a fast growing product, and we started to realize that TikTok TV can showcase a wider variety of content better suited for TV viewing experiences — such as longer videos, series, and subscription-based videos.
- Lead Product Designer
- UX design / Visual design
- TV
- 6 Design Patents
6 Design Patent
- Video related interactive patent
- Design inventions
- Apr 2024 — Oct 2024
Special thanks
- Nina Ding
- Zhanchen Zhang
- Weilong Gao
Background
Why TV?
Since its successful launch in the North American market in November 2021, TikTok TV has successively landed on Android and webOS platforms. We have continuously optimized the product during this period and accumulated valuable market experience.
By the second half of 2023, as the TV business gradually became one of the core segments of PGC, we began significantly increasing our investment in this field.
1.9M
70%
30%
The new visual
A vast window of TV
We wanted TikTok TV to feel like a vast window — turning the screen into a spatial medium that connects the user's room to what's playing on it. The goal was a sensation of depth that carries through every layer of the interface, not just a flat surface to scroll on.
True depth is expensive. On Web TV and Android TV, real blur effects and color-driven motion cause significant performance issues. We solved it with layered transparent color — spotlight backgrounds bleed through the layers above, creating depth without the cost.
The new identity
Interactions & Animation
On TV, animation isn't decoration. It's the feedback layer — what just happened, what's next — and the identity layer that gives the interface its tone across a 10-foot living room.
This iteration pushes further. Motion now responds to remote input, organized around three principles covered below: dynamic backgrounds, in & out transitions, and cold-start loading.
Dynamic background & video consumption
As the most important element on TikTok TV video feeds, users spend nearly 90% of their time on the feed and engaging in video interactions. We introduced an immersive background based on the current video to improve the spatial watching experience.
Feeling of In & out
To create an immersive TV consumption experience, we added smoother animation when entering and exiting pages, allowing users to perceive the spatial relationships between pages.
Scaling the interface by 30% from top to bottom makes the transition more noticeable — without being overly dramatic on the TV screen.
Cold start loading
Due to the product's modality, TikTok TV requires additional time to preload FYF videos during the cold start phase. To address this, we implemented two animations that serve to extend the cold start period across various TV devices.
We have observed that users enter the feed before the interface has fully loaded, and they tend to lose patience after a prolonged wait.
Loop loading should commence once the TikTok logo is hidden. It is essential to ensure that all content and components are fully prepared prior to the conclusion of the cold start video playback.
The new looks
Components & Focus
Components
We apply the new TV visual system while maintaining consistency with TikTok's design system in component proportions, corners, and gradients.
To align with the TV interface's spatial design, we extensively use transparent colors across components for a unified look.
Focus
Compared with touch-based interfaces, television interfaces emphasize default, focused, and pressed states to capture attention on the selected element. This approach forms the foundation for initiating navigation.
Horizontal Focus
The static position of focus states consistently highlights the second item in a horizontal row, ensuring a fixed point of interest along the horizontal axis.
Vertical Focus
The static position of focus states remains centered on the list, ensuring the focal point stays in the middle of the vertical layout.
Highlights
Features
My & Others Profile
Differentiated profile designs meet user consumption needs across different scenarios.
Search & Result
The first TV search feature specifically designed for short videos.