TikTok

Progress Bar

2022

Product

0 -> 1

Scrub through videos

Scrub through videos

Launched in 2021, this features was a much anticipated quality update.

How does it work?

Inactive

Inactive

When not triggered, the progress bar remains small.

Drag

Drag

Hold down the circle to scrub through the video. Video UI temporarily disappears to display duration.

20% of users are watching 30s to 60s videos

20% of users are watching 30s to 60s videos

20% of users are watching 30s to 60s videos

Dragging the progress bar at the bottom of a video is a very basic functionality of any video player.


This feature is frequently used especially when the video is playing a part users are not interested in; it also meets the needs of users when they want to replay a part they missed or they want to watch again. In addition, when TikTok began introducing more longer form videos, this feature became vital for users.

It’s 2021 and we are about to design the first short form video Progress bar on TikTok.

It’s 2021 and we are about to design the first short form video Progress bar on TikTok.

Design

We tested with different UI placement and user flows to find the most effective solution.

We tested with different UI placement and user flows to find the most effective solution.

We tested with different UI placement and user flows to find the most effective solution.

Inactive

Progress bar remains small but ready to be scrubbed.

Drag

Video UI disappears, time stamp appears in the middle.

Release

Progress bar moved back to the original location.

Indicator

Blue-First Time Users

Blue-First Time Users

User blue to introduce new features

User blue to introduce new features

White-Experienced Users

White-Experienced Users

TikTok Story brought increase in content posting

TikTok Story brought increase in content posting

Indicator

Progress Bar:

Precision and Convenience in Viewing

The progress bar was a much needed feature, especially with TikTok rolling out and pushing more long form content to users.


Users need to have an appropriate scrollable area for their thumb so they don’t accidentally press the tappable areas surrounding such as the tab bar or music area.


Displaying the timestamp allows users to easily scroll to the point in the video they wish to view.

Cynthia Lee

Portfolio 2023

All Rights Reserved

Thank you for viewing!

Cynthia Lee

Portfolio 2023

All Rights Reserved

Thank you for viewing!

Cynthia Lee

Portfolio 2023

All Rights Reserved

Thank you for viewing!