Layers Component for Picsart mobile video editor

Enabling multi-track timeline video editing experience and more!

A little back story

Imagine a world where creativity is boundless, but the tools to express it are limited. This was the paradox faced by Picsart’s mobile video editor. A platform teeming with potential, yet held back by a missing piece: the absence of a multi-track timeline.

This is the tale of how that missing piece was discovered and implemented, forever changing the way users interact with Picsart’s video editor.

Defining the problem

In the beginning, Picsart’s mobile video editor was a simple tool, a mere sketchpad in a world craving for an art studio. Initially, it had no timeline feature at all, making it a challenging landscape for creators. Then came a pivotal moment: the introduction of a basic, single-track timeline. It was like the first drop of rain in a drought—refreshing but not enough to quench the thirst for creativity.

 The evolution of the Picsart video editor & its timeline before Layers Component

The single-track timeline had its limitations:

Limited Interaction: Users were confined to a one-dimensional space where they couldn’t see, interact with, or manipulate multiple layers and objects in a project. It was like trying to conduct an orchestra with a single instrument.

Limited Creative Freedom: The single-track timeline restricted users from adding objects like text or stickers at specific times, manipulating their duration, or rearranging them. The creative symphony that users envisioned was reduced to a monotonous tune.

Feature Constraints: The timeline was not just a user experience issue; it was a bottleneck for innovation. Many features on the backlog, especially those involving non-visual layers like audio and effects, were held back by the limitations of the single-track timeline.

Losing Competitive Edge: To add insult to injury, Picsart was falling behind in the race. Competitors had already embraced multi-track timelines, leaving Picsart in the dust and jeopardizing its standing in the prosumer market.

The single-track was a stepping stone, but the path to a full creative suite was still a long one. It was clear that a revolution was needed to elevate Picsart’s mobile video editor from a basic tool to a comprehensive creative platform.

My Roles

In this transformative journey to elevate Picsart’s mobile video editor, I wore multiple hats, each contributing to a different facet of the project.

In all these roles, my focus was on contributing to a user-centric design that would meet both user needs and business objectives, while maintaining active collaboration with all stakeholders to ensure consistency, sustainability, and that everyone was on the same page.

User research led to our initial hypotheses

Performing a series of research, and testing Picsart’s and other video editing apps with our target users in several pre-defined prosumer use cases resulted in multiple hypotheses backed by actual user data.

Introducing the layers component will:

• Attract a wide range of different users, with different user scenarios and goals by providing them with a comprehensive easy-to-use video editor.
• Make proper use of the time component in editing videos.
• Enable users to see and interact with visual and non-visual layers, change their duration, move them in the time dimension, and rearrange their vertical hierarchy.
• Create a much better, ever-accessible trimming experience for both base track and non-base track layers.
• Enable Picsart to enter the competition for becoming the #1 video editing app.
• Make timeline always visible on all screens (minus some edge cases)

The Picsart personas

Note: Picsart’s actual resources for this data can’t be disclosed. The personas below are the closest sharable thing.

Feature-set and some product requirements

Competitor research

The timeline component is a well-defined concept in the mobile video editing industry. After performing comprehensive competitor research, we understood that each video editing app has its unique approach to this seemingly no-brainer problem definition/solution.

The need to define key features and product requirements

These decisions had to be based on our unique product experience, tech requirements, and legacy user experience across the entire app.
Furthermore, the solution had to be one that could easily be expanded and built upon without the need for redoing the whole thing from the ground up in the future.

Continue reading to learn about some of the Fundamental decisions we had to make:

To group layer types or not to group, that is the question!

As one of our first fundamental decisions, we had to define whether to group similar object types in groups or not.

The ultimate goal behind groupings was to result in a cleaner and more minimal timeline view that didn’t require too much scrolling from the users.

V1. No grouping. Layers are always visible

Pros:

• Avoid an extra layer of navigation to access different layer groups.
• Always having all layers visible at all times and comprehending all layer relations.
• Being the intuitive, simple, straightforward version.
• Simple and straightforward UX.

Cons:

• Potentially longer vertical scroll in case of too many overlapping layers.
• Having a more complex UI view on the main editor screen.

V2. No initial grouping. Other layer types disappear when a layer is selected.

Pros:

• Reducing vertical scroll in cases where there are audio layers in the project. (in add object screens only and to different degrees depending on the screen).

Cons:

• Adding an extra layer of navigation.
• Causing extra visual transitions by constantly hiding/unhiding layers and triggering scrolls.
• Only showing all existing layers in the main editor screen and edit clip.
• Minimal reduction of vertical scroll if selecting a visual layer type since they’re all grouped together.
• Not having an understanding of all layers’ relations at all times.
• Not being able to easily sync audio beats to visual layers.

V3. Each layer type is grouped and is editable separately

Pros:

• Reducing vertical scroll (to different degrees depending on the screen).

Cons:

• Adding an extra layer of navigation.
• Never showing all existing layers in the same place.
• Minimal reduction of vertical scroll if selecting a visual layer type since they’re all grouped together.
• Not having an understanding of all layers’ relations at all times. 
• Not being able to easily sync audio beats to visual layers.

The winner is: V1. No grouping. Layers are always visible

V1. was the clear winner here as the other variations created several navigation layers for doing core editor actions and in some cases would make us resort to define numerous edge cases and unpredictable situations.

The cons in V1. were much more minimal and therefore, we decided to go with this solution and later measure whether the cons would cause actual churn and friction.
*Spoiler alert, they didn’t!

Inward or outward layer handles

Another decision to make was to decide whether the handles should be inside or outside the layer.

The outward handle made the UI too chunky and oldish and the utility menu buttons were obviously a no-go idea since they had to be too small and also weighed heavily on the cognitive load.

Therefore, the winner for now is the inward handles.

Some details from the design process

You can check out some different components and design features that was done during this project.

Selected/Deselected states of the layers

Audio layer title horizontal scrolling

Layer behaviors

Adding new layer when there isn’t enough space on an existing track

Learnings

• The inward handles look slick, but cover a portion of video thumbnails and also make it difficult to see the edges of the layer when trimming.
• Layer snapping with haptic feedback is a necessary improvement feature to add.
• Initially, the duplicated layer would add right after the original layer which doesn’t serve most use cases and sometimes the duplicated layer exceeds project duration.
• At the moment, most users only add 1-2 add object layers to their projects.

Next steps

• Make improvements in layer handles, duplicate layer placement logic, etc according to the learnings and user feedback.
• Release improvements with layer snapping and drag & drop.
• Plan on providing premium and free video templates to help users create professional looking videos in no time. This will solve a big user need and also promote video editor and the use of multiple add objects in projects. 

Download the Picsart’s iOS app to check these and more for yourself!

I can’t share everything here, so please download the iOS app and check for yourself