How to read this wireframe
Each section below is annotated with a "Why this section" note explaining its job, the StoryBrand purpose, and the content rules we apply. The pink callout boxes are notes for you, not part of the final website. The layout itself, with placeholder images and copy markers, is what your finished homepage will resemble. For the full framework explanation, see the StoryBrand Website Methodology Guide.
Section 1 — HeroWhy this section: The visitor has 5 seconds to answer three questions: what do you offer, how does it improve their life, what should they do next. Headline is 4 to 12 words and customer-focused. CTA is in first person ("Book My Discovery Call"), never third person. Visual shows the outcome, not the process.
[Optional pre-headline / industry tag]
[Customer-focused headline goes here] [Outcome they want]
[1 to 2 sentence subheadline. Focused on the transformation, not the company. Tells the visitor what their life looks like after working with you.]
[Reassurance line — "Free 30-minute call. No obligation."]
Hero image: aspirational outcome
Section 2 — Value propositionWhy this section: Three to five core offerings, framed as customer outcomes (not service names). "Get Found Online" beats "SEO Services". Each card has an icon, a 3 to 5 word headline, and one sentence of description. Goal: a visitor scans this in 3 seconds and grasps what you do.
What we do
[Section headline — outcome-focused, 4 to 8 words]
[Outcome 1]
[One sentence of customer benefit.]
[Outcome 2]
[One sentence of customer benefit.]
[Outcome 3]
[One sentence of customer benefit.]
[Outcome 4]
[One sentence of customer benefit.]
Section 3 — Problem (the most important section)Why this section: Customers do not buy solutions. They buy relief from problems. We name three layers — external (the surface pain), internal (the emotional frustration that actually drives buying), and philosophical (the unfairness). Lead with empathy. Tone: "Sound familiar?" Never condescending. Sit with the problem; do not jump to the fix yet.
Sound familiar?
[Problem headline that names what they are feeling]
[1 to 2 sentence intro that signals empathy. "If you are like most [audience], you have probably tried..."]
External
[The tangible, surface-level problem]
[What they see and experience day to day. Concrete. Specific.]
Internal (drives buying)
[The emotional frustration]
[How that surface problem makes them feel. Embarrassed. Stuck. Falling behind. THIS is the section that builds trust.]
Philosophical
[The unfairness]
["You should not have to..." or "It should not be this hard to..."]
Section 4 — Empathy statementWhy this section: One short, powerful line that proves you understand. The transition between the Problem section and the Guide section. "We believe you deserve..." or "You deserve a [thing] that actually [outcome]."
"[We believe you deserve a single, declarative sentence about the outcome they should be getting.]"
Section 5 — GuideWhy this section: Your business steps in as the guide, not the hero. Empathy first (60%), authority second (40%). Lead with understanding, support with proof. Numbers, retention rates, years of experience, certifications. Never brag. Quiet confidence wins.
Photo: founder, team, or process in action
Why us
[Empathy-led headline. "We get it."]
[Empathy paragraph. "We have worked with [N] businesses who felt exactly the same way..."]
[Authority paragraph. Specific numbers: years, projects, retention, results.]
[150+]
[Projects completed]
[98%]
[Client retention]
[10+]
[Years in business]
Section 6 — Trust signalsWhy this section: Logos of recognizable clients, certifications, awards. Borrowed credibility. Even 4 to 6 small logos can do more work than three paragraphs of marketing copy. Optional but strongly recommended.
Trusted by
[Section headline — "Trusted by leading [industry] businesses"]
[Logo 1]
[Logo 2]
[Logo 3]
[Logo 4]
[Logo 5]
[Logo 6]
Section 7 — How it worksWhy this section: A short, plain-language explanation of how your offering solves the problem you named earlier. Prose, not bullet points. Pairs naturally with an image of the product, the workspace, or the outcome.
How it works
[How does your service solve the customer's problem?]
[2 to 3 short paragraphs explaining the approach. Plain language. No jargon. Connects each step to a customer benefit.]
[Final paragraph that bridges into the Plan section: "Here is how we do it..."]
Section 8 — PlanWhy this section: Always exactly 3 steps. Step 1 is a low-commitment entry. Step 2 is "we do the work". Step 3 is the outcome. When the process feels complicated, visitors leave. The plan section makes it feel easy.
3 simple steps
[Plan headline — "How to get started"]
[Optional 1-sentence framing. "We've made it easy to get started."]
1
[Schedule a Call]
[Low-commitment first step. "Tell us about your business in a 30-minute call."]
2
[We Do the Work]
[Step 2 puts the work on you, not the client. "We design, build, and launch your new site."]
3
[Get Results]
[The outcome they wanted. "Start getting more leads, customers, and growth."]
Section 9 — Promises & guaranteesWhy this section: Reduces perceived risk. Three to four short, specific promises. Money-back guarantees, response-time commitments, support windows, anything that says "we have your back". Each one is a concrete commitment, not a vague claim.
Our promises
[What we commit to]
Promise 01
[Promise headline]
[One-sentence specific commitment.]
Promise 02
[Promise headline]
[One-sentence specific commitment.]
Promise 03
[Promise headline]
[One-sentence specific commitment.]
Promise 04
[Promise headline]
[One-sentence specific commitment.]
Section 10 — TestimonialsWhy this section: One strong testimonial does more work than four mediocre ones. Real names, real titles, ideally a photo or company logo. The quote should describe the transformation, not the service. "I felt X before, now I feel Y" beats "great service".
How Modern Pixel handles thisLive Google Reviews sync: If you have a Google Business Profile, we connect it to your site and pull your latest reviews automatically. New 5-star review on Google? It shows up here without you lifting a finger. Always fresh, always current, no manual updates needed.
No GBP? No problem. If you don't have a Google Business Profile (or don't want to use it), we use a curated set of static, always-present testimonials you approve up front. Either way, this section is never empty.
What clients say
[Testimonials headline]
Photo
[A real customer quote about the transformation. Before/after framing works best. 1 to 3 sentences.]
[Customer name]
[Title, Company]
Section 11 — What you get / Success transformationWhy this section: Concrete deliverables paired with the transformation. Specific over vague. "30% more leads in 90 days" beats "more business". Use present tense to make the future feel real: "Your phone rings with qualified leads."
What you get
[Outcome-led headline. "Imagine..."]
[Concrete deliverable or transformation outcome]
[Concrete deliverable or transformation outcome]
[Concrete deliverable or transformation outcome]
[Concrete deliverable or transformation outcome]
[Concrete deliverable or transformation outcome]
Outcome image: results, growth, transformation
Section 12 — Stakes & final CTAWhy this section: Two parts. First, 2 to 3 sentences of stakes (cost of not acting, framed as opportunity cost — never fear-mongering). Second, the final call to action. Direct CTA in first person, transitional CTA as a ghost button, reassurance copy underneath.
[Final stakes + CTA headline]
[2 to 3 sentences. Opportunity-cost framing: "Every day [problem persists], you lose [specific cost]. The businesses that [act] are the ones that [outcome]."]
[No pressure. No obligation. Free 30-minute call.]
Section 13 — Lead capture form (optional)Why this section: Some visitors will not click through to a separate contact page. A short form here captures leads who are ready right now. Keep fields minimal — name, email, phone, brief message. Every extra field reduces conversion.
Get in touch
[Form headline — "Let's talk about your project"]