First pass at video onboarding

May 24, 2019

tl;dr; I have a feeling you are going to see more video onboarding within apps soon; people don’t like to read. It is pretty easy to get up and running with a video onboarding, but if you don’t want to read and just want to watch you can skip to the end of the post to see my video tour, I have a link.

Intercom recently rolled out a new part for their platform called Product Tours, and within that, you can have video components as one of your steps, it is a great way to give a personal touch to products and quickly share information. I wanted to outline my thinking and execution around my first pass at a video on-boarding in Punchli.st. I shot my on-boarding, edited it, and had it running in my app by the end of the day. It was surprisingly easy to do.

The way I think about most things, including onboarding, is how do I reduce friction to get to the “aha” moment. I’ve talked about this a little in the past with project setup, but even with onboarding, I want to think through the questions a user might be asking themselves, answer them, and get out of the way. Onboarding feels like an art, a little too long, and it frustrates the user, too little and they may never get to the key moment.

Planning

I have been reviewing my onboarding flow and thinking through a few of the different scenarios that lead users to first interact with Punchli.st lately. Onboarding and tracking have been something I have put off for a while, mostly because I was talking to the people using the app directly so it wasn’t critical. As the app becomes further removed from my network I’m starting to think through how and where I want to do onboarding.

General App Flow to get to a Project Page on Punchli.st

There are a ton of places I could start with onboarding but I decided to skip ahead in my flow and think through onboarding starting at a project page, not registrations where you typically start. I did this specifically because this is the spot where I think the most users that have no clue what Punchli.st is will be. There are a few ways you could land on this page. You could have registered for an account and then created a project. You could have done my quick start from usepunchlist.com and skipped the typical registration flow. Lastly, someone can invite you to a project that was already created and they’ll probably have never used or heard the tool before.

What questions might a user have?

So now that I know what page I’m going to start with (Project Page) I took a stab at putting myself in the three user scenarios I mentioned above. Thinking through what these users might be asking themselves. My gut is they will probably start with these questions:

  1. What is this thing? Why was I sent this?
  2. How do I use it?
  3. Can anyone use this?

I stopped at those fundamental questions for now because I want to keep the on-boarding tight and focused for now. If I demo the projected in a webinar I’ll take ten minutes, right now for that user, they aren’t looking for a demo, they are looking to give feedback on a site quickly.

What is my recording setup?

I’m a bootstrapped founder, I need to keep it scrappy and lean. I’m not 100% sure this setup will hold up or if I’ll have to raise the production value with time. With that being said, here is what I have. I’m using my Sony A7ii, a mic, an LED light, and some notes. That is all you need. Honestly, I even considered just using my iPhone, instead of the DSLR, which I think would be good enough as well. Beyond the content getting the lighting and audio right feels like the difference between it looking amateur and worth watching.

Recording and Post Processing

My plan was to only shoot a quick video per question, less than 20 seconds each. Once I got my shot setup and did a couple of tests to make sure the lighting and audio sounded correct I just stood in front of the camera and just did take after take. My goal was to say it enough that it sounded natural and unrehearsed as if I was sitting next to them. If I had to guess it took about 15 to 20 takes a video. After I had the three takes, I brought them into Screenflow (any editing software will do), cut the one take from each I liked best, then ran a couple of audio effects to reduce any echo and background noise.

Product Tours with Intercom

So normally now would be the time where I would need to go find some 3rd party plugin or build a custom on-boarding. Luckily for me, I already have Intercom integrated and using tours took zero effort. If I didn’t have Intercom already it would have just required a few lines of javascript either way.

Product Tours have two main components: Steps and Audience.

Steps can either be a video pointer (like I have below), a text pointer, or a rich post. Also, all of these can be bound to an element in your app, Intercom has a pretty clean interface to highlight the element you want the pointer attached to. You can also select whether that step advanced based on a next button, the user clicking on what the step is attached to, or even them filling in some data.

Audience leverages the robust variables and attributes Intercom already has from your app. You can stay broad and show the tour to any visitor or known user but also combine attributes or custom variables to show personalized tours. If you want to show a tour based on how much of a power user someone is you can.

Putting it all together

I’m pretty excited how it all came together, naturally a few ideas for the next one but for now I’m pumped.