Launching a user-friendly video editor that makes it easier to create content

User Research • Rapid Prototyping • Usability Testing • Web App

Storyblocks Maker

A video editing platform that helps content creators of any and all skill levels make pro-quality videos using stock media from the Storyblocks video, audio and images unlimited library.  

Release Dates: Mar-August 2020

MY role

In early 2020,  I transitioned teams and was tasked with rethinking our user flows, creating a new landing page, simplifying the search for stock content and the add/upload logo UX.

I was the lead designer and worked alongside a UX Researcher,
Product Manager, Data Analyst, 3 Engineers, the Director of Product and the Director of Product Design.

My team's GOALS

How might we help users get through the video creation process quickly from start-to-finish?

Our ultimate goal was to get users through the video creation process quickly from start-to-finish. Some of our challenges were to figure out who would use Maker and how they would find value in using Maker. We also collaborated closely with several teams across the organization to define how we might launch to the public and improve the experience.

RESULTS

  • Released an MVP of the web app within 6 months
  • Designed a new marketing landing page for Maker
  • Redesigning the templates page and allowing users to start with ratios increased Maker usage by 64%
  • Simplified the search for stock content and upload your logo and media experience
  • 34% of members who explored Maker started a project during their first visit
  • 36% of members who used Maker downloaded a project within a week of their first visit

To demo Storyblocks Maker, please visit www.storyblocks.com/maker

Brief history of Maker

The problem

Maker had been built by a small team of engineers with the occasional help of a designer.

At the time, Maker didn’t go through any branding, user experience research or user testing process and had not benefited from the participation of a full-time designer. As a result, Maker was not easy to learn or use nor was consistent with the other three products on storyblocks.com. Therefore the company wanted to dedicate more resources to better build out the video editor, and potentially change significant features of the product to create a better user experience.

The timing of the pandemic made the company realize that giving Storyblocks members access to a video editing tool could significantly increase customer satisfaction and business goals.

KICKOFF

Creating alignment and a clear vision for the future

When I was first brought on, the team was convinced that our biggest problems were templates, not having enough features in the editor, marketing strategy... etc.  After doing some groundwork and talking to the rest of the team members I noticed there was miscommunication and misalignment on our end goal.  There was a lot of friction to be resolved with the team first before we could resolve the friction our users were having.

objectives

Improve product-market fit by getting users through the video creation process quickly from start-to-finish

In order to launch Maker to the public, we knew that shipping the product in its current state might lead to a disaster. There were several inconsistent features that needed to be improved within the editor. We also knew that we needed a GTM strategy that would align with the Storyblocks brand.

GTM Landing Page

high level cross-squad strategy

What we wanted to achieve with Maker

  • Create a shallow learning curve and reduce friction
  • Provide stock content all in one place
  • Help users throughout their creation process
  • Encourage Storyblocks members to try, create, and export with Maker
  • New users should quickly grasp the "aha" moment of Maker and immediately know how to get started
  • Create reoccurring value out of Maker

BEGINNING WITH THE BASICS

Gathering and analyzing data

After analyzing video recordings, heat maps on Hotjar, and previous user interviews, we decided to target redesigns
in the areas where we noticed creators were struggling or dropping off.

  1. Creating an account for Storyblocks/Maker
  2. Landing on the templates page and being interrupted by a modal explaining what Maker was
  3. "Start with Template" & "Start From Scratch" CTA's was unclear
  4. Starting with a template gave users a false start
  5. The control center within the editor where users were able to upload logo, upload their own content, search for stock media
  6. The timeline within the editor

Defining current beta users and future users of Maker through research

Who are our users?

  • Emerging creators / small business owners who are starting with content in mind
  • Current Storyblocks members who were more "advanced" users

User pain points from previous user interviews

  • It was difficult for creators to search to find the content they wanted to use in their videos
  • It was difficult for creators to upload their own logo
  • It was unclear for creators to know what actions to take in the search stock modal
  • It was unclear for creators on where to find their content
  • It was difficult for creators to move content around in the timeline

What customers liked about Maker

