The Scroll as Story: Writing Landing Pages That Guide Visitors Into Discovery

Your homepage has ten seconds. Not to sell — to earn the next scroll. This path teaches you to turn a single page into a narrative arc: from “what is this?” through “this is for me” to “show me more.” You will learn the cognitive science of first impressions, the frameworks that turn scrolling into storytelling, and why educational platforms demand a different approach than products that sell on features.

Who this is for

You have built something — a knowledge system, an educational platform, a course, a tool — and the homepage fails to convey what it is or why anyone should care. Visitors land, scan for three seconds, and leave. You know the content is good. The front door is the problem.

This path is for you if:

You have a platform or project that needs a landing page that guides rather than lists
You have tried writing a homepage and it reads like a sitemap or an “about me” page
You want to understand why certain page structures work — not just copy a template
Your product is educational, and you sense that selling it like software won’t work

What this path is NOT

This is not a design or visual layout guide. It is about the words — what you say, in what order, to turn a passive visitor into an active explorer. The visual scaffolding matters, but the narrative must come first.

Part 1 — The ten-second verdict

Every visitor who lands on your homepage is running a trial. Nielsen Norman Group’s research quantified it: the first 10 seconds are critical for the decision to stay or leave, and the probability of leaving is extremely high during those first moments.¹

The finding is not that people read your page in 10 seconds. It is that they judge it in 10 seconds. They ask one question: “Is this worth my time?” If they cannot answer yes, they leave. If they survive the first 10 seconds, the next 20 are still dangerous. Only after 30 seconds does the departure rate flatten.

graph LR
    A[0-10s<br/>Judgement] --> B[10-30s<br/>Scanning]
    B --> C[30s+<br/>Engagement]
    A -->|No clear answer| D[Leaves]
    B -->|Nothing hooks| D
    style A fill:#e74c3c,color:#fff
    style C fill:#5cb85c,color:#fff
    style D fill:#999,color:#fff

Why so harsh? Because visitors are sceptical by default. They have been burned by hundreds of poorly designed pages. Your page is guilty until proven otherwise.

The mechanism underneath is cognitive-fluency. The brain uses processing ease as a proxy for value. If your opening is easy to parse — short, specific, about them — it feels worthwhile. If it requires effort to decode — jargon, abstraction, long sentences — it feels like a waste.

Two implications for your homepage:

The first visible text must answer “what is this?” in one sentence. Not a welcome message. Not your company history. The answer to the visitor’s question.
The second line must answer “why should I care?” — phrased in terms of their problem, not your features.

Everything else comes after the visitor has decided to stay.

The ten-second principle

You are not writing a page. You are passing a trial. The first two sentences are your entire defence. They must answer the visitor’s implicit question — “is this for me?” — before the verdict lands.

Part 2 — The visitor as hero

The most common mistake in homepage writing is making yourself the protagonist. “I built this.” “Our platform does X.” “We believe in Y.” Every sentence that starts with “I” or “we” is a sentence where the visitor is absent.

Donald Miller’s StoryBrand framework (2017) reframes this with a single principle: the visitor is the hero of the story. You are the guide.²

In every story that works — film, novel, myth — the structure is the same: a character has a problem, meets a guide who gives them a plan, and takes action that leads to success (or avoids failure). Miller mapped this directly to marketing:

graph TD
    A[Character<br/>the visitor] --> B[Has a problem<br/>external + internal]
    B --> C[Meets a guide<br/>you, with empathy<br/>and authority]
    C --> D[Gets a plan<br/>clear, simple steps]
    D --> E[Takes action<br/>one clear CTA]
    E --> F[Achieves success<br/>the transformation]
    E --> G[Avoids failure<br/>the cost of inaction]
    style A fill:#4a9ede,color:#fff
    style C fill:#b56a4f,color:#fff

The framework distinguishes three levels of the visitor’s problem:

External — the surface problem (“I don’t know where to start learning about AI”)
Internal — the emotional frustration (“I feel overwhelmed and behind”)
Philosophical — the injustice (“Learning shouldn’t require a degree or luck”)

