How we create video demos for new features


  1. Record old state and new state of feature

The Origin

I work as front-end developer for a large ecommerce website. Recently we found a sneaky way of improving the speed of the appearance of banners on the front-page. On 3g connection the effect was pretty dramatic (10+ seconds improvement).

To demonstrate this we created a small sandbox where we had left side of browser have the old banner and right side of browser the new banner. We then set our connection speed to 3g, hit refresh and watched a banner appear on the right and 10 seconds later the same banner appear on the left.

illustration of old state on left hand side and new state on right hand-side in the browser

When we demonstrated this to our Product Owner they were absolutely delighted. It was a profoundly effective way of showing the improvement. But this was quite a specific use case and we thought no more of it and went about our way pleased we’d done such a good job.

The Old Way of Demoing

I had recently started doing more feature demos at our sprint reviews. The format I’d ended up with was

  • first show the current state on the live website

People gave me decent feedback on this format, sometimes people weren’t as excited as I’d like them to be but you know, no-one complained.

The New Way

Our wonderful product owner came to us couple days before sprint review and wondered if we could do something similar to what we’d shown for the performance improvement demo. To show the current state of the big feature vs the new one on the screen at the same time.

I’d played around with building screencasts before so we said we’d figure something out. It took a bit of fiddling but here is the process we took.

Here is the process we follow to demo the new way.

1. Write Outline

Think about what are the parts you want to demonstrate and think of logical order in which to demonstrate them. Write this down in format that is readable by someone who is not you (see next note).

2. The recording

Two people, two laptops, one running old state, one running new state.

Use the same browser with exact same settings (view zoom, screen size etc.)

Open QuickTime

Choose Screen Recording

For mobile draw box around the mobile screen only, for desktop go for full screen

3. The Editing

Share recorded video files so they are on the same machine.

Open iMovie

Import both files

Drag and drop files to timeline

Choose “Split Screen” (mobile) or “Picture in Picture” (desktop)

Drag the small video (old state) to a place of your choosing on screen. I like bottom left.

image of iMovie editing section with Video overlay settings visible

Mobile side by side

sketch of video with old state in box on left and new state in box on right

Desktop picture in picture

sketch of video with new state as big box taking up full video size and old state as smaller box in bottom left

4. The Demonstrating

When talking through features, pause video if you want to go deeper on topic and field any questions. Don’t be talking about one feature and the video be demonstrating another one. Its very confusing and creates cognitive overload.

Focus on what decisions you made and why you made them.

Don’t tell them the button is green. “Never explain what they can obviously see right in front of them. They can all see the logo on the top left. They can all see the search box.” Mike Monteiro

Focus on how this impacts the customer.

Contrast old experience versus new, use mouse to guide people to the part of the screen you’d like them to look at.

Tell the story of a customer.