Инструкция от Intercom: как создать продающий лэндинг

Я давно и с удовольствием читаю блог компании Intercom, в котором они делятся своими секретами о стратегии развития продукта, дизайне, проектировании, email, обратной связи и много чего ещё, над чем они сами работают. Недавно они написали пошаговую инструкцию, как как создать лэндинг, основанную на их собственном процессе. Я её перевела и публикую. Наслаждайтесь:)

Как создать продающий лэндинг

Итак, у вас есть отличный продукт, теперь настало время создать лэндинг, чтобы продавать его. Вот, как мы делаем это в Intercom.

Многие лэндинги для SaaS продуктов больше фокусируются на том, что получит пользователь (фичи), и недостаточно на том, какую работу ваш продукт выполнит для него (выгоды). Те, кто концентрируется на фичах, обычно заходят слишком далеко в стремлении показать их все. Они пичкают лэндинг слишком большим количеством маркетинговых штучек, а клиент покидает сайт в размышлениях: «Да что в конце концов делает этот продукт?»

Хороший лэндинг подчёркивает выгоды продукта и его ключевые особенности в манере, близкой вашей аудитории. Так с чего же начать?

В течение четырёх месяцев мы создали 4 новых лэндинга, каждая из которых фокусировалась на разных возможностях Intercom. Мы многое поняли из этого опыта и подумали, что было бы хорошо поделиться этими знаниями.

1. Фокусироваться на работе, которая должна быть проделана

Мы верим, что некоторые продукты лучше характеризуются работой, которую они производят, чем клиентами, для которых они служат. Клиенты бывают разными и из разных индустрий. Но им всем нужно, чтобы была проделана какая-то одна, одинаковая для всех работа.

Прежде чем написать первую строчку текста для вашей страницы, вы должны хорошенько разобраться в том, для какой работы люди нанимают ваш продукт. Представьте, людям нужно, чтобы какая-то работа была проделана, но они ещё не знают о вашем продукте. Они ищут решение. Что они ищут? Вы должны разобраться в этом. Клейтон Кристенсен называет это «маркетинг, основанный на работе» и объясняет эту концепцию на конкретном примере в коротком 4минутном видео. Посмотрите его, оно того стоит.

Как мы определяем, какая работа должна быть проделана

Держа в голове концепцию «работы, которая должна быть проделана», мы обратились к хорошим ребятам из The Rewired Group, чтобы они разобрались, для какой работы клиенты нанимают Intercom. Процесс изучения включал в себя интервью с активными, неактивными, ушедшими клиентами и клиентами, использующими бесплатную версию сервиса. Затем мы дотошно изучили и обсудили все эти интервью. Мы остановились на 4 работах:

Наблюдать — смотреть за своими клиентами и за тем, как они взаимодействуют с вашим продуктом.
Учиться — получать качественную обратную связь от нужных клиентов.
Вовлекать — превращать новых пользователей в активных клиентов.
Поддерживать — упростить поддержку для обеих сторон: сотрудников и клиентов.

2. Создайте нормативы

Следом за этим для каждой отдельной работы мы создаём документ-инструкцию. В нём мы собираем весь контент, который станет базой для лэндинга. Это всего лишь гуглодок, над которым мы работаем вместе, отвечая на следующие вопросы:

Зачем это нужно: какую проблему мы решаем?
Работа, которая должна быть проделана: ради какой работы люди нанимают нас?
Что мы делаем: почему люди нанимают нас на эту работу?
Аудитория: кто ищет этот продукт, чтобы нанять его?
Ключевые слова: что ищут люди?
Конкуренция: кто располагает продуктом, который конкурирует с нами?
Отличия: в чём выигрывает Интерком?
Клиенты: кто уже использует Интерком для этой работы?

3. SEO: оптимизируйте свою страницу под поисковик

Как создать продающий лэндинг — seo
Работа над лэндингом бессмысленна, если ваша целевая аудитория не сможет его найти. Когда люди ищут решение своей проблемы (продукт, проделывающий работу, которая должна быть проделана), они ещё не знают о продукте, зато они формулируют проблему ключевыми словами. Понять, что это за слова, и сфокусироваться на них в адресе страницы и на самой странице — простая тактика улучшения поисковой выдачи.
Тактик, хороших материалов и рекомендаций по SEO очень много. Мы рекомендуем простой материал от Moz.com «Гид по SEO для начинающих».

4. Герой: изобразите, как ваш продукт выполняет работу

8 секунд. Согласно некоторым, это всё, что у вас есть, чтобы захватить внимание пользователей. Поэтому первая вещь, которую должен понять посетитель вашей страницы, — это то, что ваш продукт выполняет работу, которая должна быть проделана. Мы делаем это с помощью иллюстраций и называем её «иллюстрация-герой», она состоит из двух частей.

