{"id":14287,"url":"\/distributions\/14287\/click?bit=1&hash=1d1b6427c21936742162fc18778388fc58ebf8e17517414e1bfb1d3edd9b94c0","title":"\u0412\u044b\u0440\u0430\u0441\u0442\u0438 \u0438\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0434\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0437\u0430 \u0433\u043e\u0434","buttonText":"","imageUuid":""}

Кейс: как я сделал лендинг для психолога и его обучения для работников в найме

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

Всем привет!

Увидел, что многим понравился кейс с Яной Миловой, поэтому решил написать подробную статью про еще один кейс с Александром Кравцовым.

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

Клиент — психолог со стажем более 25 лет

Александр Кравцов, несколько фактов в цифрах:

  • Более 7000 человек прошли курсы по психологии и манипуляции
  • Манипулятор № 1 в РФ
  • Топ-2 Apple Podcasts в нише психологии

Основная задача на сотрудничество

Сделать редизайн текущего сайта курса “Манипуляция в офисе” с целью увеличения конверсии и собрать его на платформе Тильда.

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

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

сроки разработки сайта — 7 дней

3
часа на анализ
5
дней на дизайн
2
дня на вёрстку и настройку

Этапы работы:

  • Созвон и обсуждение задачи
  • Подготовка структуры сайта
  • Референсы
  • Концепции первых экранов и утверждение стиля
  • Дизайн ПК версии и мобильной версии
  • Верстка сайта на Тильда
  • Техническая настройка
  • Передача сайта заказчику

Созвон и обсуждение задачи

Обсуждение проекта было проведено в 2 встречи в телеграм и зум. Сначала мы познакомились и узнали друг друга, а затем я задал несколько вопросов относительно:

  • Задач сайта: обработка входящего трафика из бота или контекстной рекламы, нам нужно было это определить и исходя из этого принимать решение о структуре сайта.
  • Уточнил несколько вопросов по стилистике: важно было понять, для кого мы делаем, чтобы затем был максимальный отклик от аудитории.
  • Целевой аудитории и её качества: род деятельности аудитории, интересы, пол, желаемые задачи. Теплый или холодный трафик на сайте, в нашем случае теплый.
  • Инфопродукта: премиальный сегмент или нет, это курс или наставничество, какой средний чек, воронка продаж и тд
  • Сроков: срочная задача или есть время для творческого маневра

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

Подготовка структуры сайта

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

Референсы

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

Концепции первых экранов и утверждение стилистики

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

Разработка дизайна ПК и мобильной версии сайта

Переходим к самому интересному моменту в статье!

После утверждения первого экрана я принялся за редизайн остальной части сайта. Использовал самые актуальные на тот момент цвета и шрифты, хотел сделать вау-эффект. И у меня это получилось! Сайт выглядит достаточно нестандартно! Более подробно про визуальную часть можно просмотреть на моём Behance, а пока вернусь к пояснению маркетинговых решений в структуре сайта.

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

Сейчас сайт работает по такой логике:

1. Первый экран + оффер: рассказываем, что за программа, сколько длится, когда старт. Есть возможность сразу собрать заявку на обучение, человек нажимает на кнопку и его сразу переводит к тарифам. Это удобно для тех, кто намерен изменить свою ситуация и принять решение сразу после того, как выйдет из бота. Во многом это обеспечивает хорошую конверсию сайта (в пике до 18%).

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

3. Третий блок. Здесь мы отстраиваемся от конкурентов и похожих продуктов по психологии и помогаем клиенту сделать выбор среди похожих продуктов. Плюс эти тезисы придают больше ценности при презентации программы.

4. Отзывы об обучении. В данном блоке мы делаем social-proof и показываем развернутые результаты программы. С учётом ниши, мы всё сделали правильно. Ученики описали свои ощущения и эмоции, это нам и нужно при продажах. в мягких нишах, когда сложно выцепить конкретные факты и тезисы. Также внушаем больше доверия о себе. Формат видео отзыва здесь можно было бы сделать, но без яркого акцента на этом.

5. Программа курса. Стандартный блок с пояснением того, что конкретно будет на обучении и какие можно будет получить результаты. Тут мы более подробно ознакамливаем человека с курсом, помогаем принять решение и ответить человеку на вопрос: “Что меня ждет на обучении?”

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

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

