The home page of new Clipchamp site, available at  www.clipchamp.com .


The home page of new Clipchamp site, available at www.clipchamp.com.

   The original Clipchamp site, which you can access  here .


The original Clipchamp site, which you can access here.

  We used Google Forms to survey existing users, to gain an understanding of who their users were and their main reason for using the tool.


We used Google Forms to survey existing users, to gain an understanding of who their users were and their main reason for using the tool.

  Wireframes that were created in Google Slides to collaborate easily with the client, allowing them to provide very specific feedback.


Wireframes that were created in Google Slides to collaborate easily with the client, allowing them to provide very specific feedback.

  The Clipchamp team wanted to use advertising as their main revenue stream, but didn't want it to interrupt the experience. They hadn't found an advertising partner at this stage, but they were considering a similar approach to WeTransfer which is why the left hand side was left free.


The Clipchamp team wanted to use advertising as their main revenue stream, but didn't want it to interrupt the experience. They hadn't found an advertising partner at this stage, but they were considering a similar approach to WeTransfer which is why the left hand side was left free.

  A screen from our original prototype which we used to test with. 


A screen from our original prototype which we used to test with. 

   We moved away from this two sided approach after our first day of testing. Users felt the left hand side was too concentrated, and the impact of the right hand side was lost because no one sticks around to watch paint dry (i.e. users opened another tab while their file finished compressing).


We moved away from this two sided approach after our first day of testing. Users felt the left hand side was too concentrated, and the impact of the right hand side was lost because no one sticks around to watch paint dry (i.e. users opened another tab while their file finished compressing).

  We conducted user testing in the Josephmark studio. I facilitated the testing sessions, while my colleagues recorded feedback in another room where we were streaming the sessions to. Feedback was recorded for each step of the process, and colour coded to match the tester.


We conducted user testing in the Josephmark studio. I facilitated the testing sessions, while my colleagues recorded feedback in another room where we were streaming the sessions to. Feedback was recorded for each step of the process, and colour coded to match the tester.

   Each individual session lasted approximately 45 minutes. After each session, we regrouped to briefly discuss the findings and ensure that everything was captured. At the conclusion of the two days of testing, we summarized the findings into actionable tasks, and made those final changes before handing over for development. 


Each individual session lasted approximately 45 minutes. After each session, we regrouped to briefly discuss the findings and ensure that everything was captured. At the conclusion of the two days of testing, we summarized the findings into actionable tasks, and made those final changes before handing over for development. 

  We wanted to keep the selection process as simple as possible, but still cater to the more technical users. The initial selection of 'I want to make this video best for ..." makes it extremely easy for the less technical users to pick the right settings for their file's end destination, while the  drop down menu's allow those more technical users to   customise file formats and resolution if they need to.


We wanted to keep the selection process as simple as possible, but still cater to the more technical users. The initial selection of 'I want to make this video best for ..." makes it extremely easy for the less technical users to pick the right settings for their file's end destination, while the drop down menu's allow those more technical users to customise file formats and resolution if they need to.

  While it hadn't been planned as a feature, during our conversations with the Clipchamp team they mentioned that they were technically able to begin uploading videos to social networks before the compression or conversion had finished, provided the user was logged into their associated account. We saw great potential in this, as it was something that none of their competitors were offering and it saved the user even more time. We designed this feature in our prototype, and the response during testing was hugely positive. As such, the Clipchamp team worked hard to make sure this feature was ready by the time of the relaunch.


While it hadn't been planned as a feature, during our conversations with the Clipchamp team they mentioned that they were technically able to begin uploading videos to social networks before the compression or conversion had finished, provided the user was logged into their associated account. We saw great potential in this, as it was something that none of their competitors were offering and it saved the user even more time. We designed this feature in our prototype, and the response during testing was hugely positive. As such, the Clipchamp team worked hard to make sure this feature was ready by the time of the relaunch.

   We decided to used a gradient change for the background of the site, as a subtle indication to the user of when something significant was happening with their file. The Clipchamp team were quite passionate about a particular feature they had built called a Highlights Clip, which was made with GoPro users in mind as it scanned their video file and automatically selected key moments from the footage, and cut it into a 1 minute clip that was much easier to share, and to watch. The results of this automated process were hit and miss, and it was the least used feature of the site so we made the suggestion of selecting a 15s highlight clip - ideal for sharing to Instagram, or other social networks. We believe that this had more potential to be a drawcard for users - video bloggers and social media professionals would be able to easily create 'teasers' for their full length videos. This feature is currently still in development.


