JetStyle: How to create a perfect landing page

Trends, tips, checklist.

In 2018, landing pages and sites, in general, are not the only and definitely not the main communication tools. There are channels in Telegram, social media communities, chats, stories, video channels, and a million other tools. And you need to be able to manage all this orchestra. But the site is still the place where you host your brand, and the landing page is one of the main points of contact with a visitor.

This landing page checklist is our internal document, that naturally formed over several years. And we are happy to share it with you. There are no revolutionary ideas and secrets of "how to do it quickly and cool". But there is a complete algorithm for creating a decent working page that will help you tell about the product and launch its promotion the right way.

The described order of actions can be applied to any communication tool, but for simplicity, we will analyse it by using the landing page example.

Search engines have learned to better emulate the user's interest. SEO strategies are increasingly focused on the behaviour of a living person, rather than search engines. For instance, ”Korolyov” (a deep neural network based search algorithm by Yandex) looks for the answers not only by words but also by the meaning. Which means, the commercial text can now be as natural as speech.

Use simple language. Write so you can answer all the questions from the user – as if they’d asked you all these questions themselves in the chat. You can start like: “Hi, John”, and continue the letter to your character. When you finish, just erase the intro, and the letter will become more human.

Show everything that is useless to describe in words. Demonstrate the product as if the users themselves held it in their hands. Video content has already become something ordinary: today, if you have something to say, you turn on the camera on the phone and just tell about it. You get the content straight away, and you place it on the site, on Facebook, on Telegram channel, or on the landing page. And only then, if this approach worked well, you order the content from professionals, so that your following videos are spot on.

Checklist

• We understand what questions we want to answer the user.

• We picked a simple, emotional and understandable headline – the user can understand where they are at, how it is called, what they are being offered. We avoided double meanings. The reader understands what the benefit of this page is.

• We understand what the barrier is that prevents a user from accomplishing a targeted action. Their doubts, a source of distrust, a problem.

• Found arguments for overcoming the barrier. Removed meaningless slogans, found facts. Have made the main answer to the main question visible.

• We compared our page with references, took the best from them and understood how we are going to stand out against them.

• We offer the user a benefit, before demanding an action from them.

• We don’t put the user in the pose of Buridan's ass and we ourselves offer the best option for this person.

• We have built an interesting story from the content that helps to overcome the barrier.

• We clearly offer the user benefit by adding a benefit button.

• Found the arguments that the user will believe, such as customer reviews.

• We use video for the demonstration, especially if we need to evoke emotion, explain the process or create a need.

• We replaced the text, that explained a certain structure, with a scheme.

A good site today is not the one that is well programmed or has a trendy design. The emphasis has shifted to content and analytics because anyone can create a working and good-looking site.

To learn how to do this, read the article "Landing Page Design Best Practices" on TopTal. Unlike in 2014, the website builders now are really convenient. 

If you need a site for testing a hypothesis, just open Tilda or Webflow, select a template, find a couple of pictures on the Internet and write a couple of simple sentences. It’s fast, free, and no designers or programmers will be harmed.

Another thing is that a good designer primarily works on the script and argumentation, and he or she can be entrusted to fill this checklist with the content. Or you can do it yourself if you have enough time.

Pay more attention to a competent structure that will fit well into the user scenario, and to useful content that will answer all the questions. Such a site will work and sell well, even if it’s been built in a day using a free template. It’s much better this way than with a fantastic layout, but without answers to the questions.

Checklist

• The page has a clear hierarchy: contrast and subordination.

• The user sees a noticeable and clear call to action.

• There are no blocks of the same importance on the screen.

• There are no random intervals, colours, and font sizes on the page. There is a simple and clear system of visual techniques.

• We did our best to use fewer fields in the form, words in the headline, words in the text, design elements, columns in the layout (have already tried one column), transitions to other pages, borders in the design.

• We removed captcha from absolutely everywhere.

The main rule is simple – try to get rid of everything that doesn't help the main person to make the main action. And it will become better.

A little tip: after you have thrown out all the unnecessary stuff, try to get rid of something else. It will get even better.
 

And why do you need designers and developers for?

UX-designer is the very person who will help you to go all this way. Because designing behaviour scenarios is a much more important part of designers' work than drawing some “beauty”.

After you have confirmed or refuted the first hypotheses, you can realise (usually that’s exactly how it happens) that you need to do something that the ready tools can’t cope with.

Or you want to add even more “beauty” to the page. Or (most often) it is necessary to incorporate some pieces of business logic into the script. And that’s when it’s time to call a designer and a programmer, that is, to order web development from someone like ourselves.

To be honest, when a client comes to us with an unverified hypothesis, we usually suggest: “Let’s do a quick test with Webflow first? And when we will see how it actually works, then we can spend more time and money”.

To check the effectiveness of the page, it is not enough to just install the web counters. In order to get the full picture, we recommend adding tags into the site code and setting up Google Analytics and Yandex.Metrica interfaces.

Apart from that, new tools for automating data collection and analysis have emerged over the past three years:

- Google released Google Data Studio and allowed access to it from Russia – you can pick different sources and visualise the data as you like;

- Google Analytics has got a Cohort Analysis with good guidelines in Russian and English;

