journal

First pass at video onboarding

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 punchli.st 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. If you are curious what the tour looks like you can actually watch it here and give me feedback about this post at the same time! 🙂


Monthly Newsletter

☝️I try to write posts like this on a weekly basis if you are interested subscribe below.

Other Posts
New Feature Update
September 27, 2019

🎯 Direct Linking to Items You can now link directly to an issue regardless of what page the item is on. We load the correct page of your project site as well as scroll down to the annotation. These links are public; you can reference the specific item with your team or client. 🗃️ List-Only...

New Feature Update
July 24, 2019

Screenshots and Pages One of the more significant UX issues we have seen over the last few months is that it was hard to know which pages had feedback already. It took a little hunting, and we didn’t do a good job of showing how to get to the page listing. Now we have brought...

Read-Only Mode
July 10, 2019

Excited about this little feature since it came directly through customer feedback. Design Extensions in St. Augustine has been using Punchli.st to help get their client and team feedback. One thing they kept running into was feedback coming into late, so they wanted to be able to lock in all the feedback. We built a...

Marking Items Done & Topics
June 16, 2019

When you are trying to get a project done getting your stakeholders to focus is key. The design has been approved and the last thing you want is to introduce the ability to change something that is baked. One of the key aspects of any review is to focus in on what you actually want...

Where am I heading?
April 2, 2019

For the last 20 years, I have been talking to clients about getting their projects launched. Starting in 1999, my neighbor asked me if I knew how to build a website. I didn’t, but within a few days, I had something running on Homestead (I think that is what it was called, o.g. Webflow 🙂...

My frictionless getting started
March 29, 2019

Until recently I had a pretty standard flow within my app. You sign up, create a project, share it out, and wait for feedback. I’ve talked previously about sticking to the critical path. I took a step back and consider how could I get a user to start collaborating on a project as quickly as...

Critical Path
March 15, 2019

Often times we can get caught up with the hundreds of other things we think we need in our products but you forget to take that step back and ask if my core product flow is working. ...

No one wants to add a line of code
February 12, 2019

I am learning the hard way that demos and on-boarding are two separate beasts. Sometimes it's hard not to confuse success in one for success in the other....

Why Solo?
January 26, 2019

Previously I wrote about what I knew I needed to learn in order to build a product. Occasionally I’ll get asked if I had so much to learn why was important to me to build Punchli.st alone. I’m sure there is some deeper psychological reasoning but the easiest way to explain it is I don’t...

How and what did you need to learn?
January 16, 2019

tl;dr Everything. One of the thing that surprises people when I talk to them about building Punchli.st is the fact that I had never written software before. I’ve always had a technical slant to my work, but I always leaned toward design and strategy. So one of my fundamental goals with Punchli.st was to learn...

What's Punchli.st
December 12, 2018

I built Punchli.st because keeping track of what is still not done and what issues everyone is running into is hard especially when you are racing to launch....

Where to start
December 7, 2018

I've been meaning to start this blog about my experiences building Punchlist, but it requires writing and putting myself out there, so I decided that was not fun and put it off... till now....

Punchli.st gathers all of your design & content feedback — in one place

Try Punchli.st for Free