Tal Naveh
Designer.
builderCoverImagePeach.png

Animoto Editing Experience Redesign

Animoto's Marketing Video Builder allows users to easily turn their photos and video clips into share-worthy social videos.

 

Animoto's Marketing Video Builder allows users to easily turn their photos and video clips into share-worthy social videos.

 
 
 

The dreaded "Edit Mode Hell"

Prior to launching Animoto's Marketing Video Builder a lot of improvements were made to the creation experience. However diving into edit mode, a screen state for making detailed changes to one specific block, was still a huge pain point for users.

Controls were undiscoverable, confusing, and users were unsure how to get back to the storyboard view. This potent combo of friction points became lovingly known internally as edit mode hell.

 
The old design had controls that were far removed from the element being edited, and had no labels causing a lot of confusion for users.

The old design had controls that were far removed from the element being edited, and had no labels causing a lot of confusion for users.

 

Creating cohesion

Both quantitative and qualitative data told us that once users entered edit mode they became lost, abandoning their projects. Additionally, the editing controls were not discoverable and ambiguous.

During this time, the company also decided to support the creation of square videos. This new aspect ratio created one large problem. Controls were located underneath the block preview and square videos would only push those controls further down, causing the user to have to scroll.

Armed with these insights, we set out to build off of the improvements made to the storyboard view converging both experiences' functionality and design in order to create a cohesive, non-hellish editing experience.

 

A seamless experience

We wanted users to see edit mode as a zoomed in view of their block, so that's exactly what we did.

 
Giving users the ability to double click on a block to open up edit mode, as well as click on the area outside the canvas close back out helped to reinforce this easy in/easy out model.

Giving users the ability to double click on a block to open up edit mode, as well as click on the area outside the canvas close back out helped to reinforce this easy in/easy out model.

 

Our next task was to tackle editing controls; where to place them and how to make them discoverable and clear to users. We went through many iterations but landed on two leading candidates.

 

Outboard vs. inline controls

 

Our first approach was to mirror the controls from the block drawer in the storyboard view, giving users the same editing controls while revealing even more functionality.

Observing users in the past told us their first instinct was to click on the item they wanted to edit, so the second approach was built off of that model. We would keep the interface as clean and clutter free as possible, only surfacing controls when the user clicked on the element they wanted to edit.

Each design made sure that both the controls and the block preview were always visible to users. Prototypes were created for each, followed by user testing. And the winner is...

 

 
iMacEditMode.png
 

While both prototypes tested well with users, the outboard approach beat out the inline solution for it's transparency and discoverability of controls.