StoryBrand as the skeleton of a page

StoryBrand is Donald Miller’s seven-part framework: a hero with a want, a problem, a guide, a plan, a call to action, stakes, success. It orders a home page.

A framework thousands of pages stand on

You already met the seven parts of Donald Miller’s StoryBrand in the StoryBrand lesson, as a technique for persuasive copy: a hero with a want, a problem in three layers, a guide with empathy and competence, a plan, a call to action, stakes and success. Here the framework has a different job: it suggests the order of the sections on a home page. These are the same acts and the same hero’s journey, packed for a page.

Press the blocks on the diagram: each comes with a weak and a stronger example for an invented shoe repair workshop.

1. 1 The hero wants
2. 2 The problem
3. 3 The guide
4. 4 The plan
5. 5 The call to action
6. 6 What happens if they don’t act
7. 7 Success

1. The hero wants. The first screen: in one phrase, what the person gets, and a button.

Weak: “Innovative solutions for your business”

Stronger: “We’ll fix your shoes in two days”

The example is invented: a shoe repair workshop. Put your own project in its place.

Check yourself: who is the hero in this framework, and who is the guide?

The hero is the visitor, who has a want and a problem. The guide is you: you know the path and help them along it.

Seven parts on a page

What each part means on a page, rather than in a standalone text.

1. The hero wants something. The first screen: a headline about the visitor’s want, and the main button. Not “About us”, but what the person came for.
2. The problem. The section right after the first screen. Most sites describe only the outer layer (“we repair”, “we build”). When you name the inner layer too, a person feels “this is about me”. The philosophical layer isn’t required, but it shows your values without pomp: “understanding your rights shouldn’t be this hard”.
3. The guide. A short line of empathy, not about yourself, and competence as a fact. For an expert that means the documents and proofs in the brief: a license, a membership, years in practice. For a project without “titles” it is a number of jobs done, a length of time, or an honest “we’re small, but you deal with us personally”. Some professions (attorneys, expert witnesses, doctors) have rules about what they may say about themselves; the lesson on experts without boasting is about that.
4. The plan. Three simple steps remove the fear of the unknown: a person sees what happens after the button. “Tell us your situation, get a time and a price, collect the result” reads as a short staircase.
5. The call to action. The direct button repeats: on the first screen and after the plan. Beside it goes a soft call (“See how it works”): without one, people who aren’t ready to decide have nothing to do but leave.
6. The stakes. One honest line about what the person loses if they don’t act. Scare tactics (“while you’re thinking, your fence is already being moved”) are considered an unfair practice, and you looked at them in the lesson on the limits of persuasion. Write as you would say it to an acquaintance.
7. Success. A picture of “after”, not a slogan: “you walk into the hall in your own shoes and forget you’re wearing them”. It works best when it shows a change in the person, not in your revenue.

Check yourself: which layer of the problem do sites skip most often?

The inner one: what the person feels. Sites talk about what they do, not about how their client lives.

Check yourself: how does an honest “stakes” line differ from scare tactics?

It names the real consequences of inaction calmly, without exaggeration or pressure.

Practice

Build your project’s home page from six sections.

1. The first screen. The headline is already there. Finish the paragraph want: what the visitor gets (start with “you get”). The button is already there.
2. The problem. A heading and three lines: outside, inside, unfairness.
3. The guide. A heading, a line of empathy, a line of competence. Put a proof from your brief in it.
4. The plan. A heading, three steps and a second button with the label of your main action.
5. The stakes. A heading and one calm line about what happens without action.
6. Success. A heading and a picture of life afterwards.

The words “best” and “unique” must not appear on the page: the check will see them. If your trade needs care in advertising, come back to the text in the ethics lesson, where we check it once more.

What next

The skeleton is there, but a page of seven blocks can be as dull as a form. In the next lesson we turn it into a plot: put the sections in order by acts, bring the proof and testimonials to life, and decide what not to tell at all.