Improve your landing page by learning from the best

A breakdown of the latest trends in SaaS landing pages and how you can use them in your own designs.

Alexander Handley
Feb 21, 2018 · 5 min read

I love websites.

There’s nothing like getting the whole team together to create a new home page. Designers, illustrators, marketing, growth and developers all working together. You sprinkle on some SEO, optimise your acquisition tactics, and probably forget to upload your icons. Ah—websites 🙃

There’s great resources out there already about the best practices for landing pages. In this guide I’m going to show you how to find the right websites for inspiration. Then we’ll go through a breakdown of three examples to show you how to learn from their design decisions.

Contents

  • How to find websites to learn from. 🔎

Find companies that are solving a similar problem and share your aspirations

The best way to find inspiration is to look for companies who are solving a similar problem to yours.

So, what is the broad problem you are trying to solve? Remember this is a branding exercise, not product development: think big!

Instead of:

“Pug owners who use retractable leashes find they are too long for cafes.”

Try:

“Allowing people to feel welcome in new spaces”.

That way you’ll stop combing Dribble for Pet Supply stores and you’ll look to AirBnb.

Perfect! Now, what companies are leading the pack on solving that problem? Find companies who share your aspirations and ambition.

I chose Airtable, Intercom and Slack because they aligned to our company Reqfire.

These companies are speaking to a broad audience, about new ways to look at existing offerings, and want to welcome these people in with beautiful design and a splash of colour.

New trends in landing pages

Everybody in the futuristic 2018 can remember back in late 2017 when large images and auto-play videos were the Hero image of choice.

Slack made a messaging app so their 2016 website showed the ‘cooler’ image of the Mars rover.

And what’s more loveable than an interactive database? Children with interactive databases:

Now—your window into the future:

Airtable — launched 5th of February 2018
Intercom — launched 5th of February 2018
Slack — launched August 2017

Learning from their designs

What makes a great page? I’m sure there’s no simple formula or answer.

What I am sure is that in our three examples, they have teams of talented designers refining their work and customer acquisition specialists optimising how they function.

Let’s go through the four main elements which make up the “above the fold” hero section.

1. Header Bar

  • Nice and spacious.

2. Heading and subheading

The first ‘W’ in Slack’s font Slack-Tiempos is so enjoyable it just makes me want to keep reading in case I get to see another one… Work… there it is!
  • Short headline: 3–5 words.

3. Hero Illustrations

Gone are the days of motorcycles racing through tunnels to showcase quick document management. Enter the era of fun illustrations of documents jumping into a folder.

Airtable — Credit: Ally Jaye Reeves
  • Snapbacks and desk plants — must be cool.
Intercom — Credit: https://dribbble.com/Intercom
  • Not my style but it shows messages being linked and letters being opened.
Slack — Credit: Alice Lee
  • Simple.

4. Optimising the Call to action for sign ups

I love this approach. It gets across how simple it is to create an account and speeds up the process for the user.

I especially like how Intercom uses the space under the email input box to show a few value propositions.

Here’s how it works:

Gif made with the always handy Cloud App

Other features below the fold

I focused on the area “above the fold”. But here’s some other features worth mentioning.

  • They are all very short! (Check out Monday.com — it’s only the hero image).

Putting it all together

Shout out to Hao Le for the design.

Tada! 🎉

Here’s how we copied/drew inspiration from the above designs:

  • Header bar: Similar design but we wanted more space.

Flattery, imitation and better conversion metrics

Since implementing our new design we’ve seen our conversion metrics improve and people are sticking around longer to look at the illustrations and watch the video. (But who cares right? New website!)

Do you have any feedback on our site? Or do you think we need to increase the line-height of our subheading? Let me know in the comments 🙃

Do you want to create interactive User Flows that include data, logic and users? Then our app Reqfire was made for you.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store