How We Use Video to Deliver Great User Experience

How We Use Video to Deliver Great User Experience

Thanks to Wistia, engagement jumped from 68% to 80%

Well designed help pages arm your support team with quick links to perfectly thought out answers. Or even better — if your help pages are content-rich and interesting, users will easily find the answers themselves.

When preparing the documentation for the new ActiveCollab, we wanted to make our Help section fun and engaging — and it all started with Wistia.

Wistia is a video hosting site. You upload a video and get a code you can put anywhere on your site, thus embedding the video. You can customize how you want the video to look like and add/remove controls as it suits your needs. But what makes the service amazing is the graph that shows you how many people watched your video until the end, where they paused, and which parts they skipped. You can later use this data to make better, more engaging videos.

Wistia has one of the most helpful video-making blogs out there: they share their video experiments, insights to what makes videos engaging, the numbers behind it... Their blog inspired us to improve our help videos. We followed every bit of advice: from optimum video length and audience retention, to what microphone and lighting we should use.

The end result were short, funny, and visually appealing tutorials with a human touch:

We tried keeping them about 1 minute long and always followed the same structure:

  1. A quick introduction that outlines the benefit for the user.
  2. Show something funny to create interest.
  3. Move on to the actual tutorial and screen recordings.
  4. Conclude with a punchline/twist.

After we finished the videos, we embedded them at the top of our Help so they’re the first thing a visitor sees. Needless to say, the new videos performed way better than the old ones, with user engagement jumping from 68% to 80%.

But we didn’t stop there. Unlike Youtube, Wistia gives you more control when it comes to customizing embeds. So we decided to replace some of our static screenshots with animated screenshots.

We recorded a process that would require a lot of explaining (like how to organize tasks in ActiveCollab). We’d then replace the traditional static screenshot with an interactive one, like this:

The benefit? Instead of having to write things like “click the column view icon in the upper right corner of the right sidebar” or adding tacky Skitch arrows to screenshots, we just have one self-explanatory video — a simple and elegant solution (BTW, here’s Wistia’s take on the subject).

If a picture is worth a thousand words, then a video is a thousand words times 25 frames/second. Videos keep our help pages short, sweet, and way more enjoyable — all thanks to Wistia.

Keep all the ActiveCollab essentials in your pocket with the new Mobile App!