13 common sense tips for better live demos

Posted on 30 November 2023 in Web

We’ve all been in playbacks when someone clearly hasn’t prepared their demonstration. They’ve tried to wing it and it’s painfully obvious, taking twice as long as it needs to.

Live demos can be nerve-wracking, and it’s tempting to pre-record a video of the feature, sit back and hit play. But I believe there is great power in a great live demo. A pre-recorded screencast of a Figma walkthrough is a melting Madame Tussauds model when sat next to a live demo in a browser. The authenticity is palpable, and perhaps that slight element of risk adds to the experience.

Live demos needn’t be as scary as they seem. Here are a few tips I’ve picked up over the years:

Know your audience

Tailor the demo to your audience. A room of executives might want to see a different slice of the product to your engineering colleagues. Don’t discount showing the details of the work you do to the higher-ups in the company, but try to make the content as compelling for them as possible.

Plan the narrative

Those less intensively involved in the project may need more context than your colleagues who are actively working alongside you, so plan the journey you want to take your audience on. Leaping straight into a detailed section of the product might be confusing, so consider starting on the home page and working through as if you were a customer.

Set up your tabs

Once you’ve got your narrative planned, it’s time to set up your tabs. Open a brand new browser window, ideally in incognito mode. Open a tab for each distinct section of the journey. If the journey is entirely linear, you might be okay with a single tab, but if it spans multiple products, or you’re showing multiple features, you don’t want to be typing in the URL bar live, so set those tabs up.

Build in fallbacks

If there’s a risky section of the demo, prepare a fallback. Mock some data, prepare staging links, have Figma designs in your back pocket, heck even record a video if it’s really risky; whatever it will take to keep the demo going and keep the audience engaged. These ‘jumping off points’ are safety nets you can effortlessly turn to when things break.

For example, if you’re expecting an email to be delivered in the demo, make sure you’ve got a tab open with that same email template. When the email inevitably gets stuck in the ether, you can, cool as a cucumber, switch to the tab and carry on as if nothing happened.

A little smoke and mirrors goes a long way

Don’t be afraid of a bit of mock data, or faked interactions. We’re leading our audience on a journey and if we have to blend reality and fantasy a little to keep the story compelling, so be it. But don’t be disingenuous. If you’ve mocked an entire feature that’s not going to be ready in weeks, don’t try and pass it off as production ready, it’ll only come back to bite you. You can always preface your demo with a disclaimer that “some of the elements you see are mocked”.

Remote presentation tip - post-it note the key beats

Think about what key points you need to hit in the demo and write them on post-it notes. Stick them to the bottom of your monitor and use these as your guide. In the heat of the moment, it’s easy to skip over something important, or panic and lose your place. Keep the guide brief - bullet points at most, and ideally just a couple of words per point. You want to be able to glance at this note, not recite it.

Run the demo

Go through the whole demo exactly as you will do in the moment. Follow the post-its. Work through the tabs. Be intentional about how you’re moving around the page and scrolling. Ask yourself “How can I best navigate through this so an uninformed stakeholder can take it in”. You might well spot something you missed when coding the feature.

You don’t have to narrate each section but you might find it useful practise. Again, as you describe how you navigate, you’ll notice the awkward edge-cases in the UI that need tweaking.

Reset the machine

After each demo, work out how you reset back to the initial state. If you’re showcasing a login flow, make sure you’re logged out on each tab. Make sure there are no surprises on the night.

Clear your inbox

If you’re sharing your inbox, make sure it’s clear ahead of the demo. You don’t want the “Job offer from Meta” email distracting your audience. Snoozing or folders are your friends here.

Mute slack notifications

Or better still quit Slack.

Yeah, just quit Slack. And Spotify. And anything else that might take up computing resources.

Sharing your whole screen is dangerous. Your desktop isn’t as clean as you think, and you’re bound to get a notification appear from nowhere. Sharing a tab is obnoxious (if the demo spans multiple tabs). If you have to unshare, and reshare to switch tabs, you’re going to lose the room.