# Landing and feature pages

Source: *Building a StoryBrand* (2017), chapter 12, with the StoryBrand framework from chapters 3–11. Chapter 12 names five website essentials: an offer above the fold, obvious calls to action, images of success, a simple breakdown of multiple offers, and very few words.

## Build the first screen

A visitor should understand the offer before scrolling. Lead with **one** of the book's three routes: a desirable identity the customer can attain, the problem the product solves, or a plain statement of what the company provides. If the headline uses identity or emotion, the supporting line must still name the product category and practical result.

The first screen should answer, in the visitor's language:

- What is this for, and what does it do?
- What changes for someone like me?
- What action starts that change?

Give the main action a clear, visible label that matches its destination: for example, starting a trial, creating an account, booking a demo, or buying a plan. A useful secondary action can offer a lower-commitment path, such as seeing a demo, when there is a real asset or flow behind it. Keep it visually subordinate. Repeat the primary action at natural decision points with consistent meaning; do not scatter competing requests across the page.

Choose imagery that shows the promised result or the product in use. The book favors images of satisfied customers over pictures of offices or buildings. For software, an accurate product view can also make the result tangible. Avoid a screenshot or visual that suggests functionality the product lacks.

## Develop the page only as far as the decision requires

The BrandScript supplies material, not a mandatory section order. Select sections according to the visitor's awareness, offer complexity, and main objection. A useful SaaS page may contain:

| Job of the section | What to say or show |
|---|---|
| Name the obstacle | One recognizable external problem and the frustration it creates; do not invent an emotional crisis. |
| Explain the offer | The main outcome first, with the product mechanism or feature as the reason it is believable. |
| Show a path | A short process plan covering signup, setup, or use, especially when implementation feels risky. |
| Earn trust | A brief empathy statement and the smallest credible proof needed for this purchase. Verified customer stories often do both. |
| Picture success | A specific before-and-after change in the customer's day, workflow, or capability. |
| Address risk | A true agreement, relevant FAQ, or factual terms that settle the most likely objection. |
| Invite action | A direct CTA next to the reason to act; repeat after the visitor has enough information to decide. |

Failure belongs in a small, truthful portion of the page: the cost of the ongoing problem or lost opportunity. The book explicitly warns that excessive fear undermines the message. Let the fuller picture of success carry the page.

Visitors scan. Turn long introductions into clear headings, short sentences, meaningful bullets, and visual evidence. Keep necessary technical or purchase details accessible lower on the page or behind a clear link; brevity does not justify hiding material facts. Cut any element that interrupts the customer's story without answering a real question.

## Handle product and audience variation

For a homepage with multiple products, use a broad promise that unites them, then give each product a clearly labeled route to its own page. For distinct customer groups or jobs, develop separate story spines and pages when one headline would become vague. A feature page can use the same framework at a narrower scale: show the job this feature helps complete, the obstacle, the mechanism, proof where needed, and the next step.

When drafting, first write the hero offer and CTA. Then add only the sections that resolve the questions a buyer would still have. Check the rendered desktop and mobile first screens where possible: copy, image, and button hierarchy all contribute to the message.