Как сделать лендинг онлайн-курса

Лендинг онлайн-курса — это посадочная страница об образовательном продукте, которая должна привлекать внимание, заинтересовать посетителя сайта и убедить его купить курс. Какие шаги нужно предпринять, чтобы разработать эффективный лендинг онлайн-курса и запустить его на Тильде — поделились эксперты из SETTERS EDUCATION: digital-тимлид Наталия Катерова и веб-дизайнер Мария Шкляева. Статья будет полезна маркетологам и создателям образовательных продуктов, которые хотят самостоятельно запустить страницу о курсе.

Первый этап в создании лендинга — получить ответы на ключевые вопросы:

• Какая цель создания лендинга?
• Какие задачи он будет решать для бизнеса и для пользователя?
• Для какой целевой аудитории создаётся?
• Какие есть прямые и косвенные конкуренты на рынке?
• Сформирован ли спрос на вашу услугу?

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

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

Возможная структура лендинга онлайн-курса:

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

• Главный экран
  Первым, что видит посетитель сайта — главный экран с крупным заголовком, который должен быть понятным и максимально отражать суть курса. На нём также могут быть даты курса, короткое описание в 1-2 предложения, графические элементы и CTA-элемент, который будет призывать человека к действию. Например, кнопка с предложением записаться на курс или элемент, который побуждает пролистать лендинг дальше.

• Описание курса
  Вторым блоком раскройте информацию о курсе: о чём он, чему научится человек в процессе обучения, какая ключевая ценность курса.
  
• Кому подойдёт
  

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

  
  

• Особенности обучения

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

• Программа курса

  В программе укажите, из каких блоков состоит курс, какие темы и инструменты будут изучать студенты.

• Кураторы

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

• Отзывы

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

• Преимущества и отличительные черты

  Если вокруг бренда есть яркое сообщество и студенты курса уже объединились в комьюнити — расскажите об этом. Так, у SETTERS EDUCATION есть страница о выпускниках курса по креативному лидерству — alumni club. Такая черта может выделить вас на фоне конкурентов и стать аргументом в пользу выбора вашего продукта.

• Лид-форма

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

Зачастую бывает так, что продуктовый отдел или клиент приносит на брифинге глобальную мысль о новом курсе, главные мысли, особенности, не имея при этом детально проработанной программы. И это нормально, потому что создание курса, его методология — это процесс, которому нужно время. Чтобы не терять время до запуска и получать предварительные заявки на курс, спрогнозировать спрос на него, мы сначала делаем мини-лендинг, где отображаем главные блоки: о чём курс, для кого, как будет проходить обучение, какой будет результат, форма заявки. Дальнейшие вопросы по начинке курса прорабатываются нашим отделом продаж. Вот пример такого лендинга: https://setters.education/mini-lending.

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

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

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

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

Используйте в качестве референсов сайты, которые вам понравились. Примеры красивых сайтов можно найти в #madeontilda — галерее лучших проектов пользователей Тильды. Из референсов создаётся мудборд — коллекция из изображений, цветовой палитры, типографики, которые будут передавать стиль и настроение вашего проекта.

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

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

Главный экран

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

Текстовый блок

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

Блок с карточками

Одну и ту же информацию можно показать по-разному. Старайтесь разнообразить дизайн лендинга, например, в одном блоке показать карточки в три колонки, а в другом — в две. Где-то можно добавить иконки или иллюстрации. Это поможет сделать композицию более динамичной и не даст посетителю сайта заскучать.

Программа курса

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

Форма заявки

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

• Настройте формы, чтобы заявки приходили в привычный для вас приёмщик данных.
• Чтобы принимать оплату на сайте, подключите платёжные системы. Если ваш курс сделан в конструкторе курсов Тильды, вы можете настроить автоматическую выдачу доступа на курс после его оплаты. Это удобно, если у вас большой поток студентов.
• Проверьте, как выглядит лендинг на разных разрешениях в разных браузерах и устройствах.
• Оптимизируйте страницу для SEO, чтобы она лучше индексировалась поисковиками.
• Подключите систему аналитики, чтобы отслеживать, откуда приходят пользователи и как они ведут себя на сайте. Можно использовать внутреннюю аналитику Тильды или сторонние сервисы для более глубокого анализа, например, Яндекс Метрику.

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

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

На какие показатели смотреть:

• посещаемость страницы: общую и из разных источников (реклама, прямые заходы, поисковые системы, соц сети и так далее),

• отказы,
• глубину просмотра страницы,
• время посещения,
• карту кликов,
• карту скролла,
• вебвизор.

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

Если вы хотите узнать больше о создании лендингов, рекомендуем пройти бесплатный курс «Создание Landing Page» от Тильды. Вы научитесь проектировать, оформлять и запускать конверсионные лендинги и увеличивать количество клиентов. На Tilda Education вы найдёте и другие полезные практические руководства по дизайну и маркетингу для цифровых проектов.