How to make a product demo video for a SaaS app, step by step

Recording the screen is the easy part of a product demo video. What decides whether it works is everything around the recording: which job the video does, which two or three flows it shows, how many words the narration can hold, and what happens to it after your next release. This guide walks through those decisions in the order you will meet them, for a SaaS web app.

1. Decide which job the video does

“Product demo video” covers several videos with different audiences. Pick one before writing anything, because the length, the opening and the ending all follow from it.

Most SaaS teams need the first two and make the mistake of using one video for both. A 90-second overview on a feature page buries the feature; a 40-second feature clip on the homepage assumes context the visitor does not have. The rest of this guide focuses on those two.

2. Choose the flows worth filming

An overview is not a tour of the navigation. Show the two or three moments where the product produces a result someone would pay for: the report that appears, the invoice that goes out, the bug that gets assigned. A useful test is to ask what a new customer did in their first session that made them stay, and film that.

Write each flow as a short sentence of intent rather than a list of clicks: “filter the unpaid invoices and send the reminders”, not “click Invoices, click Filter, select Unpaid”. Labels and menus change between releases; the intent usually survives them, and it keeps the narration focused on what the screen means.

3. Write the script to a word budget

Narration runs at about 2.5 words per second, so a 90-second overview holds roughly 225 words and a 40-second feature video about 100. Split the overview into four to six scenes of 8 to 25 seconds, each showing one move, and the feature video into two or three. Our product demo video script template fills in that structure scene by scene, with the budget for each line.

Write the script before you record, and treat the word count as a hard limit. When the voice-over runs longer than the footage, someone ends up slowing down the screen or speeding up the narrator, and viewers feel it even when they cannot name it.

4. Prepare the product for the camera

Most demo videos that look amateur were recorded in a real account. Set up a dedicated demo workspace before you film:

• Realistic sample data. Enough records for lists and charts to look used, with plausible names and amounts. Never film real customer data: a blurred name in a video is still a disclosure if the blur fails on one frame.
• A fixed window size. Record at 1920 by 1080, or a 16:9 size that scales to it, and keep it identical for every take so scenes cut together cleanly.
• A clean browser. A separate profile with no extensions, bookmarks bar or notifications, logged in to the demo account only.
• Stable state. Reset the demo data before each take, and switch off banners, trials and cookie prompts that will not be there for a real user.

5. Capture the footage

There are two ways to get the product on screen, and the choice matters more for the next release than for this one.

Record it yourself. A screen recorder such as Loom, Screen Studio, OBS or the recorder built into an avatar tool captures what you do with the mouse. It is quick for one video, and a good recorder smooths the cursor and adds zooms. The take depends on a person repeating the same moves at the same pace, though, and every change to the interface means recording that scene again. Our Loom alternatives guide compares the recorders by the job they do.

Script the browser. The same scenes can be played by a headless browser driven by code, the way end-to-end tests drive an app. The moves are identical on every run, so re-filming after a release is a command rather than an afternoon. It takes more setup, and someone has to keep the scenes working when the interface changes. This is the approach Redemo is built on.

Whichever you choose, film each scene as its own clip. Short clips are easier to redo than one continuous take, and they map one to one onto the scenes in your script.

6. Add a voice

You have three options: your own voice, an AI voice, or an AI presenter who appears on screen and speaks the script. A founder’s voice carries credibility on a sales follow-up. For a homepage video that you expect to update often, a synthetic voice has one practical advantage: changing a sentence does not mean booking another recording session.

Whatever the voice, narrate what the screen means, not what the cursor is doing. “Overdue invoices rise to the top” is useful; “now I click on the filter” is not. Add subtitles too. Browsers only autoplay video without sound unless the visitor has interacted with the site, so a homepage video that starts on its own starts muted, and the subtitles carry the message until someone turns the sound on.

7. Edit for pace

Cut every second where nothing happens: page loads, typing, the cursor travelling to a button. Zoom in on the area where the action is, and hold the result on screen for a beat before moving on. Keep transitions plain; the product is the interesting part. Export a 1080p MP4, which plays everywhere, and choose a poster frame that shows the product mid-task rather than a title card.

8. Publish it where it will be watched

• Homepage: near the top, with a poster frame and either muted autoplay with subtitles or a clear play button.
• Feature pages: the 30 to 45-second video for that feature, next to the text that describes it.
• Sales emails: email clients do not play video, so link a thumbnail to the video page.
• Help centre: task videos next to the written steps, which stay searchable.

On your own pages, add VideoObject structured data with a name, description, thumbnail and upload date, so that search engines can show the video in their results.

9. Plan for the next release

A demo video starts to go stale the first time a screen in it changes: a renamed button, a new layout, a step that no longer exists. Nobody notices for a while, which is the problem. The visitor who signs up after watching it does notice.

Treat the video like documentation. Keep the script in the same place as the rest of the product copy, list the screens each scene depends on, and check the video against the product after each release that touches those screens. When one does, re-film only the affected scenes.

Mistakes to avoid

• Opening on a logo or a title card instead of the product.
• Showing the settings page because it was easy to film.
• Narration that reads the interface aloud.
• Recording in a real account, with real names.
• One video used for every job, from homepage to help centre.
• No owner for updating it after release.

Where Redemo fits

Redemo automates steps 5 to 7 and most of step 9. You give it the address of your app, a script and, if needed, a demo account. A browser films each scene in your live product, an AI presenter narrates over the footage, and the edit is assembled for you. You can enable automatic updates per video: when we detect a release and the approved path still works, the same script is filmed and published again within your monthly allowance, and an earlier version can be restored in one click. Standard presenters speak English only. Choosing the job, the flows and the words is still yours.