Most homepages address only the external problem. The internal and philosophical problems are where emotional connection lives. When a visitor reads a sentence that names their feeling — not just their situation — they think “this person understands me.” That is the moment the guide earns trust.

The practical shift for your writing:

Instead of…	Write…
”Yiuno is a knowledge system"	"You’re using AI but nothing sticks"
"We offer 184 concept cards"	"Every concept, explained from zero"
"Built by an AI learning designer"	"Designed by someone who hit the same wall”

The left column talks about you. The right column talks about them. The visitor sees themselves in the right column.

The guide's two credentials

A guide needs exactly two things: empathy (I have been where you are) and authority (I found the way through). Lead with empathy. Authority alone makes you sound like you are lecturing. Empathy alone makes you sound like you are commiserating. Both together make you sound like someone worth following.

Part 3 — Awareness matching

Not every visitor arrives in the same mental state. Eugene Schwartz formalised this in 1966 with his five levels of awareness — a framework that tells you what kind of copy to write based on where the visitor’s head is.³

graph LR
    A[1. Unaware<br/>No problem<br/>recognised] --> B[2. Problem<br/>Aware<br/>Knows the pain]
    B --> C[3. Solution<br/>Aware<br/>Knows fixes exist]
    C --> D[4. Product<br/>Aware<br/>Knows your thing]
    D --> E[5. Most<br/>Aware<br/>Ready to act]
    style A fill:#fde8e8,stroke:#e74c3c
    style B fill:#4a9ede,color:#fff
    style C fill:#4a9ede,color:#fff

The principle: match your message to the visitor’s awareness level. If they are Unaware, do not pitch your product — they do not even know they have a problem. If they are Most Aware, do not explain the problem — just give them the next step.

Schwartz’s copy-length rule follows directly: “The more aware your market, the easier the selling job, the less you need to say.”³ Unaware audiences need long, educational copy. Most Aware audiences need a button.

For an educational platform homepage, your visitors are likely at levels 1-3:

Level	What they think	What your page must do
Unaware	”AI is interesting”	Name the problem they haven’t seen
Problem Aware	”I’m not really learning from AI tools”	Validate the feeling, show you understand
Solution Aware	”I need a structured approach”	Show why your approach is different

This creates the page’s narrative arc: start by naming the problem (catches levels 1-2), agitate it (deepens level 2’s conviction), present your approach (captures level 3). Visitors at levels 4-5 scroll fast — they need a clear CTA, not more persuasion.

Go deeper: the connection to PAS

The Problem-Agitation-Solution framework maps directly onto awareness levels. The Problem section speaks to levels 1-2. The Agitation section converts level 2 to level 3. The Solution section converts level 3 to level 4. This is not a coincidence — copywriting-frameworks evolved empirically to match how awareness naturally shifts.

Part 4 — The narrative scroll

A homepage is not a document. It is a sequence. Each section must earn the next scroll. The metaphor is a story: exposition, rising action, climax, resolution. The mechanism is the curiosity-gap — each section opens a question that the next section answers.

Here is the structure that combines PAS, StoryBrand, and awareness matching into a single-page narrative:

graph TD
    A[Hero section<br/>Problem statement<br/>10-second answer] --> B[Agitation<br/>Make the gap felt<br/>Internal problem]
    B --> C[The shift<br/>What changes when<br/>learning works]
    C --> D[The plan<br/>How it works<br/>3 clear steps]
    D --> E[Entry points<br/>Where to start<br/>based on who you are]
    E --> F[Credibility<br/>Who built this<br/>and why — brief]
    style A fill:#4a9ede,color:#fff

Section 1 — Hero (above the fold). Answer “what is this?” and “why should I care?” in two lines. This is the trial from Part 1. One headline, one supporting sentence, one CTA. Nothing else.

Section 2 — Agitation. Name the internal problem. Not features, not solutions — the feeling the visitor has. “You prompt, you get output, but nothing sticks.” Two to three sentences maximum. This section earns trust by demonstrating understanding.

Section 3 — The shift. Show what the world looks like when the problem is solved. Not your product — the outcome. “What if everything you learned connected to everything else?” This is StoryBrand’s “success” element, placed early as a vision.

