A website is for SaaS what packaging is for offline products. We can pretend to be rational beings, but more times than not, if the packaging is ugly, unclear, and not on brand, we’ll not buy the product.
“Do not judge a book by its cover” might’ve been true in the 19th century, but nowadays? I say if you want me to read the book, you better invest in the cover, in-store positioning, and some PR.
But back to SaaS. Your website will often be one of the first points of contact your prospects will have with you. According to research, it takes an average person 3 seconds to decide if they’re attracted to someone or not. It would be interesting to do similar research on websites. I reckon the results would not be that difficult.
In a few seconds your prospects will most likely decide whether you look:
Trustworthy or Sketchy
Serious or Fun
Modern or Traditional
Clear or Confusing
Additionally, 70-80% of people research a company online before visiting it or making a purchase.
But as always, execution is the key. So what is it that makes a good SaaS website? To answer this question I went to study the best. I took a detailed look at websites of the 10 fastest growing SaaS companies of 2020 according to SaaS Mag:
2Checkout (verifone)
I looked for similarities, themes and I tried to come up with a template based on what most of them had in common. Here’s the result:
Start with the end
When conceptualizing a website, you first need to answer the 2 most important questions in web development:
Who is the website for?
What do you want them to do?
Do you want more hires? Are you raising an investment round? Do you want to drive sales through trials or demo calls? Answer this and make sure to keep it in mind as you conceptualize and design the rest of your website.
Now let’s take a look at what a perfect SaaS website looks like (in theory) from top to bottom.
Sticky navbar
This one is hardly a surprise. 8 out of 10 websites had this feature and I feel the last 2 were more of an oversight than a conscious design decision. There’s indeed a lot to love about the sticky navbar:
Brand awareness: With the logo commonly being a part of the navbar, making it sticky increases brand exposure.
Convenience & Curiosity: Keeping the navbar handy encourages visitors to explore different parts of the website.
Increased conversion rates: Primary CTA should always be a part of the navbar. Once you make your navbar sticky, your primary CTA will always be on top of your customers’ minds.
Short, action-oriented heading
While researching websites of the top 10 fastest growing SaaS businesses of the last year, three distinctive patterns emerged.
Action-oriented heading: This is the kind of copy that prompts you to take action. It challenges you to do, have or achieve more.
Heading driven by sentiment: These headings paint you a word picture of what could be. They can be tied to benefits, but the copy also works if it’s more about the challenge your product solves, or what might be the emotional outcome of using the product.
Factual headings: Perhaps the most overlooked kind of copy. Also the simplest. But then again, simplicity can be hard to achieve. This type of copy states, in an unobtrusive and unpretentious way, what the product or the company does. I know, shocking, right?
There’s no right or wrong answer here. Learning how to communicate your product is a process that takes time. When I first started as the CMO of Nicereply, I leaned heavily towards action-oriented copy.
After a while, I discovered that customer support managers cared very deeply about the outcome of their work and I tried to introduce some sentiment into Nicereply’s brand communication.
While it makes sense on paper, after 2 years of testing I’ve uncovered that the best performing copy was the factual one and thus we ended with a simple messaging of “CSAT, NPS & CES surveys for support teams”.
Also, try to keep your heading as concise as possible. 7 out of 10 analyzed websites had only around 30 characters in their heading.
Subheading to clarify
If your heading is the WHY (yeah I like to sneak in a little “Start with the why” every now and then), then the subheading is the HOW and WHAT. This is the place to briefly describe what your product actually is and how it works.
Alternatively, if you chose the factual route and used your H1 heading to describe your product, talk more about the benefits of using it.
Social proof
8 out of 10 websites had social proof placed above the fold. You want to include visuals that will boost your credibility and build trust, such as:
Logos of customers
Number of customers
Testimonials
Review portal badges (G2Crowd, Capterra, Trustpilot…)
What you’re trying to achieve is “pre-selection”. If I see many similar businesses are using this tool, I already perceive it as more desirable. Keep your ideal customer persona in mind, though. As a CMO of a small SaaS company, seeing Adobe listed among customers of a product served to give me doubts, whether the product might be a good fit for a company of our size.
Don’t bother with product screenshots
Again, 8 out of 10 companies chose not to display their product above the fold. Complex products can be hard to capture in the limited space of a website header, and even for simpler products, it might be too soon to go as deep as showing a real screenshot.
CTA (Call To Action)
Remember that main goal you’d like your visitors to reach? Well, it’s time to get back to it. Every website needs the primary CTA. Whether it’s a free trial, demo booking, or a download, make sure to display it above the fold.
The “How it works”
This is the part where you tell your prospects how you do all that fancy stuff you mentioned before. Most often by listing the following:
Features
Benefits
Integrations
Use-cases
There are 2 popular ways to do this:
Listing features block by block
You can create what I like to call a “block” to describe each feature or benefit of your product.
Pros: Prospects are immediately exposed to every feature you’re choosing to display. The format also forces you to be more concise with what you say.
Cons: It takes a lot of space. The longer your website is, the fewer people will keep scrolling.
Multiple features in one block
By creating a dynamic web element, you can list multiple features in one place, allowing visitors to simply list through them.
Pros: You fit in more information, while your page stays shorter. Displaying only one feature at a time also allows you to go more in-depth when explaining it. This layout also allows for larger visuals.
Cons: While it sounds great, there’s a significant downside to this approach. Attention. If you design your page in a way that doesn’t draw enough attention to the interactive element, visitors may simply ignore it, thus not exploring any of the following features.
Features or Benefits?
Sales wisdom tells us not to talk about what the product does, but how it helps the customer. In practice, this often leaves me frustrated when reading through a website that promises to “increase conversions” and “kickstart lead-gen”, while not having a clue what I am actually reading.
The rule of thumb however seems to be “The more complex the product, the less you should show it”. Out of 10 analyzed websites, only 2 showed their product, with the other 8 focusing more on the value that customers receive from it.
The final CTA
This is it, everyone. Every line of copy, every pixel, every line of code has lead to this moment. It’s time to convert our visitors.
Paint a word picture of the main benefit your product brings. If you have some impressive stats, this is the time to use them. Also, don’t hesitate to reuse those logos, reviews, and other pieces of social proof from before. Don’t leave anything to chance.
(Don’t) Update your website
Before you run off to plan the overhaul of your website, ask yourself these questions:
Is it necessary?
Are my conversion rates (or other KPIs) low?
Are customers confused by our current website?
If you answered no, I’m strongly advising you to not do a website overhaul just for the sake of it. Some of the websites I analyzed here weren’t pretty. Is that a problem? Not really, as long as they get the job done.
If, however, you answered yes, then go ahead. Doing a website redesign can bring great results, and with the right team, it can also be a lot of fun. Try to do it smartly, though. There are 2 ways to proceed here
Complete overhaul: You tear down everything and create a new website from scratch with an entirely new structure and subpages.
Cascading updates: You only update what needs to be changed, continuously evaluating and updating your pages as they get obsolete.
I have experienced both approaches and I’m a firm supporter of the latter. It gives you more flexibility and it’s a much more sustainable way to work with your website.
If you’d like me to help you with your website, reach out to me at jakub.slamka [at] gmail.com. If you’d like to read more stuff by me in the future, I’d be happy if you joined my mailing list below.