8. Блок для самых неуверенных. Здесь мы даем полную финансовую гарантию на курс, чем уже сильно отличаемся от конкурентов, так как ниша мягкая и сложно спрогнозировать какие-либо результаты. Условия возврата средств можно прочитать подробнее после покупки обучения и на сайте. Очень важно сказать, что этот блок помогает нам отработать остаточный трафик, так как примерно половина сразу уйдёт с сайта, еще 30% купит, а оставшиеся обдумают решение и оформят рассрочку! В итоге у нас win-win структура сайта, которая позволяет конвертировать теплый трафик в продажи, берите фишки себе на заметку.

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

Вёрстка на Тильда

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

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

Техническая настройка сайта

Тут можно описать просто, что было сделано:

  • настроены формы для сбора данных
  • настроены ссылки на оплату
  • настроены якорные ссылки для переходов
  • автозамена даты курса на первом экране (сделано под автоворонку продаж)

Передача сайта заказчику

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

Потыкать сайт самостоятельно — можно тут

На этом всё, спасибо за ваше внимание! А как вы презентуете свои работы клиентам? Расскажите про ваш опыт — со стороны заказчика или исполнителя.

0
20 комментариев
Написать комментарий...
jobisdone

Чисто Наливкин, депутат от народа 😂

Ответить
Развернуть ветку
Gleb Zaglyadnov
Автор

Ахахаха, я тоже думал об этом)))
Как большой начальник выглядит)

Ответить
Развернуть ветку
Илья Рыбаков

"Манипулятор №1 в РФ" - заявление серьезное)), а дизайн классный

Ответить
Развернуть ветку
Gleb Zaglyadnov
Автор

Благодарю за обратную связь! Да, заявление действительно сильное))

Ответить
Развернуть ветку
Strokolskij Andrzej

работа с текстом на 2, работа с пространством на 2, интерактивные элементы выглядят как png-картинки
подтягивайте)

Ответить
Развернуть ветку
Gleb Zaglyadnov
Автор

Окей, спасиб

Ответить
Развернуть ветку
Maxim Shishov

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

Ответить
Развернуть ветку
Gleb Zaglyadnov
Автор

Да, спасибо за заметку! Запрошу

Ответить
Развернуть ветку
Антон Иванов

И в другой позе: сейчас психолог выглядит как-то замкнуто из-за локтя, закрывающего его. Также, меня смущает жест рук, который используется для того чтобы подчеркнуть твердость в Своём мнении. Не хватает открытости к клиенту

Ответить
Развернуть ветку
Исторический кран

почему не предложили это приветствие?)

Ответить
Развернуть ветку
Gleb Zaglyadnov
Автор

Азазаза, прикольно)

Ответить
Развернуть ветку
Gleb Zaglyadnov
Автор

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

Ответить
Развернуть ветку
Petr Osetr

Чел, ты даже не попытался считать тут иронию)))

Ответить
Развернуть ветку
Gleb Zaglyadnov
Автор

Да, а зачем?

Ответить
Развернуть ветку
Олег Статком

Картинка прям топ. С учётом того, как выглядит большая часть сайтов психологов — вышка 🔥

Ответить
Развернуть ветку
Gleb Zaglyadnov
Автор

От души, спасибо за обратную связь, очень ценно!

Ответить
Развернуть ветку
Иннокентий Фефилов

Кран-манипулятор?

Лендинг это сайт под лендинга трафика. Под какой трафик сайт делали?

Ответить
Развернуть ветку
Gleb Zaglyadnov
Автор

Манипулятор - человек, который обладает навыком манипуляции для, достижения своих целей

Трафик (в маркетинге) - все люди, которые посещают сайт или видят рекламное объявление. На данном сайте трафик тёплый, то есть люди уже понимают, что им будут продавать курс и уже что то знают об авторе или узнали в чат Боте через цепочку писем.

Ответить
Развернуть ветку
Andrey Timofeevic
Ответить
Развернуть ветку
Илья

Прости господи, как все убого: шрифты, верстка, фото, кнопки. Психолог правительства Москвы зажал бабки на нормальных подрядчиков: ни фотографа, ни дизайнера, ни редактора🤦‍♂️стыд
Черный фон с певрого экрана - моветон моветоныч. Гребаные иконки🤦‍♂️🤦‍♂️🤦‍♂️
Даже знаю почему все так уныло. 1. Подрядчик теорию не читал и не читает. 2. Заказчик жмот.
Лайк за честность и откровенность👍 но вам, батенька, надо подтягивать скилы

Ответить
Развернуть ветку
17 комментариев
Раскрывать всегда