Video Editor
TikTok


Start with the layout
Based on user feedback, they spend 80% of their time on editing tasks, manipulating the timeline while previewing the monitor. I want users to be able to focus on the editing process smoothly, with a more stable and consistent visual flow.

Keep users in the workflow

When you click on any element in the timeline, its editing panel appears immediately on the right. The panel switches automatically when you select different elements.
Each element on the timeline can be interacted with differently, depending on its specific properties.
Different elements have their own styles on the timeline, and sometimes they even interact differently. When users move or manipulate elements on the timeline, they'll get real-time feedback to help them position and work with the elements more accurately.

Address the creators' pain points
The automatic subtitles feature will automatically highlight video tracks with audio. When translated, you'll see the translated text on the timeline, making it easier to locate and make further adjustments


Challenges & Takeaways
The challenge of this project is that we need to design and fully launch the product within two months. For me, this meant quickly assembling a design team and diving into the various interaction details and implementation logic of the video editor. We worked closely with the product team and engineers throughout the process.
Shifting from a more familiar mobile context to the web environment, I also learned some more universal design principles: 1) Design multiple ways to accomplish a single action, 2) Web design requires more interactive feedback, and 3) Allow users to interrupt an action at any time.