Starting From Scratch: Create A Landing Page That Converts

Whether it’s your homepage, a link from an advertisement, or the result of a popular search term, a landing page is the very first interaction a visitor has with your website. In a glance, your visitor forms an immediate impression about you that can either make or break a sale. The landing page needs to grab the visitor’s attention, convey purpose, and prove that you can offer a credible solution to their problem. Although each landing page will be customized to the situation, this guide will help you get the process going.

I. Before You Write a Word

It is important to have a good sense of your main objectives before deep diving into writing the content. Go through these questions before you start writing or designing your page:

  1. What is the primary goal of the page? Are you trying to generate more free signups? More leads? Rank high for a certain keyword? Know your objective going in.
  2. Who are the other stakeholders in this page? Will it affect the sales team? The support team? Current customers?
  3. Do you have related pages, that you should link to, from this page? Should other pages link to this page? What is the proper order for users to funnel through these pages?
  4. Do you have any design constraints? Will this page be in the same layout as another page, or are you free to be creative?
  5. Is this page brand new, or will you test it against an existing webpage?

II. Write Out The Content

You will want to write the content before you start designing to ensure that you are capturing all of the relevant information. A standard landing page will have the following components:

  1. A hero that captures the reader’s attention
  2. A logo bar that immediately establishes credibility
  3. A primary call to action that invites the visitor to purchase or enter their information
  4. Supporting information that demonstrates the value of the product
  5. A customer quote or testimonial

Screen Shot 2017-10-16 at 3.51.36 PM

III. Design the Page

You can start wire-framing the page with tools like Balsamiq or Canva, and then use more advanced tools like Sketch or Photoshop to create detailed designs. Your landing page should keep the same look and feel as the rest of your website content to maintain brand consistency. If you don’t have a style guide and are looking for inspiration, looking at websites of companies which have similar ideals as you but are not your direct competition, often helps.

  1. Keep Important Content Above the Fold. When you start designing the layout of the webpage, you want to keep in mind what content will be “above the fold” and which content will be “below the fold.” Any content above the fold is content that your viewer will be able to see without scrolling. You want to make sure that the most important content is above the fold, so the user will be sure to see it right away.
  2. Be Responsive For All Device Types. It is important to keep in mind that users will come to your website through different devices with different screen sizes from the one you are designing your page on. The fold will be different for each user based on their screen size – and the layout may have to be completely different for mobile users. You want to check your breakpoints to make sure that your landing page will look good across different breakpoints.
  3. Pro tip – To see which devices your users are visiting your website from, go to Google Analytics → Audience → Mobile → Overview → Secondary Dimension = “Screen Resolution”. This should give you a good idea of the screen size.

IV. Bring Your Page To Life

There are many ways to bring your design to life – with or without code.

If you can code or you have a developer on hand – great! Just make sure you include all of the important SEO elements to ensure that your page ranks well in Google, Bing or any other search engines. You may run your completed page through seorch.eu to ensure that you are fully optimizing your page.

If you would prefer to avoid code, do not worry!. There are plenty of tools like Shopify, Squarespace, and WordPress to help you get your page up and running with minimal code. Any of these tools will be mobile responsive right off the bat, and they come with the ability to add plugins to enhance your website as you go.

Screen Shot 2017-10-16 at 3.53.15 PM

V. Always Be Testing

Just because your web page is live does not mean it’s done! You should continue to test, iterate, and improve as users interact with your website. Optimizely and VWO are great tools for running AB tests and split URL tests., You can test how different versions of a page affect your conversion rate.

When you run an experiment, think about…

  • What is the hypothesis? How will you measure success for your test? Common goals are: Signups, Lead Submissions, and Clicks.
  • What are the risks? Is there anything that could happen that would be bad? Make sure you can measure potential risks too.
  • When will the test end? Choose a date when you will review the test results. It is all too easy to “set it and forget it,” but you want to make sure you eventually choose a winner and send all of your traffic to this page.

Screen Shot 2017-10-16 at 3.53.28 PM

VI. Insights and Analytics

As your visitors interact with the page, you might miss some information that is not captured just by clicks. In this case, it helps to simply ask your visitors what they are thinking! Qualaroo can help you gain real time insights into your customer’s decisions. Your customers make hundreds of decisions about you, Qualaroo is there to find out why they made them. Learn more.

VII. Iterate and Repeat!

As you continue to learn what works – and what does not work – you can add your findings back into your page to improve your conversion rate. Have fun and good luck!