Things great SaaS landing pages have in common

Illustration by Sue Ai

Originally published in my weekly newsletter UX Things

I’ll be honest, I have a thing for SaaS landing pages.

A SaaS website is a window to the product’s soul. And so far, from my experience, you absolutely should judge a product by looking at their website. MVP products being an exception to this rule. And yes, I do know what they’re saying about book covers.

We’ll be taking a look at some of the most impactful SaaS landing pages out there. Since there are hundreds of good ones, I’ve picked a few featured award winners and loved by many.

Brutask

Brutask is a task manager for small teams. Not a hard one to figure out, as soon as we land on their website.

Hero banner starts with a proven formula, a big headline, followed by a short text and a call to action. Everything is center aligned to give the content a bit more emphasis. No distractions around it whatsoever.

Following is a gorgeous illustration, with minimal animations on top. It brings this minimal website to life.

I love the clear and impactful messaging, with just a few elements and a lot of space. Banner motivates me to see what follows.

This website managed to achieve a lot by letting us focus on a single piece of content at a time. This shows that they’re proud of what they’ve built.

Often, landing pages will come packed with content. Chances are if the landing page is confusing and all over the place, so is the product behind it.

This approach allows us to get their message, even when skimming through.

As there are many to-do solutions out there, Brutask indicates that they’re not one of them. They’re aware of solutions such as Trello, but they’re offering something different. This statement alone motivates me to explore more and to try and find out what makes them different.

Mixpanel

Mixpanel’s landing page is as good as any. Brave and beautiful typography choices are noticeable straight away. Followed by an impactful visual direction, communicating sophistication and power.

Unlike Brutask, Mixpanel’s landing page is a bit more detailed. Which is expected from a much more complex product.

As with our previous example, we’re seeing a strong headline here as well. Followed by a short text and a call to action. The headline is inspirational, indicating the reason for their existence on the market.

Many products shy away from showing off their user interface. But here we’re seeing Mixpanel showing off their entire dashboard UI. And doing so at the top of their landing page, in almost full size.

Again, this communicates that they are proud of what they’ve built. It’s an awesome thing to see and seem genuine as well. Also builds trust.

It doesn’t come as a surprise that they’ve also placed their testimonials quite high on their landing page. Considering the clients they’ve managed to get on board. If Uber and Twitter are using your solution, you’d better be showing that around.

The next section focuses on the great features that Mixpanel offers. Beautifully crafted frontend with great typography, illustrations, and application screenshots. Combined with scroll animations, it does leave quite an impact.

This continues all the way to the last section which is blog resources. A nice way to learn more about their solution.

Webflow

As you might know already, Webflow is an amazing tool for building bespoke websites. In the hero banner, Webflow starts with the ‘what’ behind their service.

On the left-hand side, we’re seeing a proven mix of the main heading, subheading, and a call to action.

The illustration on the right-hand side of the hero banner is so well done. It showcases the solutions to the pains developers and designers have to deal with.

Testimonials, justifiably so, come immediately afterward.

Afterward, we’re seeing grouped content to showcase their core high-level features. I find it much easier to digest all the information when it’s grouped in such a way.

If I was skimming through, as many visitors do, I would get the gist of the core features Webflow offers.

Each of these sections has a testimonial, a visual, and a few core values.

Resources section follows that consists of tutorials and detailed blog articles. All you need to get started.

Monday

Monday is a SaaS tool where teams can create workflows to manage their projects.

Monday’s hero banner lets you check all the options you need help with to manage your projects. Doing so boosts conversation rates, but also communicates the pains they’re solving.

After the selection, you can get started straight away. An awesome way of encouraging their visitors to jump right in. Seems to be more effective than just having a call to action.

Monday is no different when it comes to the illustrations.

They layered their core features into one image, telling us that they’re more than a planning tool.

Next, Monday shows off testimonials, with some big names such as Adobe, Deezer, and Coca-Cola. Having companies like these using your products, it only makes sense to show it off as soon as it makes sense.

Core features in this section are beautifully animated gifs of their user interface.

While the first half focuses on the features, the second one communicates how easy it is to get started.

Communicating speed and ease of use seems important for a product such as theirs.

Following is a collection slider of all the integrations that they support. In such a solution, I would assume that integrations come in handy.

Jumpstart

With their solution, Jumpstart helps founders to start their business in the US. You don’t have to be either in the US or a US citizen to qualify. Pretty cool if you ask me.

Jumpstart stands behind a lot of purple that they’re not shying away from. The main heading consists of two separate statements. Telling you to focus on the business while they’ll take care of the boring stuff — paperwork.

Instead of the illustration, Jumpstart uses a combination of photography and features. Together, it communicates sophistication and ease of use.

Their testimonial section starts with logos, followed by feedback from their users. It’s always nice to see genuine written feedback, rather than just having logos lined up.

Jumpstart goes one step further.

Features are being accompanied by testimonials. It certainly adds more credibility to their solution.

The next section describes all the steps once you start using their service.

Showing steps is a great way of explaining your solution, without going into too much detail. It’s all about what problems you’re trying to solve. Jumpstart makes that very clear on their landing page.

At the end you’ll find an FAQs section, answering doubts you might have after going through it all.

FAQs are a great way of clarifying common questions your visitors might have. This way, you’re taking care of their concerns, while preventing them from leaving.

Let’s reflect to see what we’ve learned from these amazing websites.

First impression matters

A very strong and clear heading seems to be a strong consensus on all the mentioned examples above. A clear heading can be a deciding factor whether your visitors stay to discover more.

Thus it is crucial to have a strong heading communicating what is your solution trying to solve.

Let’s take a quick look at all the headings we went through.

• “Task manager for small teams.” — Brutask
• “You launch your business. We handle the paperwork.” — Jumpstart
• “Build better products.” — Mixpanel
• “Work the way it works for you.” — Monday
• “The modern way to build for the web.” — Webflow

What are the similarities?

Having clarity

The first impression is crucial. Be clear with your messaging. It can end up being a deciding factor if your visitor wants to stay to find out more.

The problem you’re solving

Brutask helps small teams handle their tasks. Jumpstart handles all the paperwork so you can focus on what matters the most, your business. Mixpanel helps you build better products with their analytics tools. Monday lets you organize your projects the way you want them to. Webflow is trying to tell you that they’re the most modern solution to build a website.

Showcase your product

Headings perform best when they’re accompanied by a validation. A beautiful illustration, impactful photography, or a screenshot of your app’s dashboard. It’ll provide your headings with more credibility. It will also empower your visitors to keep exploring.

Let the users speak for your product

It’s easy to sing praises for our own solution. But having users sharing their stories will bring the value of the website to a whole another level.

Let them tell their stories. Let them share how your product has helped them. There is no doubt in my mind that having stories on your SaaS website landing page will make the most impact. People love stories.

Don’t get too technical

It’s easy to get caught up with the details and technicalities of your solution. As tempting as it may be, a landing page is usually not the place for such things. Try to focus on real-life problems you’re trying to solve, and all the pains that your product is trying to take care of.

Do showcase core features, but try to leave the intricacies for subpages. Those wanting to learn more will find the information. In most cases, visitors won’t care that much about details, as long as you’re bringing real value.

Tell a story

We’re social beings. We connect with stories. Make us feel your vision. Communicate it clearly and make it inspiring.

Let us know that you’re here to make a difference.