Clipchamp

All your video needs in one place

    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.

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

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

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

    Start from scratch

    Editor redesign

    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

    Pricing table

    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

    Checkout

    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.

    Sören Balko

    Co-Founder and CTO of Clipchamp

    Welcome Aboard

    Onboarding

    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

    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.

    Drop it like it’s hot

    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.

    Automagical

    Smart resizing

    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

    Shortcuts

    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

    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.

    The good stuff

    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.

    Safe and sound

    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!

    Finishing up

    Export

    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.

    Anna Ji

    Head of Product at Clipchamp