SaaS Website Hero Trends: A Study of 600+ Websites

While most companies consider the website home page to be the “front door” of your business for most companies, it’s especially true for SaaS websites.

Companies using the “software as a service” model have a vested interest in keeping their websites up to date and attractive because they don’t have a retail storefront for customers to visit.

I wanted to get a better take on what home pages looked like for the modern SaaS website and what design elements companies were using to offer value and boost conversion rates.

I took a look at over 600 SaaS website home pages and the hero sections on their website (the first section right below the menu bar on the web page) to see what I could discover.

Here are the results.

Key Takeaways

• Most SaaS websites use between 21-30 words in the hero section to describe their product or service.
• About 80% of SaaS websites have a call to action in the website hero section.
• 25% of SaaS websites have more than 1 call to action in their hero section.
• Nearly 87% of SaaS websites use text in the hero section as a primary tool to get their message across.
• Roughly 66% of SaaS websites use a still image in the hero section to accompany their primary element.
• “Demo” and “Free” were the most common value proposition words in SaaS website calls to action.
• 85% of SaaS websites visited didn’t have pop-ups.
• Nearly 75% of the pop-ups encountered on SaaS websites were chatbot pop-ups.
• 87% of SaaS websites use HTTPS protocols.
• 54% of SaaS websites contained between 1 and 5 internal links on their home page.
• Almost 50% of SaaS websites contained between 1 and 5 unique outlinks to external websites.

Text Still Matters Matters Most

Despite the proliferation and visual appeal of images and video, nearly 87% of SaaS websites use a text element in the hero section as a primary tool to explain their product to customers.

The vast majority of the websites I looked at use between 21 and 30 words to describe their SaaS product and address the pain point that it solves.

Often, the primary text element is accompanied by an image (66%) or a video (15.6%) to add visual appeal or reinforce the value proposition that the text element is trying to deliver or the story that the brand is trying to tell. The best SaaS website designs that I saw utilized custom graphics rather than outmoded stock images to create an immersive and on-brand user experience.

Conversely, about 5%* of websites embrace minimalism as part of their approach. These websites relied on white space or colored backgrounds to highlight their primary value proposition and trusted the weight of that element (usually text) to get their point across.

*In the graph, you’ll notice that there’s a “No Secondary Element” which accounts for about 11.9% of cases. The majority of these cases were actually sliders. Since a slider is a single element comprised of multiple elements, it wasn’t counted in this space.

A Call to Action Primes Readers Early

Being specific about what you want customers to do can save them a lot of time when they visit your website. That’s one reason that a call to action is a great design element for the hero section.

About 80% of SaaS websites use a call to action (CTA) in their hero section in an attempt to convert visitors immediately or inform them of the next step that they should take.

However, nearly 20% of websites aren’t taking advantage of CTAs in their UX design. While many of these websites use text and visual appeal to explain their value proposition, their customers can only discover the next steps by scrolling down the page and exploring the product.

The number of CTAs in the hero section in SaaS web design varies between companies. About 46% of hero sections contain a single button CTA and another 23% used two buttons in an attempt to give readers options.

Often, one button invites users to contact the company while the other button leads to an element that the company considers valuable for the reader, like a case study or a pricing page.

A slim number of websites even leverage a signup form as one of their main CTA elements, usually for email marketing.

SaaS Companies Want to Demo the Product

Overwhelmingly, B2B SaaS companies want the opportunity to show prospective customers how their product works — so often, in fact, that the word “Demo” was the most common word in hero section CTAs.

Many companies presented alternatives, usually in the form of a free trial or by adopting a freemium business model designed to bring users in at an entry-level before trying to move into higher tiers on the pricing table.

However, this wasn’t always the case.

Some companies only offered screenshots, a peek at the user interface, or a flashy marketing video aimed at showing off their SaaS design before prompting the user to pay for their software.

Chatbots Are the New Pop-ups

Roughly 86% of SaaS websites display no pop-ups on the home page. Neither the quality and complexity of the website nor the scale of the business impacted the results.

While traditional pop-ups only accounted for 25% of the pop-ups encountered, they varied from website to website. Some pop-ups wait for a set amount of time or a user to scroll to the bottom of the page before activating. Many pop-ups trigger as soon as the website loads, forcing users to exit the pop-up before reading the fundamental value proposition and pain point that the company is trying to address.

Chatbot popups, responsible for a full 75% of pop-ups, were markedly consistent. These pop-ups are a direct result of commercial chatbots designed to give users instant access to common questions and support documentation. They trigger instantly as the website loads and float in the bottom-right portion of the screen until manually closed.

On desktops, these chatbots aren’t obtrusive. Often, they appear in the white space, well away from the text. On mobile devices, however, these chat bubbles can interfere with a seamless browsing experience.

As with traditional pop-ups, chatbot pop-ups are a design choice. Many companies use the same chatbot platform, and the pop-up feature can be disabled for users on the back end.

SaaS Websites Are (Mostly) Secure

Over 88% of the SaaS websites visited during this case study were using HTTPS to secure their transmitted data.

Considering the shift in recent years to HTTPS due to security and confidentiality concerns this result would be a surprise if the websites visited weren’t SaaS businesses.

However, I feel that this number should be higher.

SaaS companies capture personal information, payments, and other essential user information through their website in order to sell a product to users.

Given the sensitive nature of the data sent and received through the network, HTTPS should be standard in any SaaS web design project.

Modest Inlinks and Outlinks

While both inlinks and outlinks are ranking factors in SEO, they’re also critical to the user experience.

Links on a business home page give customers the ability to explore the site and give brands the opportunity to link various social media platforms and partner websites that prospective customers might find valuable.

On the whole, about 78% of SaaS websites have between 1 and 10 internal links on their home page. These inlinks send users to other pages, like “About/Our Team” pages, pricing pages, or landing pages for case studies and other lead magnets.

Rather than looking at the total number of outbound links, I wanted to know how many unique websites that SaaS brands were linking to on their home page.

By the numbers, about 70% of the websites visited supported links to between 1 and 10 other websites. Many of these links went to social media brands, but I also found links acquired through customer testimonials or business partnerships.

Conclusions

Anyone familiar with web design will tell you that the hero section is one of the most important parts of the user experience. There are a few reasons for this:

1. The hero section is the true first impression of your website. It’s the very first thing that viewers will see, and it’s the one element that almost everyone will read — even viewers with short attention spans — before they close the window.

2. Every website handles the hero section differently. Some companies invite customers to explore. Others place a CTA, case study links, customer testimonials, or email marketing signups in this high-value space.

3. Specifically for SaaS sites, the hero section usually tries to explain the product and address a pain point quickly. Some SaaS businesses do this better than others.

There are other components to a great SaaS website that we’re not covering here that are essential to converting visitors.

While it can be done in a variety of different ways, getting the hero section right is just one step in the right direction.

However, from the copywriter’s perspective, one thing is very clear: Finding the right words for your website really matters. If you’re having trouble getting your point across in a limited space, be sure to get in touch!