Our Process For Creating Interactive Product Tours at Klue

Planning to create interactive demos this year?

Here’s the simple process I’ve been using to create them.

And a free storyboarding template you can use.

Step 1: Build a Storyboard

Similar to the process of storyboarding a video, I start by planning out each step in my tour, including things like:

I’ve included a simple template you can use for this in the comments, inspired by the team at Navattic.

Time: 30-60 mins

Step 2: Validate The Storyboard

Once I have a rough storyboard I’ll run through it with at least one team member that I know has experience demoing our platform.

I typically wouldn’t share it externally at this stage. I save that for when we have a live draft people can click though.

At this step I’m typically looking for feedback on messaging and the overall flow.

Step 3: Add Screen Captures

Once I have a solid plan mapped out, I’ll then grab all of my screen captures. In other words, I’ll walk through our app grabbing screenshots with our interactive demo platform, Navattic.

The great thing with these types of platforms is that I can capture the underlying code of a page, not just a screenshot. I can then edit the html after, allowing me to anonymize data, remove unnecessary elements from the page, etc.

Time: 60 mins

Step 4. Build The Demo

In this step, I’ll build the first draft of my demo. This means setting up the flow in Navattic, adding copy, tooltips, CTAs, transitions, etc.

If you take the time to create your storyboard, this step will be significantly easier.

Time: 30-60 mins

Step 5: Test and Collect Feedback

Once I have my first draft ready, I’ll share it internally to get more eyes on the messaging and overall flow.

This is also a great time to get it in front of customers or people within our target persona that have never seen or touched our product before.

If the intention of your demo is to help new prospects understand you product, you’ll want to make sure it’s easy to understand for someone who has no previous experience with it.

Step 6: Final Updates and Publish

Based on the feedback from Step 5, I’ll make any final changes to my demo before pushing it live. This could simply mean sharing the public link with our sales team, or sending the embed code to our web development team to embed on our website.

Time: 30 mins

So that’s it. An inside look at how we create interactive demos at Klue.

I’ve also included a simple storyboarding template you can use in the comments 👇

And if you’ve launched an interactive demo lately, please share it in the comments! I’ve started a swipe file and would love to include it.

#productmarketing #demo #marketing

Grab the free storyboard template here 👇 https://jasonoakley.notion.site/Interactive-Demo-Storyboard-Template-0061a138ba164de5a31f4149548689f7