Section 4 — The plan. Now — and only now — explain how your thing works. Three steps maximum. Miller’s research shows that a plan longer than three steps creates cognitive overload and the visitor disengages.² Keep it concrete: “Pick a path. Read a card. Follow the links.”

Section 5 — Entry points. Give the visitor a choice based on their identity or intent. A table or short list: “If you want X, start here.” This transforms the CTA from one-size-fits- all into personalised next steps.

Section 6 — Credibility. Who built this? Why? Place this last — not first. The visitor cares about their problem before they care about your story. A brief line with a link to learn more is enough.

Applied to an educational platform

Hero: “You’re learning with AI. But is anything sticking?”

Agitation: “You prompt, you get answers, you move on. Next week you can’t explain what you learned. The tools are fast. The understanding is shallow.”

Shift: “What if every concept connected to every other concept — and you could trace the path from confusion to clarity?”

Plan: “1. Pick a learning path. 2. Read one concept card. 3. Follow the links that interest you.”

Entry points: Table of paths by goal/persona.

Credibility: “Built by [name] — [one-line authority].”

Part 5 — Architecture of attention

You have the narrative structure. Now: how to write each section so it works with (not against) how the brain processes a page.

Three research findings govern section-level writing:

1. The serial position effect (Ebbinghaus, 1885; Glanzer & Cunitz, 1966).⁴ People remember the first and last items in a sequence best. The middle fades. Applied to a homepage: your opening sentence and your closing CTA carry disproportionate weight. The middle sections must work harder to hold attention.

2. The F-pattern (Nielsen, 2006; n=232 users).⁵ Eye- tracking shows readers scan web pages in an F-shape: two horizontal sweeps at the top, then a vertical scan down the left margin. Implications: front-load each section’s key phrase to the left. The first two words of every paragraph are the most likely to be read.

graph TD
    A[First horizontal sweep<br/>headline + first line] --> B[Second sweep<br/>subheading or bold text]
    B --> C[Vertical scan<br/>left margin only]
    style A fill:#4a9ede,color:#fff
    style B fill:#4a9ede,color:#fff
    style C fill:#999,color:#fff

3. The inverted pyramid (journalism, Civil War era; adapted for web by Nielsen, 1996).⁶ Put the conclusion first. Then supporting detail. Then background. Readers may leave at any point — front-load value so they get something regardless of where they stop.

Applied to each section of your homepage:

Principle	What it means for your writing
Serial position	First sentence and last sentence of each section = strongest content
F-pattern	Key phrase at the start of each paragraph, not buried mid-sentence
Inverted pyramid	Lead with the answer or claim, then support it — never build up to a conclusion

The combination: each section is a micro-article. Opens with its strongest claim. Closes with a hook into the next section (the curiosity-gap — “But that raises a question:”). The middle is lean.

The section-level rule

Every section on your homepage is a standalone argument with its own opening, evidence, and bridge to the next section. The reader may leave at any point — so every section must deliver value even if it is the last one they read.

Part 6 — The educational platform difference

Everything above applies to any landing page. But educational platforms have a specific challenge that products, SaaS tools, and e-commerce sites do not: you are asking the visitor to invest effort, not money.

The transaction is different:

Type	What the visitor gives	What they expect back
E-commerce	Money	A product
SaaS	Money + time	A solved problem
Education	Time + cognitive effort	Understanding

This changes the homepage’s job. You are not overcoming price objection. You are overcoming effort objection — the fear that the time investment won’t pay off. The visitor’s internal monologue: “Is this actually going to teach me anything, or is it another resource I’ll bookmark and never return to?”

Three principles specific to educational platform homepages:

1. Show the structure, not just the content. The visitor needs to believe the system is navigable. A list of 184 articles is overwhelming. A map with clear entry points is inviting. The plan (Part 4 of your narrative) matters more here than for any other product type.

2. Demonstrate understanding in the copy itself. Your homepage is a teaching moment. If the writing is clear, structured, and illuminating, it is proof that the platform delivers on its promise. Sloppy homepage copy signals sloppy content inside.

