50 Homepage Design & Headline Examples from B2B SaaS Websites

50 Homepage Design & Headline Examples from Effective B2B SaaS Websites

By Kevin Elliott on 2/10/23

Primary data source: The PLG List, Homepage Gallery

A familiar feeling hit me when I visited a SaaS homepage recently.

A smiling woman standing confidently with her arms crossed behind the only copy above the fold greeted me. The headline: “Everyday AI, Extraordinary People.”

image

My reaction?

I have no idea what Dataiku does. Much less, what it can do for me. I assumed it was another generative AI tool like ChatGPT. I was wrong.

It finally clicked after Dataiku hit me with retargeting ads. Dataiku’s homepage is part of a holistic marketing strategy. As a later-stage company with a horizontal product and $800M+ total funding, they can pull this off.

Startup homepages can’t afford to be this vague. Yet, many are.

On a mission to better understand the most effective go-to-market strategies in tech, PeerSignal recently released its free gallery of 2K+ SaaS B2B homepages, featuring over 600 PLG companies.

Informed by the insights and patterns from that homepage gallery research, this piece answers:

  • What makes a great homepage design and what should be on a SaaS homepage?
  • What unique homepage design trends are PLG companies trailblazing?
  • Why is homepage design important for SaaS companies?

To tackle these questions, we’ve curated 50 of the best B2B SaaS website homepage design examples with descriptions of why they work. But first, let’s go over homepage design basics.

What Makes a Website Homepage Design Good?

A good website homepage design achieves four things. Marketing Examined founder Alex Garcia calls this the Four-C Framework:

  1. Clarity about a single, high-level idea above the fold with a clear and specific headline.
  2. Context of the messaging to nurture visitors with a strategic content hierarchy.
  3. Helpful creative elements to reinforce the messaging via an intuitive user experience and strong visuals.
  4. A smart call to action to potential product users that compels engagement and conversion.

Let’s take a look at these four Cs in action, starting with the headline.

Headline

What makes a headline “good”?

After rewriting over 1,000 websites, Demand Curve determined a good headline is made up of three parts:

  1. Identify how users get value from your product
  2. Include a hook — to get them to keep reading
  3. Speak directly to your customer personas

All three of these elements demand clarity. Unsurprisingly, in their teardown of the Ahrefs homepage, for example, Demand Curve explains how the above-the-fold headline fits this model.

NOTE:
NOTE: Ahrefs has since updated its homepage. But I prefer this version.

“Rank higher and get more traffic” identifies how users get value and “You don’t have to be an SEO pro” uses objection handling as a hook and speaks directly to customers.

Subhead

A great headline might be the cornerstone piece of a homepage design, but without a supporting cast of copy as part of a well-articulated content hierarchy, you’re leaving it out to dry.

How you structure and write content blocks on your homepage matters. Supporting content provides context to readers and motivates them to take action when done well.

Typeform is an excellent example of complementing the headline with additional context, leveraging a tactic popularized by Copyhackers called PAS: Problem, Agitation, Solution.

image

Take a look at the subheader that reinforces the main headline from Typeform. Problem? “You don’t want to make a boring form.” Agitation? “And your audience won’t answer one.” Solution? “Create a Typeform instead — and make everyone happy.”

PLG companies execute supporting content that speaks directly to their audience like they’re people with predictable emotions. It’s smart because it works.

Typeform even sets up a logical hierarchy for their below-the-fold subheaders that guide their homepage visitors on a journey of discovery.

image
image
image

In order: Made for Humans. Designed to Impress. Built with Brains. It’s a narrative roadmap. And all roads lead to signups.

Design

Did you know webpages only have 50 milliseconds to make an impression on visitors? That’s how long it takes for people to make a snap decision in their minds about whether they like something.

That’s why it’s important to ensure you have a compelling design and intentional graphics on your homepage to complement your messaging. If the imagery doesn’t support the messaging, it subtracts from it.

