A story on a landing page

Why:You’ll turn a page into a plot: put the sections in acts, make the first screen an “ordinary world with a want”, bring proof and a testimonial to life, and decide what the page should not narrate. Afterwards you have a page that reads top to bottom as a story with an ending.

30 minutes

Read by speech synthesis (Qwen3-TTS); the voice is not a person’s.

A landing page plot is the order of its sections as the acts of a story: first screen and problem, then guide and proof, and a call to action at the end.

A page is a plot read by scrolling

We already know the forms: acts, the pyramid, the hero’s journey, the seven blocks. What remains is to see that a page is itself a plot. A person scrolls from top to bottom, and each section is shown to them as a scene. Research from Nielsen Norman Group shows that attention on a page usually falls off as you go down, but people do scroll if the top gave them a reason. So the order of the sections is the composition of the story.

The layout by acts is this.

  • Act 1, setup. The first screen and the problem.
  • Act 2, confrontation. The guide, the proof, the plan.
  • Act 3, resolution. The call to action and the contacts.

But not all of a page is narrative. The diagram marks which parts follow the plot and which stand beside it and work as reference.

The sections of a page, in scrolling order
  1. Menu outside the plot

    Navigation: the person is looking for where to click. Plain names, no metaphors.

  2. First screen Act 1: setup

    The ordinary world and the want: one recognizable situation, one button.

  3. Problem Act 1: setup

    The trouble grows: what gets in the way, how it feels.

  4. Guide and proof Act 2: confrontation

    Documents, cases, testimonials: each proof as a short episode.

  5. How it works Act 2: confrontation

    Three steps: the hero’s path becomes clear.

  6. Prices and terms outside the plot

    A table or a list. The person compares and counts, and a plot gets in the way.

  7. Call to action and contacts Act 3: resolution

    The resolution: a button, a phone number, an address. Simple, with no decoration.

  8. Privacy policy and consent outside the plot

    Legal text: exact wording, not a story.

The plot runs from the first screen to the call to action. The menu, prices, terms and policy stand beside it, but don’t tell a story.

Check yourself: which parts of a page don’t tell a story?

The menu, prices and terms, forms, contacts and legal text. There the person is carrying out a task, and a plot gets in their way.

The first screen: ordinary world and want

The first seconds decide whether a person stays. The first screen needs a scene of recognition: a situation in which readers see themselves (“your heel snapped before an important meeting”), and a want you promise to satisfy. That’s the ordinary world and the call from the hero’s journey, in two sentences.

What must not be on the first screen:

  • “Welcome to our website”. It tells nobody anything.
  • A long company history. It can wait lower down.
  • Metaphors that only you understand. The headline should read without explanation.

The main-action button stands right there: a person who has recognized themselves must be able to decide at once.

The problem: tension rises

The second section makes the problem tangible: what happens while the person does nothing. It’s honest and short. It’s enough to show the trouble growing: deadlines, papers, worry. There’s no need to scare anyone.

Proof as mini-stories

A list of proofs is usually a dry set: “license”, “membership”, “12 years of experience”. The dry fact is needed, but it narrates nothing. Add one line on what it means for the visitor: “a licensed land surveyor, which means the county will accept your plan”. A fact turns into an episode: who, what they did, how it helped.

It’s important not to invent. A fact stays a fact, and only the delivery changes: meaning appears beside it.

A testimonial as a scene

A good testimonial is built like a small story: a person came with a problem, something happened, they left with a result. “Great job, highly recommended” reads like an ad, while “in March we had spent three months stuck, and in two weeks we had a plan” reads like a scene: it has a length of time and a detail.

Three rules to remember in advance.

  1. A testimonial must be real, and the person must give permission to publish it. Faking reviews is an unfair practice. In the US, the FTC’s rule on consumer reviews and testimonials (16 CFR Part 465, in force since October 2024) prohibits fake reviews and testimonials, and the FTC’s Endorsement Guides (16 CFR Part 255) expect that a material connection, such as a payment or a free product, is disclosed. In the UK the CAP Code (section 3) requires that testimonials be genuine and that you can show they are.
  2. A detail beats adjectives: a time, a number, a place.
  3. Check the rules of your profession. Some professionals (lawyers, for example, whose advertising is governed by state bar rules in the US, or health professionals handling patient information) face limits on testimonials. The lesson on ethics comes back to this.

This is general information, not legal advice. For your own case, ask the regulator or a qualified attorney: in the US the FTC, in the UK the ASA and CAP.

In the practice below you may invent a testimonial to feel the form. On a real site you must not.

Check yourself: what turns a testimonial into a scene?

A concrete detail: a length of time, a number, a place, not adjectives like “great” and “recommended”.

What not to narrate

The rule is simple: if a person is carrying out a task, don’t get in their way with a plot. A price table, a booking form, contacts, a data policy: these need clarity and precision. A good sign: if any sentence can be cut from a block without losing meaning, it’s narrative; if not, it’s facts.

There’s one exception: a short human line beside the numbers (“the price includes the site visit and the report”) doesn’t get in the way, it helps.

Practice

Build a page of five sections in strict order.

  1. The first screen. The headline and button are there. Finish the “ordinary world” and the “want”.
  2. The problem. A heading and a couple of lines on how the trouble grows.
  3. The proof. For each proof from the brief, add what it means for the visitor. Then write a testimonial scene (in the practice it may be invented) with a number or a date and a signature.
  4. The plan. Three steps.
  5. The call to action. A heading and contacts. Nothing needs narrating here.

Then read the page from top to bottom, without skipping a line. If it was easy to read, and the button at the end looks like a natural continuation, the plot works.

Practice

Preparing your page…

Test

Question 1 of 6

Put the sections of a page in plot order

Put them in order with the “up” and “down” buttons.

Cards

These cards go into your review once you finish the lesson.

  • How do a page’s sections relate to the acts?

    Answer

    First screen and problem: setup. Guide, proof and plan: confrontation. Call to action and contacts: resolution.

  • What belongs on the first screen?

    Answer

    The visitor’s ordinary world and their want in a sentence or two, and the main button. No “welcome”.

  • How do you turn proof into a mini-story?

    Answer

    Add to the fact (a document, a length of time, a case) what it means for the visitor. The fact stays, and meaning arrives.

  • What does a page not narrate?

    Answer

    Menus, prices, terms, forms, contacts and legal text: there the person is carrying out a task, and a plot gets in their way.

Sources

Next

You now know: the plot of a landing page.