3. Lower the activation energy. The first action must cost almost nothing. “Read one concept card” is lower-barrier than “Start the programme.” “Pick a path” is lower-barrier than “Create an account.” The educational homepage succeeds when the visitor starts learning before they decide to commit.

graph LR
    A[Visitor arrives<br/>sceptical] --> B[Homepage teaches<br/>something small]
    B --> C[Visitor thinks:<br/>this is clear]
    C --> D[Clicks one link<br/>low commitment]
    D --> E[Learns something<br/>proof of value]
    E --> F[Explores further<br/>self-directed]
    style B fill:#4a9ede,color:#fff
    style E fill:#5cb85c,color:#fff

Coursera, Skillshare, and Khan Academy all follow this pattern: the homepage demonstrates value before asking for commitment. The visitor’s first interaction is discovery, not registration.

The meta-principle for educational platforms

Your homepage is your first lesson. If the visitor learns something — even just a reframe, a new question, or a clearer way to think about their problem — they have already experienced the product. The homepage IS the free trial.

What you now understand

Concepts you have gained

The 10-second verdict — visitors judge before they read; the first two sentences are your entire trial

storybrand-framework — the visitor is the hero, you are the guide; lead with their problem, not your solution

visitor-awareness-levels — Schwartz’s five levels determine what to say and how much to say

Narrative scroll structure — PAS + StoryBrand mapped to a six-section page (hero, agitation, shift, plan, entry points, credibility)

serial-position-effect — first and last positions carry disproportionate weight; design for memory

F-pattern and inverted pyramid — front-load each section, lead with conclusions, put key phrases left

The educational difference — you are overcoming effort objection, not price objection; your homepage must teach

Check your understanding

Test yourself before moving on

Explain why the first 10 seconds matter more than the rest of the page combined — what is the cognitive mechanism and what research supports it?

Distinguish between the external, internal, and philosophical levels of a visitor’s problem in StoryBrand — which level creates emotional connection?

Analyse a homepage you visit often: at which of Schwartz’s five awareness levels does it meet you? Is the copy length appropriate for that level?

Evaluate why educational platforms must demonstrate understanding in the copy itself — what is the homepage proving that other products don’t need to prove?

Design a six-section homepage narrative for a topic you know well, using the narrative scroll structure from Part 4

Where to go next

Apply these principles to your homepage

You have the framework. Now rewrite your homepage using the six-section narrative structure. Start with the visitor’s problem, not your product description.

Best for: anyone with a homepage that reads like a sitemap.

Deepen the copywriting science

This path gives you the page structure. copywriting goes deeper on sentence-level craft: cognitive fluency, rhythm, hooks, and platform-specific physics.

Best for: anyone who wants to write better at every scale.

Build the content engine

A homepage brings visitors in. content-strategy teaches how to keep them coming back — cadence, formats, repurposing, and distribution.

Best for: anyone ready to publish regularly.

Understand your visitor's journey

The homepage is one touchpoint. customer-journey-mapping maps the full path from stranger to advocate.

Best for: anyone building a multi-touchpoint experience.

Explorer

The Scroll as Story: Writing Landing Pages That Guide Visitors Into Discovery

The Scroll as Story: Writing Landing Pages That Guide Visitors Into Discovery

Who this is for

Part 1 — The ten-second verdict

Part 2 — The visitor as hero

Part 3 — Awareness matching

Part 4 — The narrative scroll

Part 5 — Architecture of attention

Part 6 — The educational platform difference

What you now understand

Check your understanding

Where to go next

Sources

Further reading

Graph View

Table of Contents

Backlinks

Explorer

The Scroll as Story: Writing Landing Pages That Guide Visitors Into Discovery

The Scroll as Story: Writing Landing Pages That Guide Visitors Into Discovery

Who this is for

Part 1 — The ten-second verdict

Part 2 — The visitor as hero

Part 3 — Awareness matching

Part 4 — The narrative scroll

Part 5 — Architecture of attention

Part 6 — The educational platform difference

What you now understand

Check your understanding

Where to go next

Sources

Further reading

Footnotes

Graph View

Table of Contents

Backlinks