image

I love AdRoll’s supporting graphic above the fold. It’s literally a revenue-making machine. This is what happens when you let a copywriter doodle ideas for a designer.

CTAs

Finally, the most influential part of a good homepage design is the CTA.

A great CTA bridges the gap between visitor, and user, reinforced by a UX that provides a simplified process and a clear path of next steps.

Successful CTAs provide “action to value” — offer or tease value that motivates action.

Let’s look at Freshbooks.

image

They’re going with a single-CTA method to draw attention to an annual sale at the top of their homepage.

The same and only CTA (the small blue button in the navigation bar isn’t clickable) appears two times in this view, once in a small dropdown menu and once in the hero section. They also feature varying anchor texts, “Buy Now & Save” twice and “Try It Free” once.

The CTAs all deliver clarity and promise value. Uniquely spread out and diversified amongst themselves, with only a main one in the middle of the page, they prompt action. And they all lead to a simple landing page (Pricing).

What Elements Should You Include on a SaaS Homepage?

A headline, additional content, a visual look, CTAs—we’ve reviewed descriptions and explanations of these best practices, but how do they fit into a wider framework for a SaaS homepage?

In other words, you’re now tasked with leading and project-managing the enormous company task of…*drum roll*…the HOMEPAGE REDESIGN.

What are all the elements to put on a homepage? How do you structure a website homepage?

There are no hard & fast rules here. But Emily Kramer of the venture fund MKT1 makes a pretty solid case for her basic homepage framework from her newsletter.

Source:
Source: MKT1

This information architecture for a sample homepage design is increasingly common because it simply works for many SaaS businesses.

So let’s break it down, in order. Here are the 7 elements to include on a SaaS homepage:

  1. Header navigation. Include links to primary landing pages and sign-in & CTA buttons.
  2. Hero section. Top-level messaging with optional images or visuals.
  3. Social proof. Show quotes or logos to demonstrate your credibility and your reputation.
  4. Benefits. Product images work well here, and discuss your points clearly.
  5. Use cases or personas. Introduce messaging that explains use cases and/or identifies your ICP.
  6. How it works. Simply explain the main functionality, and clear diagrams can help.
  7. CTA. Restate why someone needs your product.

Many of these seem intuitive. Others are often underappreciated or underutilized. Let’s look at two we haven’t discussed in detail yet: social proof and benefits.

Social Proof

Although social proof is now a best practice, it’s treated as a throw-in on lots of homepages.

That’s a shame because social proof can yield massive dividends when experimented with. For example, Clearbit increased its homepage conversion rate based on one testimonial. High-growth B2B SaaS companies Airtable, Chargebee, and Lattice are also prime examples for different reasons.

Airtable features a large section below the fold to tell a customer story. Case studies are an oft-forgotten type of social proof but are incredibly effective when presented well.

image

Speaking of leveraging customer stories, Chargebee does something brave: They feature a case study above the fold in their hero section, headline, image, and all.

image

It stands out and commands your website visitors see themselves in your best customers. Plus, you have to respect Chargebee’s decision to go against the grain.

image

Speaking of unique, Lattice goes down a similar path, with above-the-fold experimentation of social-proof collateral. What they lack in depth of scope they make up for with variety.

We see not one but two happy customers with smiling faces and a subtle “Rated #1” above the header, all above the standard row of company logos.

It’s a menagerie of social proof that becomes cohesive to website visitors. Now they can easily and quickly trust Lattice.

image

Benefits

Finally, what to do with the benefits section? It’s expected, almost necessary, but the basic “subheader with three bullet points each” might be a little run-of-the-mill.

Marketing agency Powered by Search suggests including a lead magnet as a CTA because they’re often missed opportunities to provide pre-purchase education for complex buying decisions.

image

Talkdesk, perhaps taking cues from Chargebee and Lattice, forgoes this tactic in the header section altogether and adds a downloadable lead magnet above the fold instead, even dedicating their primary CTA to it.

