Redesign of Tik-Tok's
Film/Editing process.

Giving content creators creative flexibility with effficient and inutitive filming/editing features.

Case Study

Tik-Tok Creators

3 Months

Mobile

Design Lead

Why Side-By-Side?

Tik-Tok is Huge.

Tik-Tok is a growing app that has over 1.6 billion users on it as of 2023, so giving the ability to create quality content on Tik-Tok is very important for their content creators that have to entertain the vast amount of users.

Background.

Content creators spend a majority of their time fliming and editing their videos. With the amount of time they spend on this process they need a more efficient way to cut, refilm, and edit their content in order to make the entire filming and editing process easy and intuitive.

Problem.

When it comes to the filming/editing process Tik-Tok's current capabilities makes it unintuitive for the user. It requires the user to go back and forth from already filmed clips and having to do retakes when they are further in their process.

Solution.

We decided to design a multitude of features that would enable the user to have more creative flexibility without having to redo too many steps.

Features.

Sound Markers

We added sound markers for visual aid when recording and can be found within sound for convenience. When adding the marker you can drag it onto a desired time stamp and tapping it enable a red marker that indicates the recording to stop.

Recording

When it comes to recording the content the sound marker will show up on the dial. Once the recording reachees the marker the recording stops.

Retake

The purpose of the retake button allows the user to have the ability to take multiple clips of the same section if they aren't satisfied with the initial take.

Library

The original way to add clips and photos to a Tik-Tok was done by pressing a "+" that opens your photo library. Because Side-by-Side adds a retake option, multiple clips are added into a library. This library is accessed by pressing the edit button and bringing the tab up Clips that are currently being used are highlighted.

Comparison

To compare two clips Side-by-Side just click a desired clip from the library. It's then put up next to the current clip in use. Sound markers are also visible on the timeline to help reference where transitions/cuts were made

Top Clip

Once you decided which of the two clips is best you highlight the one you want to delete. Then when the clip is highlighted, pressing the bottom right "delete" button will get rid of the clip.

Design Process & Future Improvements

Lo-Fi

Challenges

Since this was just redesigning Tik-Tok's fimling and editing process I wanted to make sure that all of the buttons that were added and/or changed fit into the UI well. To do this the new implementations shouldn't interrupt any existing features and seem "invisible," but at the same time still be discoverable.

User Flow

Achieving Discoverability

While maintaining TikTok's user flow, I integrated new features into familiar areas for easy discovery. The Lo-fi prototype explores sound markers for filming, while the User Flow focuses on editing. After presenting to peers, we found the editing prototype lacked practicality, but the overall concept showed promise.

Implementing Feedback

We analyzed TikTok and other editing apps through interviews and competitive research, identifying strengths and weaknesses. I applied these insights to our Lo-fi designs, gathered peer feedback, and refined the path to the final product.

Future Improvements

This redesign shows promise but has room for improvement. While discoverability was a key focus, better solutions may exist. Since the new features are unfamiliar to most users, simplifying them could enhance usability and ease learning.

Interactive Figma Prototype

Try These Tasks:

Navigate to the homepage
Find and play a movie
Check your watch history
Adjust the app settings

Redesign of Tik-Tok's Film/Editing process.