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.
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. 🔎
- Breakdown of three examples. 👀
- Putting it all together for your site. 🎉
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:
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.
- Stays at the top of page (except for Intercom).
- 5–6 links.
- One CTA, Intercom does this the best with their signup button requiring your email address.
2. Heading and subheading
- Short headline: 3–5 words.
- The headline is bold, clear, and dark colored.
- The subheading follows the recipe: who’s it for, what they can do, and what’s the benefit.
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.
- Snapbacks and desk plants — must be cool.
- Artists and laptops — made for new age teams.
- Squares, triangles and circles — components in a kinda laid-back but still technical product.
- Not my style but it shows messages being linked and letters being opened.
- Simple.
- Shows the human side of abstract ideas like sharing files.
- Gets across collaboration without using a stock photo of an open-plan office.
- (This is my favourite illustration by far).
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:
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).
- Cool greyed out logos of their customers.
- Two similar CTA sections for sign ups.
- Big footers.
Tada! 🎉
Here’s how we copied/drew inspiration from the above designs:
- Header bar: Similar design but we wanted more space.
- Headings: We picked the gorgeous and sturdy Libre Baskerville as our title font.
- Hero Image: We learned a lot from the Slack illustration and so tried to communicate what our app does without a screenshot.
- Bonus video: We got the idea of the video from Framer (who updated their website last week — yep it’s new website season).
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.
