How to make a before-and-after website redesign video
Compare the same task or page before and after the redesign, then explain why the change helps a visitor. A reveal is easier to understand when it shows a meaningful difference rather than simply scrolling through a prettier site.
Choose a small set of changes. A homepage, product detail and booking flow may be enough to tell the story. If there is no functional comparison, describe the piece as a visual reveal rather than suggesting measured usability gains.
Capture matched views
Use the same viewport and comparable content for each before-and-after pair. Avoid showing the old page at an awkward size while giving the new one ideal conditions. Preserve enough context for someone to recognize what changed.
Keep the original capture or screenshot with the project. Do not fabricate an old design to make the redesign look more impressive. Obtain the client's approval before making previous branding or private staging material public.
Structure the reveal around useful changes
| Part | What to show | What to explain |
|---|---|---|
| Context | The brand and site | Why a new site exists |
| First comparison | Matched homepage views | A clearer message or hierarchy |
| Second comparison | One important task | A verified functional improvement |
| Detail | A carefully chosen interaction | What makes the new experience distinctive |
| Closing | The live destination | Where visitors can explore it |
Label creative judgments as judgments. Cleaner spacing does not prove higher conversion. If the client has measured performance results, include the measurement period and method alongside the claim.
Choose transitions that reveal information
A wipe or a direct cut can make a comparison clear. A transition that obscures both versions may look impressive while hiding the difference. Keep enough time for viewers unfamiliar with the project to understand the page.
Show mobile views when the mobile experience is part of the story. Do not squeeze an entire desktop page into a phone frame and call it a responsive demonstration.
Embed the result thoughtfully
If the video appears in a case study, use a suitable file and playback experience. web.dev notes: “Animated GIFs can be downright huge.” Its guide explains a video-based alternative for animated content. web.dev performance guidance.
Check the platform's supported embedding route. Webflow documents third-party video elements and other options, including background video. Webflow video guidance. A decorative muted loop and an explanatory video with audio have different needs.
Where a website-to-video service fits
Teasr is a straightforward choice for announcing the new site: use its public URL to make a branded motion promo without rebuilding the design in an editor. It does not automatically reconstruct the site's history or supply a verified before-and-after comparison. Prepare those original captures separately if the comparison is central to the brief.
See including launch videos in agency packages and on-brand product videos for briefing and approval.