Homepage wireframing & copywriting

‍The foundation for your homepage

• Map your messaging guide to each section of your website.
• All parts of your positioning need to be turned into web copy.
• Finesse the copy: Make sure each section makes a unique point on its own, but also flows with the rest of the page. 
• Depending on traffic you can run an a/b test if you make homepage messaging changes. Regardless, a good way to measure success of messaging changes is by looking at conversion rates.
• Remember: You don’t need to say everything on your homepage. Speak to immediate pain & differentiate.
• Remember: Positioning > messaging > web copy.

Before you start working on your homepage copy:

1. Do basic audience analysis, persona development, and competitive analysis that maps out where you fall in the ecosystem.
2. Have positioning and messaging that identifies what your product replaces and provides top level messaging building blocks.

Follow the steps below to create your homepage. Use our homepage copy template to map out your sections.

For more on positioning and messaging, read this article.

Step 1: Plan your layout / sections

How to make pages: identify reusable sections. Get buy-in on these before moving to step 2.

• Top nav: Includes links to the product page, resources, pricing, etc. Plus a sign-in link and primary CTA button.
• Hero: Include top-level messaging building blocks and (optional) product screenshot, diagram or video.
• Social proof: Usually logos, sometimes logos + quotes. Include a heading that describes who your customers are.
• 2-3 benefits sections that include product images (stylized or screenshots; static or animated).
• Use case and/or persona section (optional), include 1 or both of these:
• ~3 use cases in one section and how you do those use cases in your product, usually with links to separate pages on these use cases.
• ~3 different audiences or ICPs and how these personas benefit from the product, with links to pages for these audiences.
• How it works section (optional): preferably including a clear diagram.
• CTA Bar: Restate why someone needs your product now, with a primary CTA button. This should always be right above the footer.

Note: The order of the sections between the hero and CTA bar is flexible, whatever works best for telling a cohesive story.

Step 2: Add copy to each section

Now take the messaging building blocks you’ve already gotten buy-in on and turn it into copy and content section by section.

Hero section

• Use the headline plus the descriptive paragraph underneath to cover your top-level messaging building blocks: problem you solve, product solution, who it’s for, and why it’s better.
• Don’t add too much copy or too many CTAs in this section, your conversion rate will suffer.

Social proof section

• Often the headline in the social proof section of your website is wasted, it will say something like “Companies love us”.
• Get more specific in the copy and include your “who it’s for” again, e.g. “Top GTM teams love Pocus”, “Join thousands of developers using CodeSee”
• Whether you include quotes, logos, or both, use this section to build credibility and make visitors feel like your product is specifically for them.

Benefits with proof points sections

• You should include 2-3 benefits sections with similar layouts.
• Note: People get hung up on the semantics of “benefits”, “features”, and “value props.” Don’t worry too much about this.
• Focus on the value or outcome your audience will get from your product. ~3 sections & make it flow…
• Your 3 benefits combined should be differentiated from competitors.
• Each benefit should contain proof points underneath, in paragraph or bullet form.
• Proof points can be features or stats.
• It’s helpful to include product shots here, whether stylized screenshots or gifs.
• We prefer screenshots over illustrations or photos in these sections because the visual context serves as an additional proof point.

Use cases or personas section (optional)

• In this section, include descriptions of ~3 use cases or descriptions of ~3 different audiences or ICPs.
• This section should give a deeper dive into what your product is and explain how your product works for different audiences or use cases.
• You can then link to the audience or use cases pages with more details.
• Don’t worry about having all these additional pages built out for your initial website launch, make them fast follows.
• If you have multiple personas (ICPs) this section can be a really helpful way to route secondary audiences to the right place and avoid trying to speak to everyone on the homepage.

How it works section (optional)

• In addition to a section on use cases, it can be helpful to have a how it works section with a diagram.
• When you have multiple personas, use cases, or workflows it can be helpful to explain and link to other more specific pages.
• 3 column, 1 row layout works well here.
• This is especially the case if your product is complex, integration-heavy, for developers, or in a brand new category (you don’t replace an existing technology).
• If it is complex, in a new category, for developers, or involves many stakeholders, use a diagram!

CTA bar at the bottom

• Just above your footer, you need another CTA section.
• This section is simpler and smaller than your hero, but restates your overall messaging and focuses on why someone should click your request demo or sign-up button immediately.
• Remember to use this CTA to create urgency.

Step 3: Finesse your copy

You’ve figured out what sections of content you’ll have on your website, you’ve used your messaging building blocks to create rough copy and visuals for these sections, now you need to finalize copy and ship it.

For more on writing effective copy, read this article.

Web copy examples

Check out our library of over 50+ web copy and content examples.