noizZze

9Cells: Recording Video Tour

It has become an established practice these days to have a video tour on the application web site. When the concept of the app is new it is supposed to help users to figure it all out a great deal.

In the case of 9Cells, we have very few conversions so far. People don’t even try to click on the “Create Survey” link, and my best guess is that’s because they don’t see the meaning and value in the application.

This is primarily the reason I decided to invest some time and effort in creating a brief end-to-end tour focusing on clarity and the ease of use.

The script

I started with the script that would reflect a workflow of a typical user:

  • Click on the “Create Survey” link
  • Log into Twitter
  • Create the survey
  • Load credits into account
  • Start the survey
  • Monitor the progress

Next I ran through the workflow and imagined what I would be interested in knowing at each step and added necessary comments and explanations to the script.

Video

To record the video I tried several tools. On Mac we have this free QuickTime Player that is capable of recording the video from screen in real-time. It’s absolutely fantastic, but lacks a couple of features I needed for this recording:

  • Limiting the area to a single window dimensions
  • No click indication

Yes, I can crop the area afterwards to limit the view, but my quick tests showed the results are usually crappy, unless I go nuts with hardcore semi-console tools.

After snuffing around, I found a very nice and simple tool — Screenflick — an all-in-one recording solution that sits in the status bar and does just that — records, records, records. It’s packed with all essential features (click indication, keypress popups etc) and very reasonably priced.

Lessons learned during the recording:

  • Don’t move mouse cursor around unless it’s necessary. If you need to insert a few scenes later or need to stretch one for a bit longer to fit in all explanations, you will end up with jerky mouse cursor movements.
  • Don’t rush. Take your time on each screen. You will be able to remove unnecessary frames later. It’s way harder to add them.
  • Don’t scroll the screen unless necessary. Again, it makes harder to cut frames and insert new ones. If you need it, do it. If the hands are just itching, sit on them.

For the video mastering I chose iMovie app bundled with every Mac. It does the job relatively good and it’s free.

Audio

I’m not a native speaker and currently live outside English speaking countries, so that’s not an option for me to either narrate myself or find someone to do that for me. At least, it’s not THAT easy. That’s why I decided to use the “Alex” voice that comes with every Mac running Leopard. Saying whatever I need is as easy as running “say” command in Terminal. And what’s great about it is that I can run it hundreds of times to get it right — it won’t grow tired or pissed.

After all phrases were recorded to files, I started aligning them with video in iMovie. As expected, sometimes there were too much video, and sometimes I had to stretch it to let the narrator finish the phrase. All in all, it went surprisingly well, and I even enjoyed the process.

Embedding

With mastered video in hands I needed to put it on the front page of 9Cells. As usual, there are millions of options as to where and how to display the video. At first, I chose to put it instead of the gallery, and so had to reduce the size of the picture from 640x480 to even smaller 480x360. The result was barely viewable, and thus I made a step back and decided to use one of the lightbox popup plugins. I chose Fancybox. Why? It’s easy to configure, does what’s necessary and has callbacks. I’m sure there is at least a dozen of them falling under this description, but this one didn’t give me a single chance to regret it.

To play the video there’s one almost defacto tool — Flowplayer. It’s on Flash (yeah, I know about iDevices), but it works for the huge range of video formats, has hundreds of plugins, easy to script and incredibly flexible.

Finally, I took 10 minutes to create a “Video tour” badge in Photoshop.

Conclusion

The results of this effort are currently on 9Cells. Let me know what you think. Any feedback is warmly welcome.