Early signs were promising and customers liked the following...

  • having the ability to create videos on storyblocks.com without having to leave the site
  • not having to pay an additional cost to use Maker
  • liked being able to select video, audio and images from the Storyblocks library
  • having the ability to upload their own content

COMPETITIVE ANALYSIS

A few thoughts about what competitors were doing

Canva Pro Brand Kit

Has a brand kit allows you to add brand logos, colors and fonts outside of the editor

  • Not obvious how to use all of these brand kit elements within the editor
  • Brand kit feature is hidden in Folders and "Logo" populates in left nav
  • It's a robust tool with a lot to offer

Promo Templates Page

As a first time Promo user, the onboarding experience creates a false contextual experience
where it gives users the illusion that they are going to personalize your experience based
on the questions they ask you before landing on the templates page.

  • Search bar experience creates a false impression that you're searching for exclusive content
  • Search results are a bit repetitive
  • Browse Templates left nav showcases a lot of repetitive templates
  • Filtering capabilities were helpful

HOW WE REDUCed FRICTION

1. Defining the user flows

At the time, Maker was formally known as Creator. It had a homepage that would directly drop
you into the editor with no clear guidance on what to do next or how to use the tool.
I wanted to gain a clear understanding of what was working and what wasn't.

We used Invision's Freehand tool to whiteboard the original flow

2. Getting users in the editor faster

Creating less and encouraging steps allowed us to quickly iterate designs and submit them for usability testing.
We then discovered that starting with a canvas ratio would align with a users current mental model and would
lead them to landing in the editor faster than templates.

(what the user sees)/transitions(what they do) diagram

3. Simplifying the editor

When I first joined the squad, the editor had an outstanding amount of redundancy, poor UX copy,
and poor alignment with the Storyblocks brand. The current state of the timeline also made it
difficult for users to move content around or add new content.

An audit of the editor prior to redesign

Our Approach THROUGH RESEARCH

How we improved the templates homepage

  • Removed friction by giving users a head start on beginning with a ratio size for their videos
  • Reduce number of template categories
  • Improved the My Projects page
  • Added the ability to sort and filter template


How we iterated quickly through rapid prototyping and usability testing

Assumptions we wanted to test

  • Understand if the new logos experience and upload control center will help users create more quickly
  • Understand if the new add/upload controls will remove a barrier to creating in Maker
  • Understand if the new add/upload controls is intuitive to help inform longer term timeline decisions for Maker

to view the prototype click here.

Questions we had

  • Do people understand how to add a logo to a project?
  • Is the experience to add a logo intuitive (from adding the logo to it populating in the timeline)?
  • How do users expect to be able to edit a logo? Is the experience of editing a logo intuitive?
  • How do users react to other changes to the editor and timeline? Do users understand how to add stock content?
  • Do users understand how to toggle between adding different types of stock content?
  • Do users understand how to upload content?
  • Is the experience of adding or uploading content intuitive?

‍‍

The results in growing a product

We reduced bounce rates and increased conversions

Creating hooks in our other products and designing a new marketing landing page enabled users to quickly find value using the video editor.

The redesign of the users flow and focusing on meaningful "shortcuts" created a seamless experience that allowed customers to create videos faster.

What our users had to say...

"Maker is quicker for me to learn than Adobe Premiere Pro"

"I love the fact that I can upload my own footage, audio, my logo and make a 15 second video clip.
It is way faster than if I have to search for it, download it, and upload it to another platform.
If you are making 10 videos a day, those 40 seconds amount to a lot."

"Searching for content all in one place makes it so much easier for me to decide what content I want to use in my video."

There's still so much room for improvement

The video editor experience was launched after I parted ways with the company, so I couldn't relentlessly ensure that every detail was implemented as I had initially proposed.

Shoutout to the Maker team for executing something similar! 

read more about the launch here.

key takeaways

Over communicating is key for working remotely

Communicating comes in all different forms. Whether that is sending someone a quick slack, asking for quick feedback with other designers, or scheduling a weekly meeting with engineers to make sure we were on the right path. It helped us all meet deadlines and launch this project quickly.



Analyze users carefully

Watch what users do vs. what they say. Going off script during user interviews really helped us learn more about our users pain points and needs.

THANKS FOR READING 🎉