If there's one type of digital product that can make you feel like you're somewhere between chaos and wonder, it might be video editors.
No other product category packs so many UI elements into a single screen:
complex timelines, effects panels, visual adjustments, audio tracks, stickers, shapes, text tools, filters, media uploads, layout sizes, and a myriad of sliders.
And when I was asked to design an all-in-one video editor that had to be powerful, easy to use, and beginner-friendly, I felt like an architect being asked to build a luxury home…
on a 4x6 meter plot.
The main challenge was simple, yet brutal:
“There are over 20 major components on the screen. They all want to be visible. They all want to feel important. How can I keep the user from being overwhelmed?”
When I Found the Pattern
After mapping all user interactions, I realized that the problem wasn't the number of components, but rather when and how they appeared. Users weren't distracted by the sheer number of features, but they were distracted when they appeared out of order and without context.
This brought me to a turning point: the video editor didn't need to be drastically simplified. It just needed to be taught how to present itself respectfully.
Exploration Phase: Understanding User Workflows (Workflow Mapping)
I started mapping how people typically edit videos. Do they start with the upload? From the timeline? From music? From filters? It turned out that almost all users started with the same thing: putting something on the timeline. This small discovery completely changed my design focus. Instead of cramming a ton of options into the left panel, I started building the interface based on the principle:
“Users should be able to start editing within the first 5 seconds.”
I wanted this workspace to feel like a creative workbench: users only see the tools they need, when they need them. One of the most important decisions in this process was grouping the major features into core categories. This is where the interface began to take shape.
I started asking myself:
“If I wasn’t the designer of this app, how would I know what to click first?”
From there, seven major categories were born:
Upload
Photo
Music
Shape
Text
Filter
Settings
For the first time, the interface began to feel rhythmic, users now saw a logical first step. They were no longer facing a feature wall. The timeline was the area that took up the most of my time. I had to determine:
how high the video track should be
how wide the drag area should be
how big the handles should be
how clear the audio waveform should be
how to display the text track
how to mark durations
whether previews should appear
how transitions between clips should be expressed
I created dozens of versions of the timeline.
Some were too thin, too dense, too “professional,” or too plain.
Until finally, I found a formula: The video should be thicker than the audio, the audio should have a visual rhythm, and the text should have its own color. Conclusion of This Long Process
Building this video editor taught me something:
Design isn't just about putting components on the screen. Design is about building a system that respects each other.
Each component must know when to appear, when to remain silent, and how to interact with other components. And only when all the parts finally work together does this video editor feel "finished."