Animation tool for Picsart’s mobile video editor

Animating objects with In, Out, and Loop presets

Jump to the final result!

Jump to the final result!

A brief history of Animation tools in Picsart

Picsart’s video editors always lacked a conventional preset-type animation tool. The first animation tool we released was the Tracking tool.

The Tracking tool is an animation tool that enables users to create complex and creative animations using their finger movements only. Animate objects with the move of your finger!

However, the tool had a low conversion. Mainly because it is very hard to create perfect animations because of playing background videos and the nature of finger movements. 

With the research results and data in mind, we prioritized a preset-type animation tool for the mobile video editor.

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.

 

ï—‹

Leading end-to-end Design

I led the project through every design phase, from initial problem framing to final quality checks. This involved user research, competitor analysis, ideation, prototyping, and ongoing QA to ensure our solutions were user-centric and business-aligned.



Research Lead

I spearheaded our user research initiatives, employing a mix of qualitative and quantitative methods to gain valuable insights. This data-driven approach informed our design decisions and helped us better understand our users’ needs and behaviors.

 

ï„›

Interactive Prototyping

I developed dynamic prototypes to test design concepts and identify usability issues. These prototypes also simplified the handover to developers by illustrating the feature’s intended behavior.

 



Documentation

I meticulously recorded each step of our design journey, including the rationale behind our decisions and why certain variants were chosen over others. This comprehensive guide served as a blueprint for the team, ensuring alignment and facilitating smooth project execution.

ï“Ž

Co-defining the PRD

Working closely with product managers, I helped shape the Product Requirements Document. Our collaborative approach was crucial, as some product requirements, element relations, and interaction details only emerged during the design process. This made the PRD a living blueprint, aligning with design and business goals.

 



Design QA

As the final gatekeeper, I ensured that the developed features matched the original designs. My QA checks were the last line of defense, confirming that our user experience met both design and functional expectations.

 

The brief

Design an intuitive preset-type animation tool with the option to apply presets to the object’s appearance (In), disappearance (Out), and Loop states.

The problem

🧠 Currently, the users are unable to animate stickers, texts, etc in a quick and easy way.

📽️ More and more social media apps are prioritizing videos over static images and providing an easy-to-use animation tool is necessary for video editors.

⚙️ Almost all competitors offer a similar animation tool and not having it dulls the competitive edge for Picsart’s video editor.

💸 When the users aren’t able to create professional-grade animated videos, it can harm the overall editor conversion.

 

Research and problem validation

  • Statistics show that videos with text on facebook have 15% more shares, 17% better reactions, 26% more call-to action clickthroughs.
  • According to recent statistics 98.5% of Facebook users access the network on their mobile devices where the most videos (85%) are watched without sound.
  • While doing research results have shown that 35% of DIY bloggers on Instagram use animations.
  • Research on Youtube showed that 60% of vlogging videos are made with text, sticker… animations.

The Picsart personas

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

Till Lindemann

🙋‍♀️ 32 years old
👩‍🎓 BS Marketing
👧 Married
🌐 Social media marketer
🇩🇪 Berlin

I only deliver professional content!

 🎯 Goals

  • Create trendy marketing videos and ads, quickly and with ease
  • Producing professional animated videos

😤 Frustrations

  • Not being able to create what I have in mind
  • Wasting a lot of time creating each video
  • Amateur-looking videos

📒 Story

Till is a professional social media manager. He is working with top marketing companies and runs professional marketing campaigns that deliver impact for their clients. Till needs a professional video editor that enables him to create professional videos to be used in marketing campaigns.

Product requirements

  • The “Animation” tool houses two animation tools: A preset-type animation tool consisting of In, Out, and Loop animation presets and a manual “Tracking” tool.
  • In, Out, Loop categories are laid out in the form of tabs
  • Each category has a list of presets
  • Each preset has settings. “In” and “Out” presets have a duration setting (slider) and “Loop” presets have a “Speed” setting (slider).
  • Loop animation should always start from the 00:00 timestamp and continue to the very end of the layer. (Due to technical limitations we decided to contain the Loop animation only in between the In and Out animations)
  • Preset animation should be mixed with the Tracking animation. The logic is defined in the PRD but due to technical limitations it’s not possible to implement the logic at the moment.

Slider variations

Below you can find some of the iterations I did for the preset settings sliders.

 

V1. Double-headed slider: Both In and Out durations are visible on the two ends of the duration slider.

Pros:

  • Displaying In/Out indicators in Loop duration slider for better control
  • Timestamp appears on tap and hides shortly after the release
  • Loop duration slide heads snap to In/Out animation durations for better control

Cons:

  • Impractical speed slider for In/Out animation

  • Timestamp in this version isn’t practical in the case of longer objects in the project

  • Overly complex tool logic

  • Overly complex slider UI

V1. Single slider for each animation category

Pros:

  • Simple loop setting (only speed)
  • Simple In/Out sliders (only duration for the selected category)
  • Avoiding complex slider UI and complex logic
  • Maximum consistency with the live app UI and current patterns
  • Avoiding unnecessary controls/sliders

Cons:

  • Limits the in and out animations to 50% of the object duration in all circumstances
  • There’s no visual correlation of In/out relationships in one view

The winner is: V2. Single slider for each animation category

V2. was the clear winner here as the other variation caused visual and logical complexity and also caused unexpected edge cases at every turn.

Impact on post-launch analysis

The preset Animation Free tool was added in the object settings and included the Manual tracking tool.
Basic Animation tool with its different types of ready-to-use presets allows users to animate their objects (text, sticker, photo) in Video Editor.
Previously we had only Manual tracking paid tool, now we give a new free experience to our users in order to boost the usage of add objects in Video Editor.

Hypothesis

Basic Animation free presets will attract more users to edit with add objects giving more enhanced opportunities.

Goals

Increase the conversion rate of:

  1. Animation tool Open to Apply
  2. Animated objects percentage in video export

    The users are satisfied with the Animation tool results

     

    • 21.43% of users who have added objects in their video edit open animation tool: 3.28% of video editor opened users.
    • 81.35% of users who opened the tool tried it
    • 69.36% of users apply their animation
    • 64.89% of users export the animated objects
    • The gold users are converting better in the funnel.

    Next steps

    • We need more free presets to increase conversion.
    • We need to add more presets.
    • We need to add an easing feature.
    • We need to elevate the technical limitation to mix “Loop” with “In” and “Out” presets.
    • We need to elevate the technical limitation to mix preset animation with the “Tracking” animation.

    The final result

    Enabling one-tap animation presets for Picsart’s mobile video editor (iOS)

     

    With the introduction of the intuitive Animation tool, the users are now able to animate objects with one-tap presets and tweak the animation settings.

    Note: Unfortunately, the most exciting details can’t be disclosed [yet] due to confidentiality.

     

    The exported video result

    Play the video to see it in action!

    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