The Evolution of a Landing Page: 37signals Basecamp

by in Content Marketing.

A company’s landing page (i.e., homepage) is a critical marketing asset for a company. In many cases, it’s one of the first impressions that customers have of your products and services. This is true even if you’re operating a traditional brick-and-mortar business, like a restaurant. For instance, a customer might find you on Google or Yelp, then click through to your website to view your menu, your operating hours, and to obtain contact information or directions.

While there is a myriad of advice online on how to design a landing page, I believe most of this guidance overlooks a key ingredient. That is, effective landing page design, and website design in general, is a process and not a one-time exercise. This design process may evolve over a number of years. [1]

To explain this further, I’d like to draw on an example, and look at 37signals Basecamp. 37signal’s is a web application company based in Chicago. Basecamp, which is project management software, is one of their first applications, launched in 2004. Basecamp is a useful example to look at for a few reasons. Most importantly, the application has been around for nearly a decade giving us some history to look at.

Thanks to the Way Back Machine, I was able to capture screenshots of Basecamp’s landing page iterations over time. I’m focusing on just the major landing page changes, paying special attention to above the fold revisions. “Above the fold” refers to the portion of the web page that is first visible on your screen, without scrolling.

First Basecamp Landing Page, Circa 2004

My initial reaction:

  • The main tagline is quite long, contains jargon (“client extranet”), and places an emphasis on “creative service firms.”
  • The call-to-action (CTA) on the top right, although it stands out, is not well placed. It breaks the flow of the page.
  • The page is very dense, containing a lot of copy. This extensive copy continues down the page.
  • The top menu is a bit confusing. For instance, what’s “10 Reasons” and if Basecamp is so elegant and easy to use, why do I need “Training”?

Basecamp Landing Page, Circa 2005

 

What they improved:

  • There is now a clear and brief tagline: “Project Management Utopia.” The tagline is emotionally engaging and excludes jargon.
  • The page includes a screenshot to give a visitor a sense of the look and feel of the application.
  • The CTA (“Try Basecamp for Free”) has moved down the page and is now better placed.
  • The dense copy has been boiled down into some key bullet points, such as “Centralize internal communication” and “Gather & archive client feedback.”
  • The top menu has been improved, with case studies and a forum. But why is there a link to a “Manifesto”?

Basecamp Landing Page, Circa 2007

What they improved:

  • The “customer quotes” have been replaced with “Over 1,000,000 people signed up worldwide.” This is fantastic social proof.
  • To build on the social proof, the page also points to some nice press coverage, from Business Week to Fast Company.
  • The page now includes two CTAs, “Sign up for free” or “Take a tour.” The upside is that hesitant users can learn more about the application before signing up for an account. The downside is that users might be confused by having two major options to choose from.
  • The bullet points on the right have been removed, making the page easier to skim and digest.
  • The top menu has been improved further with a link to Help/FAQs. The “Manifesto” link has been removed.

Basecamp Landing Page, Circa 2009

What they improved:

  • The look and feel of the page has been improved significantly. It’s a cleaner page, with fewer distractions.
  • The social proof is now baked directly into the sub-heading: “Trusted by millions, Basecamp is the leading web-based project collaboration tool.”
  • There is a helpful and concise list of features (share files, meet deadlines, etc.) to quickly provide a visitor a sense of the application’s functionality.
  • There is an iPhone peaking from behind the main screenshot, suggesting that Basecamp works on mobile devices.
  • “Take a tour”  has been removed as a major CTA, so the next step for a user is clear: “See Plans and Pricing”
  • The word “pricing” has been added to the CTA and it also mentions a 30-day free trial. So it’s now clear Basecamp is a paid application but offers a free trial period.
  • The top menu has been improved further, with links to view “Who uses Basecamp,” “Extras & Add-ons,” and “Help/Support.”

Basecamp Landing Page, Circa 2010

What they improved:

  • There is now an excellent visual flow from the main tagline, to the sub-tagline, to the graphic, to the main CTA (“See Plans and Pricing”).
  • The copy about features and the screenshot has been replaced by a useful graphic, which boils down the functionality of the application into an easy to digest visual diagram.
  • A second CTA has been added (“Take a Quick Tour”) but it’s deemphasized and placed below the primary CTA. I interpret this as “We’d love you to click ‘See Plans and Pricing’, but if you’re not ready yet, then please click ‘Take a quick tour.’”

Basecamp Landing Page, Circa 2012

This latest revision, which appeared in 2012, coincided with 37signal’s launch of “Basecamp Next.” Basecamp Next was a fundamental revision of the Basecamp project management software. [2]

What they improved:

  • The social proof is now baked into the main copy, both the first and second paragraph, and in the yellow note on the left. It’s interesting to note that a startup or early stage company could never have this type of landing page, since all the copy is based on Basecamp’s traction and market share.
  • The top menu has been simplified, with just three links: pricing, 45-day free trial, and log-in.
  • Historically, the Basecamp landing page had a lot of content below the fold. This content is now gone and is now accesible via the “Find out why” CTA. Is this is an improvement? I don’t know.

Take-away

If you look back at Basecamp’s first landing page in 2004, it’s easy to be critical. The tagline is not compelling, the CTA is placed in a poor location, and there is an overload of copy. With each iteration, however, the landing page incrementally improved, with clearer messaging, a less cluttered and more visually appealing design, and a better flow between page elements.

How was the Basecamp team able to significantly improve its landing page over time? It gained a better understanding of its target market, the value of its product, and other elements of its business. Basecamp also gained traction and was able to incorporate this into its landing page. First in the form of testimonials, then press coverage, then data about usage (e.g., “Last week 13,066 companies kicked off new projects using Basecamp”), and finally about market leadership (“More people in more places manage more projects on the web today with Basecamp than any other app”).

If the Basecamp team had spent more time on its first landing page, could it have created something like its latest page? Maybe in form, but not in function. The team was missing key information that it needed to acquire through learning and by growing its business. It took a number of years before the team was able to distill the essential components of Basecamp that were (and are) most important to its customers. It also needed to grow its business so it could incorporate this traction into its messaging.

In short, effective landing page design is a process, not a one-time exercise. If you’re new to a market, whether you’re launching a new company or a new product or service, then be prepared to regularly update your landing page (and your other marketing pages) as you learn and grow your business. It took Basecamp eight years to develop its current landing page, so be prepared to be persistent and patient.

————-

[1] In this post I am just focusing on the landing page and related marketing pages (e.g., about, tour, contact).

[2] It looks like Basecamp is A/B testing its current landing page. I was served several different versions when viewing the page in different browsers.

Comments are closed.