A StoryBrand website is a homepage where the customer is the hero and your business is the guide. Your business, as the guide, hands the customer a plan. The page follows the StoryBrand Seven (SB7) framework from Donald Miller's book Building a StoryBrand 2.0. The page names what the customer wants and the problem in their way. Then it shows why you can help, lays out three steps, and offers one button.
Below is the homepage wireframe (the section-by-section layout) we use when a client asks for this kind of site. We go one section at a time and name the mistake each section invites.
- Key facts
- The book: Building a StoryBrand 2.0: Clarify Your Message So Customers Will Listen, a revised edition of Miller's 2017 bestseller. The publisher says the original sold over one million copies.
- The framework: seven story parts that map onto a sales message.
- The risk: sameness. Fill the wireframe in from a template and your site reads like every other StoryBrand site.
What is the SB7 framework?
SB7 is a seven-part story structure. It turns your marketing into a short plot where the customer, not your company, is the main character. Miller built it on how films and novels hold attention. The method's official home is StoryBrand, his company.
Here are the seven parts in our own words:
- A character. Your customer, who wants one specific thing.
- Has a problem. Something stands in the way. Miller splits it into the external problem (the leaky roof), the internal one (the worry it causes) and the philosophical one (it shouldn't be this hard).
- Meets a guide. That's you. You show you understand the problem and that you've solved it before.
- Who gives them a plan. A few simple steps that make buying feel safe.
- And calls them to action. A clear button, plus a softer option for people not ready yet.
- That helps them avoid failure. What it costs to do nothing.
- And ends in success. What life looks like once the problem is gone.
The idea most people take from the book is the swap in step 3. Most homepages talk about the company: our history, our values, our team. The framework says the visitor doesn't care yet. They care about their problem, and they will listen to whoever seems to understand it.
Miller puts the book's purpose bluntly. "The problem with the world today is that the wrong people have the microphone," he said in the publisher's release announcing 2.0. His point: good businesses lose to louder ones when their message is unclear.
What does a StoryBrand homepage wireframe look like?
The homepage is a vertical scroll of about nine sections, each tied to one story part. A visitor who stops anywhere still knows what you offer and what to do next. This is the order we use:
| Section | What it does | What goes there | Common mistake |
|---|---|---|---|
| 1. Header (one-liner) | Tells a stranger what you do in five seconds | One sentence naming the customer, the problem and the result, plus one direct button ("Book a call") | A slogan instead of a sentence ("Elevate your potential") |
| 2. Stakes | Shows the cost of doing nothing | Three short pains your customer already feels, in their words | Fear-mongering, or stakes so vague they could apply to anyone |
| 3. Value | Shows the success side | Three to five outcomes the customer gets, not features you have | Listing services ("SEO, Branding, Strategy") with no result attached |
| 4. Guide | Earns trust | One line of empathy, then proof: logos, review count, years, a named result | Making this the "About us" story, with the company as hero |
| 5. Plan | Makes buying feel safe | Three numbered steps from first contact to result | Seven steps, or steps that describe your internal process |
| 6. Explanatory paragraph | Helps search engines and slow readers | A plain paragraph that restates the story with the words customers search for | Skipping it because "nobody reads text" |
| 7. Transitional offer | Catches people not ready to buy | A free guide, checklist or tool in exchange for an email | A newsletter signup with no reason to subscribe |
| 8. Price or packages | Answers the question every buyer has | Two or three options, or a starting range | Hiding price entirely, which sends buyers back to the AI answer |
| 9. Footer ("junk drawer") | Holds everything else | Navigation, contact details, careers, legal | Repeating the whole menu and burying the main button |
Three rules hold it together.
One direct action, repeated. The same button appears in the header, after the plan and near the price. Two competing buttons in the header split attention.
Customer words, not yours. The stakes and value sections only work if they use the phrases customers say on sales calls. "We were embarrassed to send people to our site" beats "suboptimal digital presence".
Proof sits next to the claim. If the header says "more booked jobs", the guide section shows a client who got more booked jobs.
How do you write the one-liner for the header?
Write the header as one sentence with three parts: who it's for, the problem they have, and the result you deliver. Then cut every word that a competitor could also say.
A quick test we run: read the line aloud and swap in your closest competitor's name. If it still works, it isn't specific enough yet. "We help Toronto dental clinics fill empty chairs with patients who found them on Google and ChatGPT" fails the swap test for a generic agency.
The direct call to action goes right under the line. One button, one verb, one result: "Get a free site check", not "Learn more".
What changes when AI answers come before the click?
When ChatGPT or Google's AI answer introduces you first, the homepage stops being the first impression and becomes the place where the buyer checks the claim. The same structure still fits that job. It matters more now, because fewer people arrive.
Kinsta, a web hosting company, surveyed 1,008 American consumers and published the results in September 2026. Of those, 44.7% always or mostly visit a company's website after an AI tool recommends it. And 61.1% judge the product by the quality of the website (Kinsta). We covered what that means for the click in Does Your Website Matter in AI Search?.
For a story-led homepage, that changes three things.
The one-liner has to match what the AI said. Say an assistant described you as "a family law firm in Mississauga". If your header says "Justice, delivered", the buyer has to guess whether they landed in the right place. Use the same plain words an answer engine would use.
The explanatory paragraph matters more. Most templates for this style treat it as optional. Yet this plain, specific text is what AI systems read to decide what you do. Keep it, and put real facts in it: services, city, who you serve.
Price and proof can't hide. A buyer who already read an AI summary clicks to confirm two things. What does it cost? Do real people use you? If the homepage can't confirm either, they go back and ask about the next name on the list.
The structure of the page matters too. A template theme can carry this copy, but it often limits the structured data and page speed that help AI tools read you correctly. We explain that trade-off in Why Custom Web Design Beats Every Template in the AI Era. If your site already gets traffic and still doesn't convert, start with Why Your Enterprise Website Converts at 1%, which covers fixes that don't need a redesign.
Where do StoryBrand websites go wrong?
In our view, these sites go wrong when the framework is filled in instead of thought through. The wireframe is a checklist for clarity, and your voice has to come from somewhere else.
We see five failures most often.
| Failure | What it looks like | What to do instead |
|---|---|---|
| Sameness | Every site opens with a headshot, a three-icon stakes row and "Here's how it works" | Keep the order, change the form. A plan can be a timeline, a short video or a single photo with captions |
| Templated copy | Phrases lifted from worksheets: "You deserve...", "Imagine a world where..." | Write from sales-call notes and reviews. Real customer quotes beat any formula line |
| Invented stakes | Drama the customer doesn't feel ("Don't let your business fall behind!") | Name the specific cost: lost bookings, staff time, a missed deadline |
| The guide disappears | So much focus on the customer that there's no evidence you can help | Give the guide section real numbers, names and work samples |
| One page for every visitor | A firm with four very different buyers forces them into one story | Use the homepage for the main buyer and give the others their own pages |
Graham Mann, a writer, keeps detailed notes on the book. He names the risk: "Apply SB7 too literally and every site starts to sound identical, which is its own kind of noise" (Graham Mann's book notes). We have seen the same. The framework tells you what each section should do. It doesn't tell you what your business sounds like, and that part is still your job.
The framework also leaves out a few things a homepage needs: page speed, accessibility, structured data and mobile layout. A clear message on a slow page still loses the visitor.
StoryBrand itself sells workshops, a free course and done-with-you programs on its official site. If you want the method straight from the source, start there.
Is a StoryBrand website right for your business?
A StoryBrand website suits most service businesses with one main buyer and a clear problem to solve: trades, clinics, law and accounting firms, B2B services. It fits less well when people buy on taste, like fashion or art. It also fits less well when the buyer is technical and wants specs first.
| Business type | Fit | Why |
|---|---|---|
| Local service (clinic, trades, law firm) | Strong | One buyer, an urgent problem, a simple plan to explain |
| B2B services and consulting | Strong | Long decisions reward clear stakes and a low-risk next step |
| SaaS with a technical buyer | Partial | Keep the one-liner and plan; lead with product detail sooner |
| Fashion, art, hospitality | Weak | Mood and brand carry the sale more than a problem-solution story |
| Multi-audience enterprise | Partial | Works per audience page, not as one homepage for everyone |
Next step
If you want to see how your current homepage holds up against this wireframe, run a free site check. Build prices are on our pricing page.