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:
- The screen I plan to capture
- How I want your message to appear (ie. pop-up modal, tooltip, etc.)
- Elements I want highlighted on the screen
- The copy I plan to use
- My call to action
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
Comments:
Grab the free storyboard template here 👇 https://jasonoakley.notion.site/Interactive-Demo-Storyboard-Template-0061a138ba164de5a31f4149548689f7