Manual Tracking animation tool for Picsart mobile video editor

Animate objects with the move of your finger!

A little back story

Well you don’t get to go through all design methodology steps on every single project. This is one of those that was requested directly by our CEO. The goal was to create a simple tool that would enable the users to create creative and complex animations with using just their finger movements.

My initial hypothesis after analyzing the facts and doing some research was that although this would turn out to be a very cool animation tool there would be some frictions with such a feature. For example, controlling the finger movements over a playing background video and achieving the perfect, intended outcome would be very difficult to get right and for a rather limited number of use cases, Albeit given the priority we started the process of working on the feature.

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.

The brief

In the absence of conventional animation tools in our video editor, design a simple animation tool that enables the users to create complex and creative animations using their finger movements only.

The problem/opportunity

🧠 Picsart’s mobile video editor doesn’t have any animation tools.

⚙️ Conventional animation tools don’t offer full creative control.

⚙️ With other means of animation, it’s not possible to trace the objects in correlation with the movements of elements in the video easily.

💡Adding animation to still text, stickers and other objects makes content more engaging.

The 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

After performing the competitor analysis I quickly learned that there are no competitors that offer a similar solutions.
Most animation tools are either preset type tools with In, Out, Loops categories or are keyframe based animation tools.

Based on this information and the fact that Manual Tracking would be the lowest hanging fruit for the editor and the engineering team, the silver lining is that this is a creative solution that doesn’t exist in competitor apps yet.

Product requirements

Not going through the usual design solution processes, I received the following sets of product definition from my CEO and PM:

• The tool will be called “Animation” whilst it is our sole animation tool, afterwards it’ll be called “Tracking” and be nested under a parent Animation tool.
• The tool has two modes, recording mode and repositioning mode:
  • Recording mode: The user can create animations by moving an object around and/or scaling the object’s size up and down with their finger.
  • Repositioning mode: In this mode the user is able to adjust the object’s starting position.
• The tool opens in Repositioning mode by default and the user has to tap on a record button to begin recording the actual animation.*
• There should be a playback speed tool to enable users to slow down (or speed up) the playback for more control and ability to create more accurate animations.
• A Reset button to make it dead easy to start over.
• An isolated timeline view with only the selected layer available in the view.
• Highlight color on the layer for the animated parts.
• Onboarding animations

* After the initial segmented release we did some usability testing and quickly understood that we need to open the tool in the “recording” mode by default

Manual Tracking tool functionality

Repositioning layer’s starting point, then animating and finally reseting the created animation

Learnings

• The first thing we learned right after the segmented launch was that we had to open the tool in “recording” mode by default. Most users didn’t even want to reposition the objects before animating them.
• Because the background video should be played during the tracking process, it is very hard to achieve the perfect result as the playing background is distracting and very hard to match the movement perfectly.
• Tool usage is very low, which could indicate either there are a low number of use cases for the tool or there’s a problem with discoverability or the onboarding process.
• The tool conversion is relatively low which again indicates problems with ease of use and onboarding process.
• The video playback speed feature is never opened. The users might confuse this with the video speed modification tool.

Impact on post-launch analysis

Note: This analysis is done after the implementation of the preset Animation tool and in comparison with it.

The main contributor to the animation tool’s high conversion is basic animation presets.

Observations

Users don’t understand how to manually animate the objects or the result is not satisfying.
Users need simple animation, this need is covered by free presets.

• fewer users need customized animations and basic presets cover the main animation need.
• The absence of the crown sign on the manual tracking tool icon confuses the users and affects the conversion of the tool.
• When opening the manual tracking screen users do not understand what to do, as they click on apply or cancel buttons without moving the object.
• Users don’t like the result of the tracking as it is very drastic.
• Users open the tool thinking it is free (as the crown was missing), then churn by seeing apply paid button.
• The reset button is not visible

Next steps

• Do usability research, discover and validate improvement opportunities.
• Improve onboarding and discoverability
• Prioritize a preset type animation tool for In, Out and loop states in the roadmap as the Tracking tool seems to be risky to invest exclusively on.

Note: The new round of improvements based on the usability testing, research and data analysis are designed and ready for development, but because of the tool’s low performance we can’t prioritize its development for the foreseeable future.

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