Show the before and after
Show the starting artifact, the changed artifact and the single action that did the work.
Page flow
5 sections in the order the visitor meets them. Taller bars mark the sections that need more space.
- OrientProblem state
- DemonstrateTransformation
- DemonstrateAfter state
- ProveWhat changed
- ConvertRun it on your input
How the page leads to action
- 1
Show the before state as something recognizably bad but real.
- 2
Show the transformation as one action, not as a pipeline diagram.
- 3
Show the after state in the same frame and format as the before.
- 4
Explain what changed and why it is better, in the domain's own terms.
- 5
Invite the visitor to run it on their own input immediately.
What each section needs to do
- OrientProblem state
- The before artifact, real enough to be uncomfortable — a genuine draft, error or mess.
- DemonstrateTransformation
- The one action that changes it, shown as an interaction rather than described.
- DemonstrateAfter state
- The result in the identical frame, format and zoom as the before, so the comparison is honest.
- ProveWhat changed
- Two or three specific differences named in domain language, plus what was deliberately left alone.
- ConvertRun it on your input
- An input surface accepting the visitor's own material, with the same before/after treatment.
Is this the right page flow?
Who it is for
Visitors who will believe a visible improvement instantly and doubt an adjective about quality forever.
Products it suits
Products with a visible transformation: text, code, design, data, media, an operational state.
Not for
Products whose improvement is statistical or long-run, where a staged pair would be a lie.
How the page proves its case
Which proof appears first, and what follows it.
- Primary: the visible delta between two real artifacts.
- Secondary: the named changes, which show judgment rather than random editing.
- Tertiary: the visitor's own input, which converts a demo into a personal result.
Call to action plan
What the page asks for, what it offers instead, and where.
- Primary
- Try it on your own file or text
- Secondary
- See more before-and-after pairs
- Placement
- Directly under the after state, while the improvement is still on screen.
Responsive behavior
What the sequence has to do when the viewport stops cooperating.
- The pair switches from side-by-side to stacked with before first, plus a toggle to flip between them in place.
- Diff highlighting stays legible at small sizes; never rely on colour alone to mark a change.
- Long artifacts crop to the changed region rather than scaling the whole document.
Anti-patterns
The failure modes that make this sequence stop working.
- A straw-man before state that nobody would ever have written.
- Different framing, crop or zoom between before and after, which reads as a trick.
- Claiming an improvement the visitor cannot see in the pair shown.
- Hiding what the product left unchanged, which is where trust is actually won.
Build spec
ProWhat an agent needs in order to build Show the before and after: what each section must contain, the copy rule that keeps it honest, the slots to resolve from your product, and the order to build in.
Agent tags
The vocabulary an agent matches this recipe on.
- before-after
- visible-delta
- single-action
- diff-callout
- own-input-cta