Во-первых, мы обращаемся к проблеме, которая заставила посетителя искать решение, и формулируем вопрос, касающийся этой проблемы. Вопросу подыгрывает иллюстрация, которая привлекает внимание визуально и добавляет контекст. Вот, к чему мы пришли с нашей страницей службы поддержки.

Как создать продающий лэндинг — параллакс
Процесс поддержки клиентов нарушен?

Дальше мы представляем решение. И снова заголовок сопровождается иллюстрацией, которая продолжает тему первой иллюстрации. В конце добавляется короткое описание работы и как Интерком может помочь её сделать.

Уладьте это с помощью Интерком

Чтобы влиять на зрителя за считанные секунды, ваша страница должна быть острой, а иллюстрация — простой для понимания. Мы используем параллакс, чтобы вызвать желание пролистывать страницу и ясно передать то, что мы хотим рассказать.

Как создать продающий лэндинг — параллакс

Посмотрите на это в действии на наших страницах понимания клиентов, обратной связи, служба поддержки.

5. Видео: покажите, как это работает

Принцип «показывай, а не рассказывай» особенно важен, когда надо рассказать о маркетинговом программном обеспечении. Видео эффективнее, доносит до пользователей, что делает ваш продукт, чем текст. Люди с большей охотой кликают по кнопке проигрывания видео, чем читают параграф текста. Это потому что люди ленивы и предпочитают, когда идею преподнесут им на блюдечке с голубой каёмочкой. Мы всегда добавляем видео на наши целевые страницы, чтобы показать и рассказать, как Intercom помогает проделать работу.
Мы стремимся к тому, чтобы все наши видео длились меньше двух минут (ну или максимально приближенно к двум минутам). Ребята из Wistia уверяют, что чем короче видео, тем вероятнее, что его досмотрят до конца. Мы им верим.

А вот пример видео, которое мы делали для нашей страницы об обратной связи.

Создание продуктового видео трудоёмко и занимает много времени. Наш видеоэксперт Руаири собрал вместе советы, которые помогут вам начать.

6. Закреплённая навигация: сделайте ключевую информацию легкодоступной

Наши лэндинги длинные. Возможно, вы слышали миф о том, что длинные страницы не продают и короткие страницы, которые не надо листать, лучше. Может быть, это верно для страниц с невовлекающим контентом. Но, если контент вовлекает, я гарантирую — люди будут листать. Если хотите доказательств, прочитайте пост Unbounce «Размер имеет значение: длинное и короткое в конверсионном маркетинге».

На каждом нашем лэндинге при пролистывании появляется закреплённое меню — навигационная панель, которая «прилипла» к верхней части вашего браузера. С помощью него можно быстро перейти к главным секциям страницы.

Как создать продающий лэндинг — закреплённое меню

7. Обзор: расскажите людям, что они могут делать с помощью вашего продукта

Теперь, когда вы заинтересовали свою аудиторию, вернитесь к собственным заявлениям. Для нас это означало разбить работу, которая должна быть проделана, на несколько легко перевариваемых кусков. Эти «подработы» составляют блок «Обзор» на каждой целевой странице.

Для каждой работы мы оформляли эти блоки по-своему. На странице понимания клиентов мы подчеркнули ключевые вопросы о клиентах, которые, скорее всего, актуальны для вашего бизнеса. Каждый вопрос мы сопроводили зацикленным видео, где видно, как легко ответить на эти вопросы с помощью Intercom. Каждое видео начинает проигрываться автоматически, когда вы достигаете нужной секции страницы.

Как создать продающий лэндинг — видео

8. Фичи: объясните, как продукт выполняет работу

Чтобы выполнить вещи, которые вы только что пообещали выполнить, ваш продукт должен иметь конкретные функции. Людям не нужны все фичи, которыми обладает ваш продукт, им нужна только та единственная, что выполнит работу, которая должна быть проделана. Учитывая это, мы разбиваем секцию «функции» на наших лэндингах на две части.

«Ключевые фичи» — необходимые. Это те важные функции вашего продукта, благодаря которым работа оказывается выполнена. В некоторых случаях они отличают вас от ваших конкурентов. Мы ясно объясняем, что это за функции, и даём им достаточно пространства на странице.

Как создать продающий лэндинг — главные фичи

Дальше идут «табличные» фичи, которые не являются ключевыми для выполнения работы, но важны, чтобы от отделиться от конкурентов. Мы спроектировали этот блок в виде сетки — так его легко просматривать и использовать как чеклист.

Как создать продающий лэндинг — таблица фич

9. Выделите ключевых клиентов, чтобы вызвать доверие

Очень важно установить доверие, особенно если продукт новый. Обзор ваших самых узнаваемых клиентов — быстрый способ добиться этого. На каждой странице мы используем два способа демонстрации наших клиентов.

Ниже — геройский блок каждой нашей страницы. В нём мы показываем лого клиентов, которые с одной стороны, хорошо узнаваемы, а с другой — с наибольшей вероятностью будут резонировать с нашей целевой аудиторией.

