Website Examples
StoryBrand Website Examples
StoryBrand-style website examples, the sections they share, and a copyable copy template.
A StoryBrand website is a website built around one idea: the customer is the hero of the story, and your business is the guide. The StoryBrand framework, made public by Donald Miller in Building a StoryBrand, gives that idea a structure — a character with a problem meets a guide, gets a plan, is called to action, avoids failure, and ends in success. This page collects StoryBrand website examples — the sites of the framework's own makers plus clearly labelled patterns for different site types — and breaks down the homepage sections a StoryBrand-style site shares, so you can copy the structure for your own website. It is part of the website examples library.
Most StoryBrand-style websites reuse the same homepage skeleton in the same order: a headline that names the customer and their problem, a one-line subheadline, a direct and a transitional call to action, a pain section, a meet-the-guide section, a three-step plan, the stakes, the success outcome, and a final call to action. Instead of a long article, here are the examples — plus the anatomy, the BrandScript mapped to website sections, good vs weak patterns, and a copyable copy template.
What is a StoryBrand website?
A StoryBrand website applies the StoryBrand framework to the pages people visit. The core move: stop making your company the hero. On most business websites the hero is the company — its history, its awards, its "we are a full-service" claims — and the customer is just someone passing through. StoryBrand flips that: the customer is the hero who wants something, and your business is the trusted guide who helps them get it.
That flip is not vague advice; it maps to a specific structure. The framework's seven parts are publicly documented, and each one lands on a specific part of the website:
| Framework part | The question it answers | Where it lands on the website |
|---|---|---|
| Character | Who is the hero? (the customer, not you) | Hero headline, hero imagery, testimonial names |
| Problem | What does the hero want to escape? | Hero subheadline, pain section |
| Guide | Why should the hero trust you? | Meet-the-guide section, About page, trust signals |
| Plan | What is the clear path forward? | "How it works" section, usually three steps |
| Call to action | What should the hero do now? | Header and hero buttons, forms, transitional links |
| Failure | What is at stake if nothing changes? | A short stakes section |
| Success | What does the hero get at the end? | Outcomes section, testimonials |
Two more publicly documented concepts shape the copy. The first is that a problem has three layers: an external problem (the visible obstacle in the world), an internal problem (how the customer feels about it), and a philosophical problem (why it matters beyond the transaction). The second is that there are two kinds of calls to action: a direct call to action (buy, book, start, get) for people ready to act, and a transitional call to action (learn more, download, subscribe) for people still making up their minds.
None of this requires mentioning StoryBrand on the page. A "StoryBrand website" is a website whose structure follows the pattern — which is why the real examples below include sites that never say the word.
A StoryBrand site is, first of all, a working business website. If you are new to what business sites need, the website basics category covers the underlying ideas.
The anatomy of a StoryBrand homepage
The mockup below is an original one-file homepage for Ledgerline, a fictional bookkeeping service for small businesses. Every section maps to a framework part: the hero names the character and the problem, the subheadline is a one-liner, there is a direct and a transitional call to action, then pain, guide, plan, stakes, success, FAQ, and a final call to action.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ledgerline - small business bookkeeping, done for you</title>
<style>
:root { --ink: #1f2a37; --muted: #5b6672; --line: #e4e7eb; --accent: #0f766e; --bg: #fbfaf7; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; }
header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.logo { font-weight: 700; font-size: 18px; }
.logo span { color: var(--accent); }
nav a { margin-left: 16px; color: var(--ink); text-decoration: none; font-size: 14px; }
.cta { background: var(--accent); color: #fff; padding: 8px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.hero { max-width: 960px; margin: 0 auto; padding: 64px 24px; text-align: center; }
.hero h1 { font-size: 40px; line-height: 1.15; margin: 0 0 16px; }
.hero p { color: var(--muted); font-size: 18px; max-width: 640px; margin: 0 auto 28px; }
.buttons a { display: inline-block; margin: 0 8px; padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: 600; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { border: 1px solid var(--ink); color: var(--ink); }
.trust { margin-top: 18px; font-size: 13px; color: var(--muted); }
section { max-width: 860px; margin: 0 auto; padding: 36px 24px; border-top: 1px solid var(--line); }
h2 { font-size: 24px; margin: 0 0 8px; }
.sub { color: var(--muted); margin: 0 0 20px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fff; }
.card h3 { margin: 0 0 6px; font-size: 16px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.steps b { color: var(--accent); min-width: 24px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.guide { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
footer { text-align: center; padding: 32px 24px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } .two { grid-template-columns: 1fr; } nav { display: none; } .hero h1 { font-size: 30px; } }
</style>
</head>
<body>
<header>
<span class="logo">Ledger<span>line</span></span>
<nav>
<a href="#how">How it works</a>
<a href="#guide">Meet the team</a>
<a href="#faq">FAQ</a>
</nav>
<a class="cta" href="#cta">Get a free audit</a>
</header>
<div class="hero">
<h1>We help small business owners get their books done without the tax-season panic.</h1>
<p>Ledgerline is the bookkeeping team for busy owners. We tidy your accounts, close your books every month, and keep you tax-ready, so you always know your numbers.</p>
<div class="buttons">
<a class="btn-primary" href="#cta">Get your free 15-minute audit</a>
<a class="btn-secondary" href="#how">See how it works</a>
</div>
<p class="trust">CPA-supervised team - works with QuickBooks, Xero, and FreshBooks</p>
</div>
<section id="pain">
<h2>You didn't start a business to become a bookkeeper</h2>
<p class="sub">Sound familiar?</p>
<div class="cards">
<div class="card"><h3>Receipts pile up</h3><p>Months of expenses you keep meaning to sort out.</p></div>
<div class="card"><h3>You dread tax season</h3><p>Wondering if you've missed a deduction - or made a mistake.</p></div>
<div class="card"><h3>You don't know your numbers</h3><p>Cash flow is a guess until the bank statement arrives.</p></div>
</div>
</section>
<section id="guide">
<h2>Meet your guide</h2>
<div class="two">
<div class="guide">
<h3>We've been where you are</h3>
<p>Every accountant on our team has worked inside a small business, so we know the mess firsthand. We don't judge your shoebox - we just make it disappear.</p>
</div>
<div class="guide">
<h3>The team behind the books</h3>
<p>A CPA-supervised team that's been closing books for small businesses for years, in the tools you already use.</p>
</div>
</div>
</section>
<section id="how">
<h2>Here's how it works</h2>
<p class="sub">Three steps, and you're done.</p>
<ol class="steps">
<li><b>1</b><div><strong>A free 15-minute audit.</strong><br />We look at where your books stand and tell you what it would take to fix them.</div></li>
<li><b>2</b><div><strong>We clean up your books.</strong><br />We catch up your accounts and set up clean systems in your tools.</div></li>
<li><b>3</b><div><strong>Monthly close, on autopilot.</strong><br />We close your books each month and hand you a one-page numbers summary.</div></li>
</ol>
</section>
<section id="stakes">
<h2>What happens if nothing changes</h2>
<p>Messy books quietly cost you: penalties and missed deductions at tax time, surprise cash-flow problems, and expensive catch-up work when you finally need clean numbers for a loan or a sale. The longer they wait, the bigger the mess gets.</p>
</section>
<section id="success">
<h2>What you get when the books are done</h2>
<p>Clear numbers, every month. Tax-ready records without the scramble. And the confidence to make decisions from real numbers instead of guesses.</p>
</section>
<section id="faq">
<h2>Questions owners ask</h2>
<ul>
<li><strong>Which tools do you work in?</strong> QuickBooks, Xero, and FreshBooks - or we'll help you pick one.</li>
<li><strong>Do I need to prepare anything?</strong> Share access and your last few statements; we handle the rest.</li>
<li><strong>Can you help if my books are already a mess?</strong> Yes - that's most of what we do.</li>
</ul>
</section>
<footer id="cta">
<h2>Ready for books you don't have to think about?</h2>
<p>Get a free 15-minute audit of your books - no strings attached.</p>
<a class="btn-primary" href="#cta" style="display:inline-block; margin-top:12px; padding:12px 20px; border-radius:6px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600;">Get your free audit</a>
</footer>
</body>
</html>
The sections in order:
- Header — the logo, a minimal navigation, and one persistent call to action
- Hero — a headline that names the character and the problem, not the company
- Subheadline — the one-liner: who it is for and what they get
- Two calls to action — one direct ("get your free audit"), one transitional ("see how it works")
- Trust line — one short, concrete credibility note
- The problem — pain cards the reader recognizes, written as feelings
- Meet your guide — empathy plus authority
- The plan — three clear steps
- The stakes — what happens if nothing changes
- Success — the outcome the customer gets
- FAQ — the questions that remove remaining doubt
- Footer — the final call to action and how to reach you
The two sections worth studying hardest are the hero — the one place everyone decides in a few seconds whether the page is about them — and the plan, because a clear three-step plan is what turns interest into action. For the wireframe version of this skeleton, see the website wireframe example page; if you want to build the page by hand, the HTML website example page shows the file structure and the responsive website example page covers how it behaves on phones.
StoryBrand website examples
The real examples below are sites that publicly build their homepage around the framework. Each card is limited to what is publicly observable about the page structure — nothing here states traffic, revenue, or business results.
StoryBrand.com — the framework's own website
| Field | Observation |
|---|---|
| Site type | Marketing messaging company (Donald Miller's StoryBrand) |
| Character | Business owners struggling to clarify their brand or product message |
| Problem | Unclear messaging: hard-to-explain products, wasted marketing spend, stalled growth |
| Guide | StoryBrand itself, positioned as the expert that simplifies messaging |
| Plan | Three ways to work together: the live workshop, the messaging intervention, and fractional CMO work |
| Homepage structure | A hero naming the reader's struggle, a "we understand the pain" list, a solution section, the three paths, then logos and testimonials |
| Primary CTA | "Clarify Your Message" in the hero, plus a quiz as a lower-friction next step |
| Trust signals | Client logos, named testimonials, and "trusted by thousands of businesses" messaging |
| Notable pattern | The homepage demonstrates the framework it sells: it names the pain before it ever introduces the product |
| What to learn | Name the reader's problem on the first line, then offer yourself as the guide |
BusinessMadeSimple.com — the course platform
| Field | Observation |
|---|---|
| Site type | On-demand business course platform by Donald Miller (home of the StoryBrand Messaging Framework course) |
| Character | Small business owners who feel overwhelmed |
| Problem | Overwhelm: revenue stalls, time wasted on ideas that do not move the needle, guessing instead of following a process |
| Guide | Donald Miller and Business Made Simple |
| Plan | A six-step plan: leadership, messaging, sales, products, management, and cash flow |
| Homepage structure | A hero with the six-step plan, an "overwhelming" problem section, the six steps, the guide, then pricing and guarantees |
| Primary CTA | "Get the courses" |
| Trust signals | Testimonials, company logos, a money-back guarantee |
| Notable pattern | The site leads with a plan before the offer — the framework's recommended order |
| What to learn | Even a course-selling site is a StoryBrand website: name the problem, give the plan, introduce the guide |
TheCustomerIsTheHero.com — a single-offer microsite
| Field | Observation |
|---|---|
| Site type | A StoryBrand-branded sales-training microsite |
| Character | Salespeople who want to stop pushing and start solving |
| Problem | Selling feels pushy, and pitches that focus on the product lose deals |
| Guide | Donald Miller and StoryBrand |
| Plan | A five-step sales pitch: start with the problem, position the product as the solution, give a step-by-step plan, paint the stakes, ask for the sale |
| Homepage structure | One hero, one idea, two ways to act (course or workshop) |
| Primary CTA | "Get the Course" and "Book a Workshop" |
| Trust signals | "Powered by StoryBrand" and the author's credentials |
| Notable pattern | A focused one-offer page is the StoryBrand sales-funnel pattern in miniature |
| What to learn | For a single offer, one page, one plan, and two clear actions can be the whole site |
Big Red Jelly — a growth agency applying the pattern
| Field | Observation |
|---|---|
| Site type | Growth agency (branding, web design and development, content, strategy, growth) |
| Character | Business owners whose marketing "does not move the needle" |
| Problem | Jumping straight to ads without a clear brand, website, or tools wastes budget and yields weak results |
| Guide | Big Red Jelly, positioned as the agency with a proven process |
| Plan | A three-step process — Brand, Build, Grow — with a fuller five-step walkthrough on the page |
| Homepage structure | A hero promise, services cards, a numbered process section, then awards, case studies, and testimonials |
| Primary CTA | "Request a Quote" and "Let's Talk" |
| Trust signals | Award badges, client testimonials, case studies |
| Notable pattern | Two CTAs map cleanly to the direct-action and transitional-action pair |
| What to learn | Agencies can apply the pattern to themselves: one hero promise, one clear process, two ways to start |
Notice that only the first example belongs to StoryBrand itself. The others show the point from the top of this page: the pattern is structural, and a site does not have to mention StoryBrand for the structure to do its work.
StoryBrand website patterns by site type
The cards below are not real companies. They are illustrative patterns built from how each site type applies the framework, so the observations are about the pattern, not a specific site. Use them as a starting point, then fill in your own copy with the template further down.
Service business — e.g. a lawn care company — illustrative pattern
| Field | Pattern |
|---|---|
| Character | A busy homeowner who wants a nice lawn but has no weekend time |
| Problem | The lawn is a mess, and every weekend spent on it feels wasted |
| Guide | A local crew of lawn pros who understand homeowners want results, not work |
| Plan | A free walkthrough, a one-time clean-up, then scheduled monthly visits |
| Primary CTA | "Get your free quote" |
| Stakes | An overgrown yard quietly hurting the home's curb appeal |
| Success | A lawn the homeowner is proud of, with zero weekend work |
| What to learn | Home-service sites win when the hero is the homeowner's free time, not the company's equipment |
Professional services — e.g. an accountant — illustrative pattern
| Field | Pattern |
|---|---|
| Character | A small business owner who is anxious about their taxes |
| Problem | Tax stress: fear of mistakes, missed deductions, and a last-minute scramble |
| Guide | A CPA who has prepared thousands of small-business returns |
| Plan | A quick intro call, a documents checklist, then filed on time |
| Primary CTA | "Book your free review" |
| Stakes | Penalties, missed deductions, and a painful filing season |
| Success | Peace of mind and no surprises at tax time |
| What to learn | Professional services sell trust: make the guide credible and the plan painless |
Agency or creative studio — illustrative pattern
| Field | Pattern |
|---|---|
| Character | A founder who wants their business to look as good as it is |
| Problem | DIY branding and templates make a strong business look small |
| Guide | A senior team that has done this for brands like yours |
| Plan | A brand audit, then identity, then your site and collateral |
| Primary CTA | "Start a project" |
| Stakes | Being overlooked because the brand does not match the quality |
| Success | A brand that earns trust before a word is spoken |
| What to learn | Agencies should follow their own pattern: one promise, one process, one clear next step |
SaaS / B2B software — illustrative pattern
| Field | Pattern |
|---|---|
| Character | An operations manager drowning in spreadsheets and disconnected tools |
| Problem | Time lost shuffling data and no single source of truth |
| Guide | The product and an onboarding team that handles the setup |
| Plan | A free trial, a guided import, then go live in a week |
| Primary CTA | "Start your free trial" |
| Stakes | Wasted hours, errors, and tools the team stops using |
| Success | One place for everything, with numbers the team trusts |
| What to learn | B2B sites win when the character is the buyer's daily pain, not the feature list |
Ecommerce brand — illustrative pattern
| Field | Pattern |
|---|---|
| Character | A shopper who is tired of mass-market quality |
| Problem | Products that look great in ads and disappoint in person |
| Guide | The maker: the craft, materials, and care behind the product |
| Plan | Shop the collection, choose your options, delivered to your door |
| Primary CTA | "Shop the collection" |
| Stakes | Another purchase that ends up returned or unused |
| Success | A product that feels made for them |
| What to learn | For stores, the story is the product's quality; let the guide be the craft behind it |
Nonprofit — illustrative pattern
| Field | Pattern |
|---|---|
| Character | A donor who wants their gift to actually matter |
| Problem | Unsure where the money goes or whether it changes anything |
| Guide | The cause, made tangible and trustworthy |
| Plan | Learn about the work, give, then see the impact |
| Primary CTA | "Donate today" |
| Stakes | Real needs going unmet because giving feels too abstract |
| Success | Measurable change the donor helped create |
| What to learn | Nonprofits do best when the character is the person whose life changes, and the donor is the guide's partner |
Coach or personal brand — illustrative pattern
| Field | Pattern |
|---|---|
| Character | A professional who knows they are capable but feels stuck |
| Problem | No clear path forward and no one to show the way |
| Guide | The coach's own story and credentials |
| Plan | A free intro call, the program, then a community of peers |
| Primary CTA | "Book a free call" |
| Stakes | Another year passing without the change they want |
| Success | Clarity, momentum, and proof it can be done |
| What to learn | A personal brand can be a StoryBrand site too: the customer is the hero of their own growth |
The BrandScript, mapped to your website
The BrandScript is the one-page document that captures the story your website tells — character, problem, guide, plan, call to action, failure, and success. Write it before you write a word of website copy, and each homepage section practically writes itself, because every section carries one BrandScript element.
| BrandScript element | Where it lives on the website | What it should say |
|---|---|---|
| Character | Hero headline, hero imagery, testimonial names | Who the site is for and what they want |
| Problem | Hero subheadline and the pain section | The pain in all three layers: external, internal, philosophical |
| Guide | Meet-your-guide section, About page, team page, trust signals | Empathy ("we know how it feels") plus authority ("here is why we can help") |
| Plan | The "how it works" section | Three clear steps the customer can follow |
| Call to action | Header and hero buttons, forms, transitional links | One direct action (buy, book, start) and one transitional action (learn more, download) |
| Failure | A short "what you avoid" section | What happens if nothing changes |
| Success | The outcomes section and testimonials | The life the customer gets at the end |
Good vs weak StoryBrand website patterns
The examples below are illustrative patterns, not real sites. They show the difference between a homepage that is really about the company and one that is about the customer.
| Instead of this (weak) | Try this (StoryBrand-style) | Why |
|---|---|---|
| "Welcome to Acme" | "We help busy owners get their books done" | Names the customer and the outcome in one line |
| "We are a full-service agency since 1999" | "You need a brand that makes you look as good as you are" | The customer is the hero, not the company |
| A list of features | A list of outcomes | Features tell; outcomes sell |
| No plan, just "contact us" | A three-step "how it works" section | A plan lowers the perceived risk of acting |
| One vague contact button | One direct CTA and one transitional CTA | Gives buyers and browsers each a path forward |
| Testimonials praising the company | Testimonials from customers about their results | Proof belongs to the hero, not the guide |
| A hero that says "about us" | A hero that names the problem and the fix | The first line must be about the reader |
Copyable StoryBrand website copy template
Fill in the template below with your own details. A filled example lives at the top of this page in the Ledgerline mockup (a fictional bookkeeping service); this is the blank version you can copy and edit.
- BrandScript (one page: character, problem, guide, plan, CTA, failure, success)
- One-liner
- Hero headline and subheadline
- Pain section
- Meet-the-guide section
- Three-step plan
- Direct and transitional calls to action
- Stakes section
- Success outcomes
- FAQ and final checks
# StoryBrand website copy plan
## 1. BrandScript (write this first - it drives everything)
- Character (the customer): [Who is the hero? Name them and what they want]
- External problem: [The visible obstacle in the world]
- Internal problem: [How the customer feels about it]
- Philosophical problem: [Why it matters beyond the transaction]
- Guide: [What makes your business the one that can help?]
- Plan: [Three steps the customer follows]
- Direct call to action: [The main action: buy, book, start, get]
- Transitional call to action: [A lower-friction action: learn more, download]
- Failure: [What happens if nothing changes]
- Success: [The life the customer gets at the end]
## 2. One-liner
- Formula: "We help [character] get [outcome] so they can [success]."
- Example (fictional): "We help small business owners get their books done so they can grow without the stress."
- Your one-liner: [write it]
## 3. Homepage
### Hero headline
- Must name the character and the problem, not your company.
- Formula: "We help [character] [solve the problem]."
- Yours: [write it]
### Subheadline (the one-liner)
- One sentence that says what you do and who it is for.
- Yours: [write it]
### Two calls to action
- Direct: [e.g. Get your free quote] -> links to the offer
- Transitional: [e.g. See how it works] -> links to the plan section
### Trust line
- A short, concrete credibility note: [e.g. "CPA-supervised team", "free 15-minute audit", or the tools you work in]
## 4. Pain section ("You didn't start this to...")
- List three pains the customer recognizes: [1] [2] [3]
- Write each as a feeling, not a feature: [e.g. "Receipts pile up"]
## 5. Meet your guide section
- Empathy: [One line that shows you have been where they are]
- Authority: [One line that shows why you can help]
## 6. Three-step plan
- Step 1: [e.g. Free 15-minute audit]
- Step 2: [e.g. We clean up your books]
- Step 3: [e.g. Monthly close on autopilot]
## 7. Stakes section ("What happens if nothing changes")
- [The cost of doing nothing, written specifically]
## 8. Success section ("What you get")
- [The outcome, written as the customer's improved life]
## 9. FAQ (remove doubt, not fill space)
- [Q] -> [A]
- [Q] -> [A]
- [Q] -> [A]
## 10. Pages (keep the ones you need)
- [ ] Home
- [ ] Meet the guide / About
- [ ] How it works / Plan
- [ ] Offer page (one page per offer)
- [ ] FAQ
- [ ] Contact / final CTA
- [ ] Other: _____
## 11. Final checks
- [ ] The headline names the customer and the problem, not your company
- [ ] The one-liner is one sentence and fits in a subheadline
- [ ] There is one direct CTA and one transitional CTA
- [ ] The plan has exactly three clear steps
- [ ] The guide section has both empathy and authority
- [ ] Stakes and success are written, not implied
- [ ] Every page has one clear call to action
FAQ
Frequently asked questions
What is a StoryBrand website?
What does a StoryBrand website homepage look like?
What is a StoryBrand one-liner?
What is a BrandScript?
Do I need to hire a StoryBrand Certified Guide to build one?
Is StoryBrand a trademark?
What pages should a StoryBrand website have?
Where to go next
Build the copy with the template above, then lay out the sections using the website structure examples and website wireframe example pages. For the words themselves, the welcome message examples, website name examples, and website title examples pages cover the copy a StoryBrand-style hero needs. A StoryBrand page is still a business website, and the website proposal example page shows how to turn the message into an offer. When you are ready to build, the HTML website example page shows a complete one-file site and the static website example covers hosting it.