We decided to used a gradient change for the background of the site, as a subtle indication to the user of when something significant was happening with their file. The Clipchamp team were quite passionate about a particular feature they had built called a Highlights Clip, which was made with GoPro users in mind as it scanned their video file and automatically selected key moments from the footage, and cut it into a 1 minute clip that was much easier to share, and to watch. The results of this automated process were hit and miss, and it was the least used feature of the site so we made the suggestion of selecting a 15s highlight clip - ideal for sharing to Instagram, or other social networks. We believe that this had more potential to be a drawcard for users - video bloggers and social media professionals would be able to easily create 'teasers' for their full length videos. This feature is currently still in development.

Clipchamp

This project was run as a 2 week sprint working alongside the Clipchamp team with two other designers and one developer.  

  • Product audit
  • Research and user testing
  • Product redesign
  • A light brand refresh

View the live site ⟶

The Product

The Clipchamp web app was first launched in 2014 and while the team were proud of their initial release, they continued to receive user feedback asking for a smoother, simpler and more engaging experience. The app lets users convert, compress and record video files.  The app differs from other products as it runs in-browser but processes the videos locally on your computer, taking away the need to wait for a file to upload or software to download. It reduces the input video's file size with no visible quality loss, allowing for faster uploads to social platforms without compromise.

Research

Clipchamp had unintentionally solved a unique problem for a niche market. A large portion of their user base were Chromebook users, as they were one of the only in-browser video recording solutions available online that allowed users to save directly to Google Drive. But other that, they had very little knowledge of who was using their product and why. 

We began by reviewing their competitors and existing user feedback which allowed us to get a general sense for who their main user groups were. This also helped us to identify gaps in the product's functionality. File size prediction and more accurate control over format and compression levels were highly sought after.

A review of heatmaps and the site's analytics showed us that certain features were relatively untouched and user feedback confirmed that they were ultimately clouding the product's value proposition. 

Chrome Store reviews showed there was a lack of knowledge in how the app worked and users had many misconceptions about the product that left them feeling disappointed when it didn't deliver what they expected.

We surveyed their subscriber database of 3200 active users. This revealed to us that Clipchamp users had a variety of needs - it was being used by video bloggers, students, GoPro enthusiasts and professional filmmakers of all ages and from all around the world. Many people were also using Clipchamp for personal use, to reduce the file sizes of their videos for cloud storage.

A surprising find was that there was a larger percentage of less technically savvy users than presumed, giving us the challenge of satisfying the requests of the more advanced while not overwhelming those less experienced with video terminology. 

Usability Testing

I facilitated the testing of our prototype over two days. We recruited six testers from the local area that were close fits to the four personas we created based on data gathered in our survey. Some were familiar with Clipchamp already and some were completely new to it. 

As the testing took place over two days, the time in-between allowed for our team to implement changes based on the feedback from the first day. At the conclusion of the sessions, the testing revealed that:

  • The experience was simple, seamless and easy to follow.

  • The output options were sophisticated enough to satisfy advanced users, but weren't overwhelming to others.

  • The Clipchamp offering was communicated clearly, and users were aware of all features available.

Solution

We designed a lateral experience that takes the user through the process in clear stages. The simplified layout presents one decision at a time and only as they need to be made - not all at once, as was the case of the form-like experience of the old site.

We humanised the language, giving Clipchamp a voice that is helpful and supportive. By changing the way the output options were presented and described, we were able to fulfil the needs of both the advanced and less technically savvy users.

Users can now navigate back to a previous step at any point with their input information saved, rather than having to start over.

A subtle gradient transition was added to indicate progress in a waiting game that is usually quite stagnant.

New features include:

  • File size estimation

  • 15s highlight clip 

  • The ability to begin uploading to YouTube, Vimeo or Facebook while the file is still compressing (something that no competitor has been able to offer)

The new Clipchamp experience is now reflective of the technology that is backing it. More so, by working closely with the Clipchamp team we pushed them to create a more robust and reliable product, and to think more actively about their product roadmap.

I'm pleased to share that Clipchamp recently secured funding following their relaunch, and their entire team will be able to work on the product full time beginning January, 2016.