How We Use Video to Deliver Great User Experience

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

· · design

Post image video

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 Active Collab, 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 till 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. 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%.

video engagement graph

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 Active Collab). 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.

Recommend this Article
Related Articles
comments powered by Disqus
We are

Powerful, yet simple project management

Active Collab helps your team stay organized when you outgrow email. But it’s so much more than that — with plenty of neat add-ons, it’s a one-stop solution for all your business needs.

Find out more