There are some awesome landing pages out there. It’s fun to look at a landing page and say, “WOW, that’s awesome!”. But we’re web designers, so we need to ask why? By looking at awesome landing pages and analyzing the why, we can learn how to make our own awesome landing pages. So let’s look AND learn!
Just in case we lost you at Landing Page…
What is a Landing Page?
According to Unbounce: What is a Landing Page?
In the purest sense, a landing page is any web page that a visitor can arrive at or “land” on. However, when discussing landing pages within the realm of marketing and advertising, it’s more common to refer to a landing page as being a standalone web page distinct from your main website that has been designed for a single focused objective.
This means that your landing page should have no global navigation to tie it to your primary website. The main reason for this is to limit the options available to your visitors, helping to guide them toward your intended conversion goal.
Why is the Basecamp 3 Landing Page Awesome?
The Basecamp 3 landing page combines all the required elements of a landing page with great design.
Unbounce lists a five, must-have, core elements for an effective landing page. They even wrote a blog post about it. I will use the Unbounce framework to analyze the Basecamp 3 landing page. Those must-have elements are:
- Your Unique Selling Proposition (USP)
- The Hero Shot
- The Benefits of Your Offering
- Social Proof
- A Single Conversion Goal — Your Call-To-Action (CTA)
The following image is a wireframe of the Basecamp 3 landing page. A wireframe is a diagram of the main elements of a webpage. In this case it strips out the WOW, so we can focus on the WHY!
Let’s break those five core-elements down.
One: A Unique Selling Proposition (USP)
The USP is composed of the main headline, a supporting headline, a reinforcement statement and a closing argument. Immediately below the top navigation, Basecamp leads with the main headline (which has been crafted to also highlight a benefit of Basecamp). The supporting headline is a little more solid, but challenges us with a question and a statement, which leads straight into two lists of benefits.
Basecamp’s headline and supporting headline is creating a narrative that encourages you to keep reading. The text is large and bold, simple colors of red for bad and green for good are clear and effective. We leap straight into the benefits with no nonsense and it’s clear, with very little reading, what Basecamp is all about.
The reinforcing statement is actually included in the hero image, which is very effective because the image is a repeat of the words we’ve just heard with a little text that says:
Make this a thing of the past (see the image below).
The closing statement combines it’s final pitch with some social proof and continues to make use of the narrative hooks employed earlier in the page.
Two: The Hero Shot
The hero shot is non-traditional in many ways. It’s not right at the top of the page and it’s not full width. Arguably, it’s not even a hero shot. However, it is an effective image as part of Basecamp’s narrative. It serves to reinforce the messaging and certainly highlights the main call to action.
Basecamp is essentially a software service, which does not lend itself to a traditional product-style hero image. The illustration is perfect for evoking a feeling of chaos, which Basecamp is claiming to help with.
Three: The Benefits of Your Offering
The Basecamp landing page does a great job of telling us all the benefits of their software. They have a pros list and a cons list, each with seven items. The entire message of the page is basically a benefit: Avoid chaos; embrace organization.
What I don’t see are any specific features. Anywhere! I think this is intentional. It can be kind of boring to explain the ins and outs of project management tools. Basecamp is creating excitement and leading you to a single CTA, which is to sign-up for a free trial. This is classic try before you buy, which is why they don’t bother telling you about the features. You can just find them out for yourself.
NOTE: There is a single button, almost at the bottom of the page, which says:
Let us show you how Basecamp works.
This button takes us to a page with a video and more feature based details.
Basecamp devotes at least half of their landing page to social proof and trust indicators. Even their closing argument states that:
100,000+ businesses use Basecamp…
This is a clear, ‘Get with the cool kids‘ statement. Their social proof is a series of quotes, which reinforce the benefits. These quotes are followed by a percentage, which we assume comes from a Basecamp driven survey. But they really ram the message home with quotes from real people working in real places saying good things about Basecamp.
We are presented with a lot of social proof and it’s laced with trust indicators, so we believe what they are telling us. Percentages and People, seems to be the Basecamp key to trustworthy statements!
Five: A Single Conversion Goal – Your Call to Action
The Basecamp landing page is also their homepage and does not follow the single conversion goal rule. There is a main Nav Bar, a Footer, and some other off-page navigation. However the intent of the landing page certainly pushes you towards a single conversion goal, and offers multiple paths to get there.
- Main Nav: Try it FREE
- Hero Image: Form: Start Your Free Trial
- Footer: Try Basecamp for Free
It is quite clear that Basecamp wants us to try Basecamp.
So, What Did We Learn About Making Awesome Landing Pages?
By looking at Basecamp it is clear that they follow the rules of making awesome landing pages…. 90% of the time. But they are also happy to break some of the rules, some of the time. The key is to know ALL the rules really well and be careful if you decide to break any. And, the best way to understand the rules is to study the guys that are doing it best.
In the spirit of learning about awesome landing pages, please share any you’ve come across in the comment below and I’ll tell you what I think of them!