NOTE: Gong
NOTE: Gong has since updated its homepage. But I prefer the FAQs in this version.

Similarly, companies like Gong incorporate sales enablement CTAs above the fold on their homepage. Each takes you to a popup request form requiring a work email to continue.

Want B2B SaaS data and examples like this every week?

Join 14K+ sales and marketing professionals studying go-to-market strategy with us every Thursday. Bonus: we’ll send you our January 2023 PLG pricing analysis for free.

50 Best Homepage Design & Headline Examples for B2B SaaS Websites

Which SaaS homepage designs stand out and what unique observations can we glean from PLG ones? We’ve curated and cataloged dozens of examples and organized them by their strengths.

🏆
B2B Homepages with the Best Headline Copy

PLG companies aren’t afraid to talk to end users. Even if they’re not the decision-makers.

Sometimes blatantly, as is the case with LinearB when they say, “Hey Engineering Leader 👋” as part of their hero copy.

1. LinearB

image

Company Name: LinearB

PLG: Yes

Stage: Venture

Offers: Free Trial, Enterprise, Demo

Other times, by leading with the persona, as is the case with CometChat when they say, “In-App Chat for Developers.”

💡
Pro Tip: Call out your target audience by name

2. CometChat

image

Company Name: CometChat

PLG: Yes

Stage: Venture

Offers: Free Trial, Download/Install, Partners

💡
Proven Headline Framework: [Desire] - [Pain]

Lots of headlines feature copy techniques we’ve seen before, but PLG companies explore different and innovative rhetorical techniques.

Notion discusses a value prop on their homepage below the fold by introducing both a pro and a con. “Team up” highlights a benefit and “without the chaos” tackles a pain point.

3. Notion

image

Company Name: Notion

PLG: Yes

Stage: Established

Offers: Free Trial, Enterprise, Download/Install

image
💡
Pro Tip: Don’t bury the lede. Say what you do in the headline.

A good rule of thumb is to describe your product in the headline, spruce it up with a compelling hook, and speak directly to your ICP. Then clarify how it works in the subhead.

It’s a simple tactic, but some PLG companies value this simplicity, like Basecamp, JumpCloud, and RudderStack, below.

4. Basecamp

image

Company Name: Basecamp

PLG: Yes

Stage: Growth

Offers: Free Trial

5. JumpCloud

image

Company Name: JumpCloud

PLG: Yes

Stage: Established

Offers: Free Trial, Enterprise, Download/Install, Demo, Buy, Partners

6. RudderStack

image

Company Name: RudderStack

PLG: Yes

Stage: Growth

Offers: Free Trial, Free Plan, Enterprise, Download/Install, Demo, Partners

💡
Pro Tip: Take a stand

Headlines that take a stand don’t get ignored.

As you scale (think 1,000+ employees), messaging broadens. You sell to more people. You have a platform vs. a product. You start using dynamic text to say all the things, like Databricks, Figma, and Kajabi.

7. Databricks

image

Company Name: Databricks

PLG: Yes

Stage: Scaled

Offers: Free Trial, Enterprise, Open Source, Demo

8. Figma

image

Company Name: Figma

PLG: Yes

Stage: Scaled

Offers: Free Trial, Enterprise, Download/Install, Open Source, Buy, Partners

9. Kajabi

image

Company Name: Kajabi

PLG: No

Stage: Established

Offers: Free Trial, Enterprise, Download/Install, Demo, Partners, Product Tour

Other PLG companies create categories. Their stand? Pioneer the new and vilify the old.

Take a look at Loom’s and Maze’s headlines. The subtext of Loom’s stance is that meetings suck. Maze’s? Customer research takes too long.

10. Loom

image

Company Name: Loom

PLG: Yes

Stage: Growth

Offers: Free Trial, Enterprise, Download/Install

11. Maze

image

Company Name: Maze

