How to Make Before-and-After Comparison Videos

Some improvements are hard to explain and easy to show. A page that used to take eight seconds to load now takes one. A cluttered dashboard is now readable. A confusing checkout flow lost three steps. Describing these changes in words takes a paragraph — showing them takes six seconds of video.

Before-and-after comparison videos are one of the most persuasive formats you can make with a screen recorder, and they’re also one of the easiest to get wrong. If the two recordings don’t match, viewers spend their attention on the differences you didn’t intend instead of the one you did.

This guide covers how to plan, record, and edit comparison videos in Recorded so the improvement speaks for itself.

When to Use a Comparison Video

• Performance improvements: Load times, build times, render speed, sync duration
• Redesigns: A new layout, navigation, or visual style next to the old one
• Workflow changes: Seven clicks reduced to two
• Bug fixes: The broken behavior, then the fixed behavior
• Before/after of your own work: Design cleanups, refactors, migrations, content rewrites

If your change is invisible on screen — a backend refactor with identical output — a comparison video won’t help. Reach for it when the difference is something a viewer can actually see.

The Golden Rule: Change One Thing

The entire persuasive power of a comparison comes from the fact that everything except the improvement stayed the same. That means both recordings should share:

• The same window size and screen resolution
• The same capture mode and frame rate
• The same starting state (same page, same data, same account)
• The same actions, in the same order, at the same pace
• The same theme — don’t record “before” in light mode and “after” in dark mode

Any mismatch gives viewers a reason to doubt the result. Lock these down before you press record the first time.

Planning Your Comparison

1. Write the exact script of actions. Not narration — clicks. “Open the dashboard, click Reports, select last 30 days, click Export.”
2. Decide what you’re measuring. Time, number of steps, number of errors, or subjective clarity. Say it out loud in the video.
3. Prepare identical test data. A demo account with the same records in both environments removes the “well, that one had less data” objection.
4. Set a fixed window size. Resize once and don’t touch it between takes.
5. Do a dry run of each version. Fumbling on one take and being smooth on the other quietly exaggerates your result.

Recording Both Versions

Record the “before” and “after” as two separate recordings rather than one long take. Separate files are easier to trim, align, and re-record if one goes wrong.

1. Set up your capture in Recorded — pick the same monitor, window, or area for both
2. Choose one frame rate and keep it for both takes
3. Record the “before” version, following your action script exactly
4. Switch environments — the new build, the new design, the staging URL
5. Verify the window is still the same size
6. Record the “after” version with the identical action script

Tip: If you’re comparing load times, start recording a beat before the click that triggers the load and stop a beat after it finishes. Those extra frames make trimming to a fair start point much easier.

Editing the Comparison

Trim to the Same Start Point

Open each recording in the editor and trim both so they begin at the exact same trigger moment — usually the frame where you click. A comparison that starts half a second early on one side reads as slower even when it isn’t.

Label Each Side Clearly

Use text overlays to mark Before and After on screen. Keep them:

• In the same position on both clips
• On screen for the whole segment, not just the first second
• High contrast, so they survive compression and small mobile screens

Adding a running duration or step count as a second overlay makes the improvement measurable rather than just felt.

Use Zoom to Direct Attention

If the difference happens in one corner of the screen — a spinner, a counter, a menu — add a zoom effect at the same moment in both clips. Zooming on one side and not the other breaks the symmetry, so mirror your zoom regions across both recordings.

Be Careful with Speed Changes

Speed ramping is great for tutorials and risky for comparisons. If you speed up either clip, viewers can no longer trust the timing. If you must compress a long wait, apply the exact same speed to both clips and say so on screen.

Choose a Layout

• Sequential: “Before” plays, then “After.” Simple, honest, and works on any aspect ratio — the safest default.
• Side by side: Both clips together, best when the durations are similar and the screens are simple enough to read at half width.
• Cut on the moment: Show both up to the key instant, then cut back and forth. Effective for dramatic performance differences.

For vertical or social formats, stack the two clips top and bottom instead of left and right so each keeps a readable size.

Keeping It Honest

Comparison videos are marketing, but they’re also evidence. A result that gets challenged and doesn’t hold up costs more trust than the video earned.

• Don’t clear the cache on one run and not the other
• Don’t run “before” on a throttled connection
• Don’t quietly skip a step in the “after” version
• Do mention the conditions: which machine, which network, how much data
• Do show a typical case, not your single luckiest run

Exporting and Sharing

• MP4 for anywhere you’d embed or upload a video
• GIF for short comparisons in a README, changelog, or chat message — keep it under a few seconds
• Vertical crop for social platforms, with the stacked layout described above

Give the file a name that survives being downloaded: checkout-flow-before-after-2026-09.mp4 beats comparison-final-v3.mp4.

A Quick Checklist

[ ] Same window size, resolution, frame rate, and theme in both takes
[ ] Same starting state and same test data
[ ] Identical action script, rehearsed for both versions
[ ] Both clips trimmed to the same trigger frame
[ ] Before/After text overlays in matching positions
[ ] Zoom effects mirrored across both clips
[ ] No speed change applied to only one side
[ ] Conditions stated on screen or in the description

Conclusion

A good comparison video doesn’t argue that something got better — it lets viewers see it and decide for themselves. Match the two recordings as closely as you can, change only the thing you’re demonstrating, and label the result clearly. The next time you ship a redesign, a speed fix, or a simpler flow, record both sides before the old version disappears. That’s the shot you can’t go back for.