- Yandex.Metrica has learned to work with offline conversions and explained how to send calls to the Metrica;

- And also, Metrica can now build reports on cross-device conversions.

In general, web analysts have become less dependent on developers. And if in 2016 many of them still ignored Google Tag Manager, today they prefer to manage tags and configure mobile apps for marketing programs independently, without the help of programmers.

As a result, the analysts have learned to analyse the actions of users more deeply and began to calculate the economics of clients behaviour: not just conversion, but how much is earned on a particular client, in euros and cents. For instance, we at JetStyle have switched from performance marketing to a more effective model – unit economics. Now we operate with such terms as capital turnover and final profit. We can calculate revenues from a single user more accurately, and therefore clearly understand what is happening in a specific segment of the audience, where we lose and where we earn.

Checklist

• We have set up the analytics systems. (If you haven’t installed Yandex.Metrica and Google Analytics to your site yet, do it immediately).

• We have linked Yandex.Metrica to Yandex.Direct to get more accurate data, including the information about expenses. And we have linked Google Analytics to Google Adwords.

• Identified macro conversions – the main purposes of the site: sale, call, application, use of the test period.

• Selected micro conversions, which show the interaction of the potential client with the page, and intermediate steps towards the main goal: subscription to the newsletter, download of the user's manual, switching to a specific page and so on.

• Set up tracking of macro and micro conversions on the site.

• Decided whether we need call tracking. If we didn’t implement call tracking, then we have, at least, set up sending requests from the site and track the viewing of contacts. 

• We have checked the settings of the analytics systems: the web counter is set correctly, the data is collected properly, the information about the target actions is collected, the requests from the site are not lost along the way.

The landing page will not bring any sales if the technical subtleties fail. The success of the campaign also depends on how fast the page loads, how it looks on different screens, whether or not it will look too small on an iPhone 5 display. You don’t need to check anything manually or by sight anymore, as there is a specific tool for almost every item of the technical checklist.

Checklist

• The page loads quickly.

            https://tools.pingdom.com

            https://developers.google.com/speed/pagespeed/insights

• The page is displayed correctly in common browsers. It's a good practice to support the browser if at least 1% of your audience has it installed.

            https://testmysite.withgoogle.com/intl/en-gb

• The page is correctly displayed on various devices (desktops, mobile, tablets).

            https://testmysite.withgoogle.com/intl/en-gb

• The forms work, the applications come to the recipient.

            (you need to check by hands that they do come)

• The goals set in the analytics system work well.

            https://yandex.ru/support/metrika/reports/add-goals.xml

            http://context-kill.by/blog/kak-proverit-celi-v-google-analytics

The most common mistake is to publish the page and then just hide and wait for the results. Tell everyone about it!

Your challenge is to bring as many visitors as possible to the landing page. But not any visitors, they should be your target audience – to not just look around, but buy or perform another action.

Start with contextual advertising – it is work with hot demand, which means that you show the ads to those who are already looking for your product or service. Traffic from a correctly set up context will always be the highest converting one. But it is always not enough of such an excellent traffic, you will soon want more.

And then you should add targeting to your advertising sources. This traffic has a lower conversion rate. With the help of the targeted adverts, we create demand: we show the ads to people who have not asked for it. Nevertheless, this will bring more benefits than just some media advertising, which can be seen by everyone.

Checklist

• We have checked the ads – all banners correspond to the landing page's message.

• We made sure that we have linked advertising services to analytics systems – Yandex.Metrica to Yandex.Direct, Google Analytics to Google Adwords.

• We use UTM tags. We have introduced a single standardised system of the UTM tags to monitor the effectiveness of sites, ads, audiences.

• We have set up a collection of retargeting audiences before the launch of the advertising campaign.

NB! When launching an advertising campaign, we recommend that you immediately set up the function of collecting retargeting/remarketing data and set up retargeting campaigns to show the ads to those who visited, but did not send an application, in Google Adwords, Yandex.Direct and social media.

We are keeping an eye on the conversion. We look at the WebVisor and heat map data to understand how visitors behave on the landing page. If users can’t see some elements at all, for example, they don’t scroll down to them, then we correct the structure.

We segment the traffic. We define segments by various parameters – resolutions, browsers, devices, etc., – and look at the differences in the conversion. If we see something that gets out of the picture, we look for the cause. We had a case when the site conversion on the desktop was twice as high as on the mobile. It turned out that there were a lot of CTA buttons on the desktop and they were always in sight, while there was just one button in the mobile version, and it was only at the beginning of the page. As soon as we fixed it, the situation improved immediately.

We analyse the feedback. People from the landing page call to the call center, send an e-mail or a message on our Telegram or social media. We can see if managers and technical support staff answer the same questions from the users over and over again – this means there’s clearly not enough of this information on the site. We go back to the first two steps of the checklist and edit the message on the page.

----------

Today there are more and more automation tools in each sphere that can do half of the work for you. And it’s already quite obvious that it is the development of a scenario in statements, facts, preparation of the content – that is what is needed for a high performing landing page and that is what it's really worth paying for. For the idea and its implementation, and not for the technical execution.

In this sense, design agencies, numerous studios, bureaus, and digital companies will increasingly take on the role of producers and content providers, rather than just technological contractors. This is how we see the future.