PLG: Yes

Stage: Growth

Offers: Free Trial, Enterprise, Download/Install, Demo, Buy

💡
Pro Tip: Speak their language

The most impactful header copy resonates with readers emotionally. It unveils an anxiety they didn’t consciously know they had. It speaks their language.

Webflow encapsulates this perfectly, selling a website builder to marketers who aren’t web designers or coders.

12. Webflow

image

Company Name: Webflow

PLG: Yes

Stage: Established

Offers: Free Trial, Enterprise

Calendly and Retool stick to simple messaging that speaks to the pain points of their audiences. Want an easy life? Want a fast solution? Done.

13. Calendly

image

Company Name: Calendly

PLG: Yes

Stage: Established

Offers: Free Trial, Enterprise, Download/Install

14. Retool

image

Company Name: Retool

PLG: Yes

Stage: Established

Offers: Free Trial, Free Plan, Enterprise, Demo

💡
Pro Tip: Be counterintuitive

Sometimes it makes sense to say things that… don’t make sense. Being counterintuitive means being bold.

Fivetran (a top-10 fastest growing app of 2022) might have stolen PeerSignal’s arbitrary 2022 B2B headline award by leveraging this tactic.

15. Fivetran

NOTE:
NOTE: Header has since been updated. We still love the simplicity of this version.

Source: Fivetran

Company Name: Fivetran

PLG: Yes

Stage: Scaled

Offers: Free Trial, Enterprise, Demo, Partners

Curiosity Gap (Ask a Question)

💡
Pro Tip: Ask a question to create a curiosity gap

Grasp a reader’s curiosity and you’ve got them hooked. But leave an information gap? That’s how you get people craving more.

Asking rhetorical questions is a classic technique for creating curiosity gaps. There’s a reason the Socratic method works so well.

16. Valimail

image

Company Name: Valimail

PLG: Yes

Stage: Venture

Offers: Free Trial, Demo, Partners

17. CallRail

image

Company Name: CallRail

PLG: No

Stage: Established

Offers: Free Trial, Free Plan, Enterprise, Demo, Buy, Partners, Product Tour

18. Wasabi Technologies

image

Company Name: Wasabi Technologies

PLG: No

Stage: Growth

Offers: Free Trial, Enterprise, Buy, Partners

💡
Pro Tip: Make a (true) claim

There’s nothing hotter than staking an opinion (unless, of course, we’re talking about Wasabi Technology’s cloud storage from above).

It shows you’ve got nothing to lose. Be brave, after all.

You could opine about yourself, claiming you’re the best or that you offer the better way, as Asana and Linear do.

19. Asana

image

Company Name: Asana

PLG: Yes

Stage: Scaled

Offers: Enterprise, Download/Install, Demo, Partners, Product Tour

20. Linear

image

Company Name: Linear

PLG: Yes

Stage: Venture

Offers: Free Plan, Enterprise, Download/Install

Or you could call it as you see it, like Metadata does. Their opinion? Their solution has no B.S.

21. Metadata

image

Company Name: Metadata

PLG: No

Stage: Growth

Offers: Enterprise, Demo, Partners, Product Tour

Other opinions could be external-facing. Kiddom, the maker of education software, thinks that textbooks alone are insufficient for today’s modern world. Personally I miss quill and paper, but that’s just me.

22. Kiddom

image

Company Name: Kiddom

PLG: No

Stage: Venture

Offers: Enterprise

💡
Pro Tip: Poke the bear

By poking the bear, you address the core pain point you relieve or desire you fulfill. What’s that one elusive thing sleeping in the corner you want to wake up?

For example, ZenBusiness promises to help fulfill the dream of entrepreneurship.

23. ZenBusiness

image

Company Name: ZenBusiness

PLG: Yes

Stage: Established

Offers: Enterprise, Buy, Partners

Productboard wakes up a different desire. Don’t just ship a deliverable faster, but actually get it right, too.

