How to build a great SaaS website: Science-backed fundamentals
By Harsh Vardhan
Regardless of the product or the target customer, the homepage of your SaaS website is much often the user’s first interaction with your brand.
Most users’ brains will register your homepage as a lasting image of you and your product — you certainly want to create a good one.
Studies say you have only about 6 seconds to create a positive impression on users.
The first few milliseconds (yes, milliseconds) precedes the conscious focused attention. The user’s brain subconsciously registers the color scheme, the layout, and other visual elements — it absorbs the overall feel of the website. This is when the user decides if your product looks appealing to them.
They would spend the next 3 seconds ‘consciously’ looking at the content, its presentation, the grammar, and the tone. This is when a certain impression of the product starts to form in their heads. Some might feel ‘Oh they look like a good product’, while others would think ‘what does that even mean’ — all of this happens in the first 3 seconds.
They spend another 3 seconds determining if there’s anything useful on the website — clicking on links to see what’s of value. By the end of 6 seconds, most users would have made up their mind whether they find you trustworthy or not.
Basically, if you want to build a SaaS website that impresses and converts, you’d need to understand a bit of human psychology — let’s dive in.
A simple SaaS website is scientifically better
All smart people love simplicity. Einstein loved simplicity. He managed to explain his extremely complex mass-energy equivalence theories by one simple representation, E=mc2.
Our brains are wired to love simplicity. We are always trying to think of simple things. Our brains get tired pretty easily. We have a natural tendency to avoid complications.
In a study by Google, researchers found that users take as little as 1/50th - 1/20th of a second to decide whether a website is beautiful or not, and also that they find visually complex websites much less appealing as compared to simple websites.
It is no wonder Google, the most popular SaaS website of all time, is also the simplest website on the planet.
Another interesting theory, cognitive fluency, states that our brain prefers to think about things that are easy. It will be easier for us to associate with something that does not require a lot of effort to understand — we will be motivated to explore it further.
This is why you prefer visiting websites where you naturally and instinctively know where everything is and what actions you have to take to achieve something. It is also easier to relate with simple looking and easy-to-read fonts.
Here are a few things you should do to keep things simple:
Make your homepage a distraction-free page. Use it for one key goal, as opposed to many.
Make the navigation really simple. Give the user all the information they want in one or two clicks. Any resource that needs more than a couple of clicks to reach — simplify that path.
Do not create massive drop-down menus. Our short-term memory can hold only up to seven items at one time — do not go beyond that.
Have abundant white space across pages. It is essentially area without information, menus, or dropdowns — it does not literally have to be white.
Reduce the number of choices. Hick’s Law states that the fewer choices a person has, the quicker they make a decision.
Basically, do everything you can to make the user’s journey on your SaaS website effortless.
Familiarity breeds trustworthiness
The cognitive theory stems from another area of behavior known as the Mere Exposure Effect — the more you are exposed to something, the more your brain prefers it as it starts to look simpler with exposure.
The same applies to your SaaS website. Users are used to seeing a few elements on every SaaS website: a logo on the left, an opt-in on the right, a line or two about what the product does, links to the blog and product pages, and more.
Your users are conditioned to these characteristics as a standard for a SaaS website. Irrespective of what you do, always align with it.
Deviating from the ‘familiar’ might put you in the subconsciously less beautiful category. Let’s see a couple of SaaS website for any similarities:
Both have the familiar elements in more or less the same place. There’s clearly a theme emerging. Users feel a certain sense of security when they see all the elements they would expect a SaaS website to have. Always give them that.
I am not asking you to look just like everybody else. It is important for you to build a story around the ‘familiar’ design — a compelling copy that encourages visitors to try the product or explore more.
The familiarity will help build trust and the content will drive engagement. They go hand-in-hand.
Subconscious appeal, not feature lists
When you’re designing a SaaS website, it is important to understand how our brains process information before arriving at a decision.
Economist and Nobel laureate Daniel Kahneman wrote Thinking Fast and Slow in which he discusses two ways in which the human brain works — System 1 and System 2.
System 1 is a person’s emotional and automatic reaction to a situation. It is stereotypical and subconscious.
System 2 is a more tempered and controlled thought process based on a conscious evaluation. It is slow and analytical.
While both systems are at always ON, they do not come into play at the same time. There will be times when you’d want to trust your snap judgment, while you might want to mull over and analyze carefully on some occasions.
In Kahneman’s words: “Systems 1 and 2 are both active whenever we are awake. System 1 runs automatically and System 2 is normally in a comfortable low-effort mode, in which only a fraction of its capacity is engaged. When System 1 runs into difficulty, it calls on System 2 to support more detailed specific processing that may solve the problem of the moment.”
Now, the pertinent question here is ‘which system do we build the SaaS website for?’
According to Gerald Zaltman, a Harvard Professor, 95 percent of users make purchases based on the System 1. It’s less work for the brain.
SaaS companies should tailor their websites to press the right psychological buttons and not take the users on a tour of features.
Give them strong visual cues
Use visual cues that will direct attention to the area you want your users to look. The truth is, whether we like it or not, we are influenced very easily.
This is still subtle. GoToMeeting went a step ahead and added explicit directional cues to divert attention to the CTA.
Put a real person
There is no denying that people relate the most to people. A study by the Nielsen Norman Group identifies “3 design elements that are most effective at attracting eyeballs.” 1) plain text 2) faces, 3) bodies.
Two out of the top three eye-catching design elements have to do with people, demonstrating a deep craving for visual human relatability, even on a landing page.
Shopify shows you a happy picture the moment you land on their website.
I am not asking you to put stock images on your landing page — that just withdraws from the scheme.
The best way to do this is using a customer’s picture. Even better if you have a testimonial to go with the picture. Helpscout is a SaaS website that nails it down very well.
Use a big headline
The bigger an object, the more attention it gains, and the more you will trust it. Almost every SaaS website use this psychological technique to establish what they do in a dominating fashion — big and clear headline.
On another hand, here’s what you get when you place all your emphasis on System 2:
There are so many things on the page I am not even sure where to look first. This is a big NO for a SaaS website.
Above-the-fold: ONE goal and familiar elements
Hubspot says 55% of your visitors would spend less than 15 seconds on your website. That is all the time you have to create a positive impression of your brand and communicate what your product does.
You’d better grab their attention as quickly as you can. An eye-tracking study from Jakob Nielsen found that visitors spend 80% of their time above the fold. While there will always be some debate about how important above-the-fold really is, there is no denying that it is important.
Coming to what should go above the fold, start with the principle of simplicity; ask yourself: what is that ONE thing I want my users to do when they are on my website?
There is a multitude of things you’d want your users to do:
Learn more about the product
Read a few posts on the blog
Explore a few case studies
Enter email address for newsletter subscription
Watch the product demo
The list is endless. Give it a break and start fresh.
What is that ONE thing that is the most important to you? Find out and design the website around that.
In SaaS, the one thing you want the user to do is to sign up for your product — that should be the only call to action above the fold. Do not make the mistake of giving the user too many things to do in the first fold — it will only take them away from the ultimate intent.
The elements you must include above-the-fold:
Your brand logo. Keeping with the rule of familiarity we had discussed earlier, a brand logo on the top left is a must.
Your unique selling proposition. Your USP is what differentiates you from everybody else. This is your chance to tell users what exactly to expect from your product. Your USP should tell them why they should explore the website further. Here’s the USP of Hiver:
There you go — one short phrase tells the user instantly what to expect from the product. You have to ensure to have the USP above the fold no matter what.
A boilerplate type explanation.The USP tells users what the product is about but it does not really explain what the product does. This is why you need a succinct explanation to make things even more clear.
This part makes the USP clear. It tells users what they can expect from using the product.
The call-to-action.Remember the ONE thing that’s the most important to you? Design your CTA to invite users to do just that — sign up for the product in the case of a SaaS website.
Where to place the CTA is a bit of a debatable area. As opposed to what we’ve been told for years, a few studies go to the extent of saying that the position of the CTA does not matter at all.
However, going by conventional wisdom, it is a good idea to place it in the first fold itself. What matters the most is writing a compelling copy.
When you’re in SaaS, the word ‘Free’ really gets the tables turning. The reason is the feeling of loss aversion. It essentially means we try harder not to lose something than we will to gain something. Once your user has a free plan and if they like the product,
Simple navigation. The user has seen the USP and the boiler copy — they know what you offer and how it will help them.
You have piqued their interest and they want to know more, it is your responsibility to give them a framework to enable them to explore your website in a systematic fashion — a clean navigation.
In the navigation pane at the top, the one big must-have is a link to your product demo. There will always be visitors who would want to see how the product works without having to sign up for a trial. You’d want to give them the ability to do it as effortlessly as possible.
While there are other elements you can include in your first fold, these make up for the essentials you need to foster the engagement.
Minimal and Linear, but not at the cost of user expectation
All new age SaaS companies lean towards a linear model on their website that is aimed towards a single flow: get the user to the homepage - take them to the signup page - onboard them.
You land upon Buffer and the first thing it wants you to do is to sign up. The idea is to limit the choice of things to do on the webpage so that more visitors sign up. The visitors also feel confident about having understood the product as it is easy to digest the information presented in a concise form.
There is, however, a downside.
A recent study of 30 SaaS websites (not all of them linear), where 90 different users were asked to think out loud as they interacted with each site, revealed some interesting results.
As for linear websites, many users weren’t able to explore them at their own pace. A few of them complained that even after spending time on the website and coming back to the homepage, they did not have a clear picture of what the company does.
When asked how easy it was to “find the information necessary to choose the best product or service,” linearly organized sites like Buffer, Trello, and Slack were rated 3.3 out of 5 compared to an average of 4.
Some users have basic navigation expectations and they are not always happy following a designed path. One said “The main page doesn’t have a breakdown of the different packages. Nor is there really any indication that this service ever has any pricing structure until you look at the pricing page in particular.”
Others might seek a little more information before they can sign up for a trial. A user said, “Well honestly it’s too difficult [to pick a plan], because I had to go through creating an account, and I just wanted to see pricing.”
A linear website is not a clever hack to boost conversions. You need to understand the following:
What you find intuitive might not be for users. Emphasize on building an in-page navigation that appears clearly at every step in the process.
It is also imperative to include a few traditional marketing parts in your onboarding process. For example, the product tour can be a part of the onboarding process — the users would not feel that they are missing out on something.
Be sure to A/B test if your users achieve what you want them to with the minimal design and little information. Never be hesitant to add some information back if you think you’ve gone a bit too minimal.
About the author
Harsh is the content lead at Hiver. He's jocular, loves dogs, and spends most weekends doing road trips. He also reads sometimes.