Почему не работает лендинг: как мы усилили продающую страницу для онлайн-курса Психодемии

ЗаказчикКомпания «Психодемия» — психологическая онлайн-школа с государственной образовательной лицензией. Проводит онлайн-курсы в сфере психологического консультирования и коучингаЗадачаПереработать структуру лендинга и текст так, чтобы люди чаще оставляли заявки и подписывались на прогревающие рассылки

дко в каком кейсе показывают процесс работы. Чаще: точка А, какие-то действия, точка Б, отзыв. Мы же приглашаем вас посмотреть на процесс работы над продающим лендингом. Результаты под NDA, зато вы увидите закулисье. Мы в агентстве 4Х называем это «постоять за спиной у специалиста», подглядеть, чем он руководствуется, когда структурирует информацию и пишет текст для лендинга. 

 Кто клиент

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

Задача

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

Итак, давайте вместе разберемся, как сделать лендинг продающим за 4 шага.

Шаг 1. Усилить первый экран лендинга

Первый экран лендинга — самый важный. Если он не цепляет, посетитель может просто закрыть страницу. Именно поэтому на первый экран нужно вынести ключевые моменты. Вот пример:

9e15827d5ff2dec94430ded6c32118e4.png

Текст на первом экране должен быть не слишком длинным, при этом емким и понятным. А главное — цепляющим. Нужно показать, для кого продукт, какие преимущества он дает.

Посмотрите, как мы изменили первый экран лендинга. Все скриншоты — из рабочего инструмента, именно так их видит клиент еще до верстки:

0b60164fac6179b0fe81ee20b197de96.png

 Проблема старого экрана лендинга — мало выгод. Читатель видит, что может стать коучем и получить сертификат, но что это ему даст?

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

Когда проверяете первый экран лендинга, убедитесь, что:

  • здесь нет ничего лишнего, отвлекающего от сути;
  • зато есть ключевые моменты, которые могут зацепить читателя;
  • а еще сразу понятно, что конкретно вы предлагаете и почему это выгодно.

Часть аудитории отсеется уже здесь: люди увидят, что им не подходит продукт, не нравятся условия и так далее. Тут нет ничего страшного — просто это не ваши клиенты.

Шаг 2. Переработать структуру лендинга

Главная проблема старого лендинга — на нём было слишком много призывов к действию. Читателю предлагали отправить заявку на курс, пройти квиз, оставить email в обмен на бесплатный вебинар, заказать обратный звонок, забронировать место и подписаться на соцсети «Психодемии».

aa65016157c6e05d49d76ef2f45ca84b.png

Это только один фрагмент лендинга, и сразу три призыва к действию

Для одной продающей страницы это чересчур — получается путаница. Хуже того, это мешает бизнесу достигать конкретной цели.

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

Поэтому мы полностью переработали структуру лендинга, избавились от некоторых блоков и уводящих со страницы ссылок, которые отвлекали читателя от заявки. Каждую правку аргументировали, чтобы клиент понимал, почему мы предлагаем сделать именно так:

 c984bfb05e90957f8c727e26b00a1d24.png

Поменяли местами некоторые блоки с обоснованием, почему так будет логичнее:

 3885983f405c0d09647121389ec3ec2f.png

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

В итоге все призывы к действию, которые заказчик решил оставить на лендинге, работали на то, чтобы читатель попал в базу клиентов.

 ddfd8c09739ef881dfc69cc07156b34b.png

Как сделать структуру продающего лендинга?

  • Подумайте, почему человек может не купить с первого экрана. Сгруппируйте и распределите эти причины в порядке убывания важности/частоты (ваши менеджеры по продажам могут дать много интересной информации на этот счет). Например: «Не знаю, можно ли доверять преподавателям» или «Не потяну, слишком дорого, вот была бы рассрочка…»
  • Каждой группе посвятите отдельный экран: ответьте на вопросы, отработайте возражения, добавьте доказательства того, что вам можно доверять.
  • Выберите одну, максимум две цели, которые вы хотите достичь: собрать базу контактов, привести людей в свои соцсети, получить больше заявок и пр. Добавьте призывы к действию и кнопки на лендинг — не только на первый экран, но и ниже, чтобы человеку не пришлось долго пролистывать страницу, если он уже готов купить.

Лендинг должен отвечать как минимум на эти вопросы:

  • В чем суть предложения и почему это выгодно?
  • Подходит ли это именно мне?
  • Сколько стоит? Как можно оплатить?
  • Почему я должен выбрать именно это предложение, а не купить в другом месте?
  • Что нужно сделать, чтобы получить продукт?

Шаг 3. Поработать с оформлением блоков лендинга

Главное правило: читателю все должно быть понятно. Буквально все: вплоть до того, куда ведет ссылка и что нужно писать в полях формы обратной связи.

По условиям договора, мы не могли менять утверждённый дизайн, но дали рекомендации по блокам. 

Например, изначально расписание курса было сделано в таблице, ссылка на неё стояла в тексте лендинга. Это неудобно:

  • читатель уходит с продающей страницы и может не вернуться;
  • со смартфона тяжело читать убористый текст в таблице. 

Кроме того, блок с расписанием был максимально непонятным. Мы дали такие комментарии:

 c8abd934e745002408134e7f36047ce5.png

Еще несколько простых рекомендаций по оформлению:

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

Шаг 4. Усилить блоки доверия

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

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

Можно и копировать текст отзыва на лендинг. Выглядит это красиво, но как доказать, что это слова реальных людей? Вдруг вы сами их написали?

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

39e7d928342bc2840ab122877e6851d4.png

Как сделать классный блок с отзывами:

  • Обязательно соберите развёрнутые отзывы клиентов. Отзывы «Спасибо, всё понравилось» не продают.
  • Лучше, если в отзывах будут реальные фото и имена. Никогда не пишите фальшивые отзывы — не разрушайте доверие к вам. Идеально, если вы можете сделать видеоотзывы.
  • Если используете скриншоты отзывов, а шрифт мелковат, дайте читателям возможность увеличить картинки по клику. 
  • Скриншоты не подходят по качеству? Перепечатайте отзывы, добавьте имена, фотографии их авторов и по возможности ссылки на страницы в соцсетях.
  • Ключевые моменты можно выносить в подзаголовки или выделять цветом, чтобы они сразу бросались в глаза.

Как мы уже говорили, результат под NDA, так что тут без деталей. Просто: клиента все устроило ;)

Если у вас есть свой лендинг и хотелось бы его доработать, пройдите по шагам, которые мы перечислили выше. Конечно, это не полный аудит, но и таких шагов может хватить, чтобы повысить конверсию. А если нужен лендинг с нуля или свежий взгляд на текст вашей посадочной страницы, напишите нам на hello@agency4x.ru. Ответим в течение одного рабочего дня.

Перейти на сайт

Полный текст статьи читайте на CMS Magazine