24. Productboard

image

Company Name: Productboard

PLG: Yes

Stage: Established

Offers: Free Trial, Enterprise, Download/Install, Demo

💡
Pro Tip: Inject humor

Nothing stops me from bouncing from a website better than a good laugh. Some say it’s not professional for a B2B company to show personality, but we found a couple SaaS businesses making their own homepage rules.

Starting with Tyk. I have to admit, as a nerd, this headline made me chuckle.

25. Tyk

image

Company Name: Tyk

PLG: No

Stage: Growth

Offers: Free Trial, Enterprise, Open Source, Demo, Partners

You don’t even have to tell a joke. One similar tactic is what I call “Embarrass Your Mother” — say something eyebrow-raising.

A colleague of mine who’s a software engineer told me his biggest fear is “breaking shit.” Exact words.

I guess CodeLogic knows how to talk to their end users…

26. CodeLogic

image

Company Name: CodeLogic

PLG: No

Stage: Venture

Offers: Free Trial, Enterprise

💡
Pro Tip: Pick a fight

Don’t lie, you’ve always wanted to stir the pot.

If you’re afraid, why?

Think about it. Your product is already picking a fight. You’ve built a solution that solves a problem better than “the other guys.” The whole point of your product is to do better than “the other guys” have. Your content should reflect that.

How do Splash pick a fight? Coming out with some pretty big words, is how. Period.

27. Splash

image

Company Name: Splash

PLG: No

Stage: Growth

Offers: Free Trial, Enterprise, Demo, Partners, Product Tour

Moz is a little more subtle. In a flurry of SEO softwares—trust them, there’s a smarter way (and it’s them).

28. Moz

image

Company Name: Moz

PLG: Yes

Stage: Established

Offers: Free Trial, Enterprise, Demo

And Tiled dares to speak as if they're looking for a fight. Telling you your situation is a pain point before you even necessarily need to agree it is? Well played, Tiled.

29. Tiled

image

Company Name: Tiled

PLG: No

Stage: Established

Offers: Free Trial, Demo, Partners

💡
Pro Tip: Paint word pictures

Are you a SaaS website-content marketer who was an English major? This one’s for you!

Create word pictures. Use metaphor or vivid language to make the vague tangible or the mundane lively.

Apollo, Checkfront and Egnyte showcase word pictures on their homepage designs.

30. Apollo

image

Company Name: Apollo

PLG: Yes

Stage: Established

Offers: Free Trial, Free Plan, Enterprise, Download/Install, Demo, Buy, Partners

31. Checkfront

image

Company Name: Checkfront

PLG: Yes

Stage: Growth

Offers: Free Trial, Enterprise, Demo, Partners, Product Tour

32. Egnyte

image

Company Name: Egnyte

PLG: Yes

Stage: Established

Offers: Free Trial, Enterprise, Download/Install, Demo, Buy, Partners, Product Tour

🏆
B2B Homepages with the Best Positioning

As you transition to PLG or start growing after launching from a PLG model, your product expands with new features and integrations. You begin to offer a platform that does many things. Your solution, in short, is to be the world’s best in your area.

Some of the best examples of content on homepage designs reassure visitors that a platform is the world’s most effective solution, like 1Password does above the fold.

33. 1Password

image

Company Name: 1Password

PLG: Yes

Stage: Established

Offers: Free Trial, Enterprise, Download/Install, Demo, Partners, Product Tour

Stripe writes great below-the-fold copy to address one of their user segments. In a sea of API frameworks in the financial-infrastructure market, Stripe has the all-encompassing one.

34. Stripe

image

Company Name: Stripe

PLG: Yes

Stage: Scaled

Offers: Enterprise, Open Source, Buy, Partners

image

Other websites focus on a lot of clients’ northstar metric: revenue growth.

Many PLG companies tend to speak to end users, not buyers, so hyping up business benefits is increasingly less common on homepage designs.