Как создать продающий лэндинг — лого клиентов

Лого показывают посетителям, что существуют реальные бизнесы, которые используют ваш продукт. Однако в конечном счёте люди доверяют людям. Фото клиентов в целом гораздо более вовлекающие, чем лого. Поэтому на каждой странице вы можете видеть фотографию настоящего клиента и цитату о конкретной функции, которая помогает выполнять конкретную работу.

Как создать продающий лэндинг — блок с клиентами

10. Расскажите людям, сколько это стоит

Ключевой вопрос, на который люди хотят получить ответ, — «могу ли я себе это позволить?». Ваша задача в том, чтобы они смогли легко найти ответ.
На каждой нашей странице за исключением бесплатных предложений, располагается блок с ценой, где вы можете быстро понять, во сколько вам обойдётся Intercom для конкретной работы.
Как создать продающий лэндинг — блок цен

11. Сделайте регистрацию простой

Это легко. Если вы не дадите ясно понять, как попробовать ваш продукт, никто не попробует. Поэтому мы включаем многочисленные призывы к действию по всей странице.

Вот этот блок находится прямо под геройским блоком для тех, кто убедился сразу, пришёл по рекомендации человека, который «продал» ему продукт, или для повторных посетителей, уже готовых нажать на кнопку.
Как создать продающий лэндинг — CTA

Ещё один такой блок есть ближе к подвалу лэндинга и один — в закреплённом меню.

Расположение — это только одна вещь, о которой стоит подумать, другая — сам блок подписки. LeadPages написали отличный пост про тренды в лэндингах и рассказали всё в деталях. Зацените тренд № 7 «Использование желаемого действия для блока с кнопкой», чтобы получить больше советов и примеров.

12. Измеряйте показатели, тестируйте лэндинг, работайте итерациями

Какая конверсия хорошая? Правильного ответа нет. Конверсия зависит от типа лэндинга, индустрии, продукта. Например, страница с бесплатным сервисом для скриншотов, скорее всего, будет конвертировать лучше, чем платное решение для email маркетинга. Нет жёстких правил относительно конверсии, но можно быть уверенным в одном — её всегда можно улучшить. К счастью, есть огромное количество хороших инструментов, которые помогают понять, что работает, а что нет, и экспериментировать. Вот несколько из тех, которые стоит попробовать.

Отслеживайте трафик и конверсию в цели с Google Analytics

Добавьте код до того, как повесите страницу на сайт, и вы сможете отслеживать визиты, просмотры страниц, конверсию в цели и много чего ещё. Я уже говорил, что это бесплатно?

Следите, как посетители взаимодействуют с вашей страницей с помощью Inspectlet

Используя тепловые карты, мы можем наблюдать, на что кликают люди или что они читают. Мы также используем тепловую карту прокрутки, чтобы посмотреть, насколько далеко люди листают наши длинные страницы. На картинке ниже вы можете увидеть, что 50% наших посетителей листают страницу до середины. Учитывая её длину, это говорит о том, что контент вовлекающий.

Если мы видим, что посетители не листают страницу, наши команды маркетинга и исследований собираются вместе, чтобы изменить её дизайн. Новую версию мы тоже будем изучать с помощью Inspectlet.

Проведите исследования с помощью UserTesting.com

Usertesting.com позволяет вам получать видео с реальными людьми, которые используют ваш продукт, будь то веб-сайт, мобильное приложение или даже прототип. Пока они пробуют ваш продукт, они проговаривают вслух, как проходит их взаимодействие. Вы можете задавать этим людям вопросы или давать им задания (например, найти на сайте определённый товар — прим. ред.).

Одна из сильных сторон Usertesting.com — это опции по редактированию видео, заточенные специально для исследовательских целей: вы можете быстро записать комментарии к видео или выделить какой-то момент, например, как 5 пользователей комментирует вашу страницу цен. С помощью этих видео вы сможете отследить недостатки юзабилити или сомнительные моменты взаимодействия пользователя со страницей. Вы можете переслать ссылки на эти видео своим коллегам и убедить их в том, что что-то нужно переделать.

Проверьте свои гипотезы с помощью Optimizely

Кроме информации, полученной с помощью этих инструментов, вы наверняка имеете и собственные соображения, что нужно протестировать. Попробуйте Optimizely. Хотите ли вы протестировать новый цвет или призыв к действию на кнопке, Optimizely поможет сделать это с удивительной лёгкостью.
Недавно мы тестировали одну вещь на странице вовлечения клиентов — попробовали убрать целый блок с таблицей фич. Гипотеза состояла в том, что при такой длине страницы, мы могли бы отказаться от некоторого контента, и она будет конвертировать лучше. Гипотеза не оправдалась — оригинальная версия конвертировала лучше. Урок усвоен.