Clipchamp is a Brisbane-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. In 2021, they were acquired by Microsoft in a push to to empower creators.
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.
Start from scratch
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 a major change for the editor.
Tailored for you
Now that the core editor was easier to use and scaled better, we needed to assist in pricing plans. 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.
Pick a card, any 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.
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.
Before we started working on onboarding, only 30% of users were finishing videos due to “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.
That’s your cue
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.
Drop it like it’s hot
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.
One of the hardest things to do when creating a professional-looking video for multiple platforms is dealing with the different dimensions. 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.
Command + X
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.
Put it there
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.
Safe and sound
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!
Once a user creates a video they love, they can export and download it. To improve this experience, we transitioned the export process to a multi-screen flow. The first screen visually illustrates the different resolutions on offer with different sized videos along with a description of where it’s 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.
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.