But here’s the thing: In Martech and Sales tech, users are more likely to also be buyers or at least have individual KPIs fewer steps removed from company-wide OKRs.

Mailchimp leads with the business impact in the headline and reinforces the “how” above the fold with value props and features — appealing to the decision maker and end user.

35. Mailchimp

image

Company Name: Mailchimp

PLG: Yes

Stage: Scaled

Offers: Free Trial, Enterprise, Download/Install, Demo, Buy, Partners

image

Finally, I’d be remiss to not shout out how well ServiceTitan resonates with their users via their homepage content blocks.

36. ServiceTitan

image

Company Name: ServiceTitan

PLG: No

Stage: Scaled

Offers: Enterprise, Demo, Partners, Product Tour

Check out some of their subheaders. “Invest in your success.” “Build like the best in your industry.” “Confidence with every decision.” “Take control of your future.”

It’s like a masterclass in content writing that tugs at the emotional pulls and pushes of their buyers, ambitious small-business entrepreneurs neither necessarily business-savvy nor technically sophisticated.

Little wonder ServiceTitan managed to become one of only two non-PLG SaaS businesses to crack the top-10 on the Forbes Cloud 100 list.

🏆
B2B Homepages with the Best Designs

The best homepage website designs play with color. Color is important because different colors have specific psychological effects, impacting conversion rates by 10–50%.

Blue is still going strong. In fact, 19% of the SaaS sites in our dataset feature blue as a primary color. Though purple’s making a run. And it certainly pops as 9% use purple in their palette. Could Gong be the influencer? OG purple gradient?

After rebranding from Integromat, Make seems to think there’s no good reason for the purple gradient to ever die.

To be fair, we think it works for them. There’s no denying it helps their CTA button pass the squint test.

37. Make

image

Company Name: Make

PLG: Yes

Stage: Growth

Offers: Free Plan, Enterprise, Demo, Buy, Partners

Color gradients might be a longstanding trend hanging on stubbornly amongst SaaS homepage designs, but Karbon pushes a grayscale gradient to stand out.

Goodbye neon-pop. Hello to clean, crisp and sharp.

38. Karbon

image

Company Name: Karbon

PLG: Yes

Stage: Growth

Offers: Free Trial, Enterprise, Download/Install

But our favorite use of color? Probably Elementor, if for no other reason that it’s impossible not to make a splash in SaaS with pink. #SpalshInSaaS

39. Elementor

image

Company Name: Elementor

PLG: Yes

Stage: Established

Offers: Buy

Aside from color choices, we also see PLG companies increasingly use dynamic homepage designs thanks to the scalability of dynamic graphics and layouts and the increased functionality that dynamic designs yield.

But a few aren’t afraid to stick to more static homepage designs with minimalist aesthetics.

We had to know some would buck the trend. Static homepage layouts typically load faster in browsers, a huge SEO benefit, and are less likely to dilute the impact of your messaging.

One of my favorite static homepages? Favro kills it with their hero section.

Although there is some limited dynamic design below the fold, there’s no escaping the power of plain text above static CTA buttons with no images or graphics—let alone dynamic elements. It shows confidence.

40. Favro

image

Company Name: Favro

PLG: Yes

Stage: Venture

Offers: Free Trial, Enterprise, Download/Install, Demo, Partners

An impressive example of static homepage design comes from Miro. Impressive not just because they’re a fully scaled PLG business but also because they sell a visual-first, designer-friendly product.

You’d almost expect their homepage design to feature especially dynamic elements. Yet here stands their homepage, without an iota of animations, parallax-scroll effects or shifting class IDs in the code.

41. Miro

image

Company Name: Miro

PLG: Yes

Stage: Scaled

Offers: Enterprise, Demo, Buy, Product Tour

Of course, there is no shortage of SaaS homepages either executing common tactics of responsive design exceptionally well or trailblazing responsive designs altogether.

