- Record old state and new state of feature
- Edit videos to be side by side (mobile) or picture in picture (desktop)
- Talk over video from customer’s perspective and explain the why to stakeholders
- Fun and Profit
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.
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
- then show the new state currently available in whichever test environment.
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.)
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.
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.
Mobile side by side
Desktop picture in picture
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.