Template · Pricing-page demo
Pricing-page demo template.
A template for the short lane beside your plan cards — the differentiating feature of the tier, shown doing its job in five stops, ending on the plan's sign-up. What buyers ask on pricing pages, answered with screens.
Use when: Beside the plan cards on the pricing page — one lane per differentiating feature or per plan.
The one line
What this demo proves
A buyer comparing plans sees what the paid tier actually does before choosing, and the last click lands on the plan.
Stop by stop
5 stops
| # | Screen | Action (hotspot) | Tooltip |
|---|---|---|---|
| 01 | The screen where the tier's headline feature lives | Click the feature's entry point | This is what [plan] buys: [feature], right here. |
| 02 | The feature mid-task, real data visible | Click the primary control | [One sentence: the job it does, in the buyer's words.] |
| 03 | The result the feature produces | Click the result | [The outcome — the number, the view, the saved hour.] |
| 04 | The limit it removes (what the free tier hits) | Click through | On [free/lower plan] this stops here; [plan] keeps going. |
| 05 | The plan card or sign-up screen | Click 'Start with [plan]' | That's [plan]. Start free and upgrade when you hit the wall for real. |
Copy
The lines that do the work
- Lede beside the embed
- Two minutes in the product answers the plan question faster than the feature table below.
- CTA (last stop)
- Start with [plan] →
Take it with you
The template as text
PRICING-PAGE DEMO — TEMPLATE
Outcome: A buyer comparing plans sees what the paid tier actually does before choosing, and the last click lands on the plan.
Use when: Beside the plan cards on the pricing page — one lane per differentiating feature or per plan.
01. Screen: The screen where the tier's headline feature lives
Action: Click the feature's entry point
Tooltip: This is what [plan] buys: [feature], right here.
02. Screen: The feature mid-task, real data visible
Action: Click the primary control
Tooltip: [One sentence: the job it does, in the buyer's words.]
03. Screen: The result the feature produces
Action: Click the result
Tooltip: [The outcome — the number, the view, the saved hour.]
04. Screen: The limit it removes (what the free tier hits)
Action: Click through
Tooltip: On [free/lower plan] this stops here; [plan] keeps going.
05. Screen: The plan card or sign-up screen
Action: Click 'Start with [plan]'
Tooltip: That's [plan]. Start free and upgrade when you hit the wall for real.
Lede beside the embed: Two minutes in the product answers the plan question faster than the feature table below.
CTA (last stop): Start with [plan] →
Measure: Plays with the pricing page as source; CTA click rate to the plan link — this lane's whole job; Completion (a five-stop pricing lane should complete well above the site average); The parking stop: if it is stop 2, the feature screen is not carrying the tier's valueCreates a lane with one stop per row above — the screen as the title, the action and tooltip as the body — then opens the editor so you can capture the real screens.
The format
What the finished lane feels like
Measure
What to watch after publishing
- Plays with the pricing page as source
- CTA click rate to the plan link — this lane's whole job
- Completion (a five-stop pricing lane should complete well above the site average)
- The parking stop: if it is stop 2, the feature screen is not carrying the tier's value
FAQ
Questions
One lane for the page or one per plan?
Start with one lane for the plan most buyers hesitate over — usually the first paid tier. Add a second lane (or a branch at stop one) only if two plans genuinely sell different features.
Should a pricing-page demo be gated?
No. The visitor is one click from the plans; a form here is friction at the worst moment. The CTA at the end is the conversion.
Related
More templates
Comparing tools?