Ready for some cool GIFs?

Mural complements some poppy color choices with great responsive elements scattered throughout their homepage.

It’s a shame they buried their largest CTA at the very bottom of the page; it might take the cake for the coolest animated CTA in our whole dataset (wait for it).

42. Mural

image

Company Name: Mural

PLG: Yes

Stage: Established

Offers: Free Trial, Free Plan, Enterprise, Download/Install, Buy, Partners

And Framer employs some subtle yet attention-grabbing homepage-design techniques that deserve a look.

You first notice the parallax scroll around the above-the-fold CTA, but I particularly admire how they bring the “just design and…” & “...publish! 🚀” elements together not much further below. Even the rocketship emoji appears dynamically.

43. Framer

image

Company Name: Framer

PLG: Yes

Stage: Venture

Offers: Free Trial, Download/Install, Partners

And honorable mention has to go to Rapyd. Their homepage design is distracting as hell, yet I’m mesmerized nonetheless.

44. Rapyd

image

Company Name: Rapyd

PLG: Yes

Stage: Established

Offers: Enterprise, Partners

🏆
B2B Homepages with the Best Architecture & Navigation

The best examples of architectures and navbars in homepage designs anticipate and augment a visitor’s journey towards becoming a user, mapped to helpful content for each journey stage.

Mutiny updated their architecture & navigation recently, implementing some novel ideas we really like. Check out the differences below, with the new above the old.

They added dropdown pages from the navbar, building individual product pages by benefit & relabelling the section “How it works”; creating a “Use cases” section; bucketing case studies & Community under “Customers”; and designing a dedicated resources section called “Insights.” (And don’t overlook the addition of “...+ ROI analysis” to the “Get a demo” CTA!)

45. Mutiny

image

Company Name: Mutiny

PLG: Yes

Stage: Venture

Offers: Enterprise, Demo, Partners, Product Tour

Plaid earns a shoutout for how pleasant their navbar’s UI is and how intuitive its UX is.

Remember, your top priority when designing an architecture and a navigation is to make them both enjoyable and informative for visitors.

46. Plaid

image

Company Name: Plaid

PLG: Yes

Stage: Scaled

Offers: Free Trial, Enterprise, Buy, Partners

47. Canva

image

Company Name: Canva

PLG: Yes

Stage: Scaled

Offers: Free Plan, Enterprise, Download/Install, Partners

Lastly, Canva employs one unique tactic rarely seen: repackaging parts of their architecture into its own section on their homepage design, independent of their header navbar.

(And to say nothing of how comprehensive that navbar is—a whopping 93 links by my count, not counting the two CTA buttons!)

Best CTAs

What makes a great CTA on a homepage design? Whatever generates revenue… 😏

In all seriousness, there is no magic bullet for a foolproof CTA, least of all for all industries. If there were, everybody would copy it and then nothing would stand out!

We see product-led companies still feature dual CTAs below their headline—usually variations of “talk to sales” and “get started free,” like Snyk.

48. Snyk

image

Company Name: Snyk

PLG: Yes

Stage: Scaled

Offers: Free Trial, Free Plan, Enterprise, Open Source, Demo, Buy, Partners

But, interestingly, many of the big, fast-growth PLG companies include only one CTA below the headline, ignoring the longstanding best practice of the dual approach that emphasizes a primary one by juxtaposing it against a secondary one.

Are these companies, like Attentive below, on to something the rest of us aren't? (Also, ’ello yellow!)

49. Attentive

image

Company Name: Attentive

PLG: No

Stage: Scaled

Offers: Free Trial, Enterprise, Demo, Buy, Partners

Gong, however, is doing things we’ve never seen before: no CTA at all in their hero section.

A subtle sticky CTA, identical to their header-navbar CTA for a demo request, appears in the bottom-right corner. Otherwise, visitors have to scroll slightly below the fold for the trio of an additional demo request, a quote request and a product-tour request.

