Clipchamp
Clipchamp Hero

All your video needs in one place

How we helped Clipchamp accelerate their growth

Expertise
  • Advisory
  • Digital Product Design
  • Web Design
Platforms
  • Web
Completed
  • July, 2019
Check it outclipchamp.com

Introduction

Clipchamp is a Melbourne-based video technology startup focused on empowering the world's creatives. Their mission is to help everyone create awesome video content that's fun to create and gets your message across in an immersive way.

Anna from Clipchamp reached out to us to help improve various components of their video editing platform. While the first version of Clipchamp was visually appealing with its dark iMovie-like layout, there were a lot of issues surrounding user experience. Below is a summary of some of the improvements we made to the video editing platform over the 18 months that we worked with them.

Anna Ji

Hey Hayden! Would you be interested on working on Clipchamp Create? We need help designing new features and UX improvements on existing components.

Hayden Bleasel

Hey Anna, absolutely! Love your product, it's about time video editing came to the web.

Anna Ji

Amazing! Are you available to start like... immediately? 🙃

Our initial conversation with Anna

Layout

One of the fundamental issues with the video editor itself was the layout. Behavioural data collected by the Clipchamp team found that the UI (while beautiful) simply wasn't understandable by people who have never used a video editing platform before. After much research, we designed three major changes for the editor layout.

Assets Menu

The first major change was redesigning the assets menu. We transitioned the floating menu into a proper sidebar, utilising more of the available vertical space and allowing you to browse more assets at once. We also separated "media" into Video and Audio tabs, each managing their own layout of what you've used, what you've uploaded and what stock assets are available which removed the need for the intrusive stock library and upload media overlays.

Assets Menu

Property Panel

The second major issue was refactoring the property panel. The existing property panel design covered up the library and assets when opened so you could tweak your video with a side by side panel. To support the new layout and allow users to "click-to-switch" (swap out asset styles and effects by clicking a different type in the menu), we transitioned properties to a floating menu that appears when you've selected a clip. Each of the tabs opened a dropdown with specific options, reducing cognitive effort and freeing up more space for the video preview.

Clipchamp Properties

Browsing Assets

The third major issue was introducing a new way of navigating assets. The existing asset library was clean, but was difficult to navigate if you had more than 20 assets. To make it easier for users to find what they're after, we introduced a combination of tabs to switch between stock / uploaded / used assets, search and advanced filtering.

Clipchamp Browse
Clipchamp v2

Clipchamp v2

Optimised Pricing

Now that the core editor was easier to use and scaled better, we needed to assist in pricing plans. When a customer decides to upgrade or export their video, they need to go through the relatively complex process of committing to one of several plan (each with optional upgrade packs) or opting to go through with a micro-transaction based on things like stock footage and resolution they want in their video. This, combined with the new pricing plans that were about to be offered, made for a complicated experience.

Clipchamp Pricing Flows

Clipchamp Pricing Flows

To make pricing easier, we redesigned the pricing plans so the USPs are logically grouped and can be read and compared horizontally. We also rewrote the features as a single line for easy reading, with tooltips for extra context and made micro-transactions a secondary choice by moving it below the pricing plans as a button, rather than it's own pricing plan card.

We also redesigned the checkout screen to show the payment details and itemised bill side by side. A quick look at pricing data showed that 60% of Clipchamp users paid with Paypal, so bringing this up the top and visually separating it from the rest of the form meant that we had a quick, one-click checkout.

Clipchamp Pricing

Clipchamp Pricing

Working with Jellypepper on multiple projects and having such a tight collaboration with them always led to fantastic results. It’s great to work with an agency that doesn’t feel like an agency. We were all one team working on a product together from start to finish.

Sören Balko
Sören BalkoCo-Founder and CTO of Clipchamp

Onboarding

Around 85% of Clipchamp's users are relatively inexperienced in video editing, so being thrown straight into the editor results in what we call the "blank canvas fear" — the feelings of hesitation and despair as a result of being faced with a completely blank slate. On top of this, if you're not a professional designer it can be really difficult to make creative videos that delivers your message and looks good doing it.

Before we started working on onboarding, only 30% of users were finishing videos due to this blank canvas fear. The goal was to push this number up by at least 10% using a step-by-step guided approach to help users activate, as well as introducing templates — off-the-shelf collections of video, audio, text and transitions that make it faster to create a high-quality outcome. It was also a good chance for us to learn a bit more about the type of user we're helping and hopefully tailor their experience.

Clipchamp Onboarding

Clipchamp Onboarding

Cues

Once the user is actually in the editor, we needed a way of guiding them through all the available actions and features. To do this, we designed a series of visual cues, designed to replace the existing AppCues integration. These new, built-in cues allow us to add a deeper level of interaction to our product tours — like showing how to drag and drop media assets into the timeline.

Clipchamp Cues

Clipchamp Cues

Dropbox Integration

With the Clipchamp Extension in Dropbox, you can open and edit your video files in Clipchamp without downloading or uploading your files. Once you’ve imported your videos from Dropbox, Clipchamp makes it super easy to combine, trim, add text, filters, music and more. When you’re done editing, simply export your finished project back to Dropbox.

Clipchamp Dropbox

Microinteractions

Even for advanced users, it's not always easy to remember keyboard shortcuts. Just hold down the command key for a few moments and we'll show you available shortcuts.

Embed

Want to embed your video on a website but don't want the fuss of rendering, downloading, uploading and linking? Just click the code icon and we'll generate you an embeddable preview!

Drag Helpers

Clipchamp track rows can only take one type of media at a time, so we added a visual indicator for available space when you're dragging in new media.

Premium Labels

We introduced stars as a visual language element to signify something Premium. This helps tie together things like high resolution exports, paid stock assets, branding and other features that require an upgraded Clipchamp account.

Cloud Storage

Connect to your Google Drive account and Clipchamp will automatically store the latest version of your video, creating a shareable link so you can send your friends and coworkers a preview!

Autolayout

One of the hardest things to do when creating a professional-looking video on any platform is adding logos, motion titles and superimposed footage to a video. To do away with the hassle of dragging, dropping, resizing and positioning, we designed a magical automatic placement tool (called autolayout) based on various constraints and rules. Combined with Clipchamp's ability to quickly change the aspect ratio of your video, the ability to create responsive videos that work great on any screen has never been easier.

Export and Download

Once a Clipchamp user creates a video they love, they can export and download it. The existing export process was a bit clunky and the lack of description around things like resolution and quality meant it wasn't really accessible by our beginner users.

To improve this experience, we first decided to transition the export process from a one-screen form to a multi-screen flow. The first screen visually illustrates the different resolutions on offer (480p, 720p and 1080p) by showing different sized videos along with a description of where this resolution is most appropriate. If the user selects a resolution that requires a higher plan, we show the pricing plans and upgrade process in the same flow rather than bouncing in and out of modals.

Clipchamp Export

Clipchamp Export

Jellypepper were an invaluable resource and proved to naturally augment our design team while it was growing. We were thrilled with the concepts they produced in getting our product experiments and features to market.

Anna Ji
Anna JiDirector of Product & Growth at Clipchamp

Need help creating your billion-dollar idea?

We’d love to help you out! Tell us a bit about you and your awesome project, then we’ll be in touch.

Start a project