Make Video Magic with Elements

— making your videos pop with animated graphics

— length & type

1 year
Product Design
Interaction Design
Visual Design
Creative Direction

— role

Lead Product Designer

— team

1 Product Manager, 1 Motion Designer, 1 UX Researcher, 2 Full Stack Engineers, 2 Video Engine Engineers, 1 Product Marketer

— context 

A video is a means to tell a story and/or deliver a message. With Animoto, users are able to craft a video and share it in minutes with their audience. However,  at different touchpoints of their creation process, they found themselves needing to utilize external tools to add the last bells & whistles to complete the video narrative they envisioned. 

— problem to solve

Small business users seek Animoto videos as a new format of communication for internal company announcements, external product marketing, onboarding videos, and more. However, they were struggling to create videos that kept their audience engaged long enough to deliver the message. They had to use a combination of creative tools beyond Animoto to put together the final version resulting in a time-consuming effort. 

Users were looking to unlock new levels of creativity and elevate their video creation all in one place with low effort through animated graphics.

— customer insights

"If you scroll through LinkedIn, TikTok, Instagram, what captures your attention? It's the videos that are polished and high quality. They have some type of design elements to it - a border, a graphic, and that is what catches the audience." 

This was a common sentiment among small business customers. These users found themselves making video content with very information-heavy topics and losing the viewer's attention span very quickly. They wanted their videos to stand out aesthetically and professionally.  

How might we aid users make lively videos that engage their audience and tell a compelling story?

//

As an Animoto user, I want to add elements to my blocks to capture attention and communicate the video narrative I envision.

Elements help you highlight, emphasize and make your video pop.

— concept

Elements are free-standing animated graphics that can be moved freely around the video canvas with a set of customization tools. They serve as a visual communicator to draw attention and engage a viewer in potential action. With the introduction of a 400+ elements library and customization tools, we unlocked a whole new level of creative editing power into Animoto's block-style video editor for customers serving multiple user markets (VSB, SMB, consumers). 

We released the MVP on the first week of August 2023 yielding over 60,000 elements used in more than 4,000 finalized videos within the first 2 weeks post-launch. 

In Detail

//

Demo Video

//

Concept Development

//

— process

In order to unlock a new level of creativity, we had to define what elements were on both the technical and user-facing ends.

We ran a survey with 20 users comprised of VSBs, SMBs and consumers to understand how they defined elements and what types of customizations they expected. Some of the outstanding themes from this survey were: 

• Provide visual variety
• Give customization controls
• Obtain a professional look
• Draw attention
• Jumpstart usage inspiration

With these themes, we crafted a suite of concepts to test with an audience of 5-6 SMBs that focused on:

• Providing users with a navigable library that surfaced relevant elements and enough visual variety 
• Creating an intuitive path to add and edit elements to customize space, visual and timing settings
• Delivering elements that integrate seamlessly to video block timing and transitions
   

— learnings 

The round of concept testing yielded the key insights we needed to refine the experience and ensure we were meeting general user needs and desires. We focused the interviews to further learn about users' expectations on:

• The location: where to find and add an element in Animoto

Users had mixed reactions for the locations presented. They gravitated towards the location that provided the cleanest layout by avoiding the obstruction of the video canvas yet longed for proximity it for ease of use and efficiency in their workflow. 

• The library: how to search for and select an element

Users were looking for categories and organization that provided clarity, relatability and inspiration for use with bright, bold and high-quality graphics. Additionally, users were interested in templates that provided idea inspiration on how to best use elements. (see image)

• The customization: what editing controls to offer

Users easily understood where and how to edit and element. Additionally, the level of controls met users' expectations to match their company brand and draw in attention.

— improvements

While the first release of elements yielded a new era for the block video editor, this was just the first step into a new world.

We provided users with the ability to add elements and to edit the layer position, primary color, and opacity level as well as scale and rotate. The next step consists of introducing:

• Expansion of the library offering and tools for faster navigation and discoverability
• New timing controls for users to customize when elements came in and out of frame for each of their video blocks
• More interactive and editing capabilities such as resizing or customizing accent colors

— Given the nature of this project, further insights and design process can only be revealed in an interview setting.