Are they compensating for an abundance of CTAs by not emphasizing any one CTA in the hero section? Whatever the intention, we’re including them on this best-of list for the sheer novelty of the approach, if nothing else.

50. Gong

image

Company Name: Gong

PLG: No

Stage: Scaled

Offers: Enterprise, Demo, Partners

Why Homepage Design is Important for SaaS Startups

Your homepage is free advertising (okay, not literally free, but you get the idea). When done right, it can drive revenue more cost-efficiently than paid promotions.

Stewart Hillhouse, Head of Content at Mutiny, the SaaS company with playbooks mentioned above that summarize tests on clients’ websites, articulates this importance well.

“Homepages tend to get more traffic than any other page,” he said to us, “presenting an underrated opportunity to test new messaging, offers and CTAs quickly and effectively.”

How so? As Hillhouse explains because of the high traffic volumes, “you can identify and prove which elements convert visitors into leads then scale those elements to lower-traffic pages.”

This shows how important homepages are for efficient growth. “Your website can be a data-backed testing ground for entering new markets or industries without any capital investment,” Hillhouse concludes.

PLG businesses and successful SaaS companies transitioning towards product-led growth benefit from smart homepage-design decisions in multiple ways. Let’s review them.

4 Benefits of Effective Homepage Design

1. Increase Conversions

SaaS & PLG businesses leverage a strong homepage design to attract users. Gone are the days of sales-led teams doubling down on outreach to compensate for website shortcomings.

By pinpointing the causes of stagnant conversion rates, you can scale how many users you attract into your ecosystem — your homepage is just a gateway.

Many B2B companies design homepages that rely too heavily on branded traffic, creating a missed opportunity to compel your target audience towards action, thus hurting conversions.

With strategic content hierarchies, user experience, design elements and more, your homepage can drive engagements more effectively.

2. Optimize Brand Credibility

Your homepage is your most important website asset. It’s the hub of your whole website and where visitors (potential users!) judge your brand when deciding to sign up.

A credible reputation is thus everything. People are more likely to adopt your product if they trust your brand. Great homepage designs inspire brand loyalty and help PLG companies scale.

3. Establish Relevance With Your Audience

The best homepage designs communicate right fits. When strategizing homepage messaging, you want visitors to envision themselves as users.

PLG companies write for those who will utilize their solution because adoption is the name of the game (hence “users” over “customers” in my diction).

To drive this point home, Mutiny offers excellent website-design playbooks to help craft homepage content effectively, including one about the importance of website content that enables your target audience to identify themselves to improve conversions.

This doesn’t need to be complicated either. Sometimes subtle product positioning makes all the difference. For example, Wynter CEO Peep Laja breaks down how Kalviyo distinguishes themselves from Mailchimp by identifying their ICP on their homepage with “ecommerce.”

image

4. Improve SEO

Well-designed SaaS homepages help improve search-engine rankings for any company but there’s an added motivation for businesses trying to scale via PLG.

Consider the case study of Twilio as Kyle Harrison of the venture fund Contrary observed. Twilio’s market cap recently dropped to around $8 billion from a peak of about $70 billion!

Why? Their gross profit margins lag behind comparable companies like Atlassian, Cloudflare and Datadog by a solid 25–35 percentage points.

In the PLG world, efficient growth is more valuable than “growth at all costs.” Thriving at SEO with a robust website homepage helps scale revenue while keeping CAC in check since you won’t have to depend on other channels like paid advertising as much.

Next Steps

A good homepage design captivates your audience, communicates a value proposition, shows off your company’s reputation and, most importantly, generates sales.

The four elements of a great homepage are a strong headline, helpful subheaders & supporting copy, a mesmerizing visual design & layout and a CTA that actually creates signups.

If you nail these elements, you’ll have a website homepage your competitors might envy.

Explore 2K+ B2B homepage examples in our free SaaS Homepage Gallery

image