Сайт на Тильде с простецким дизайном и картинками от руки помог продать услуг и специализированных курсов на 512 000 руб

Клиенты брали самые дорогие пакеты, а один сказал: «Это лучшее описание продукта, что я видел». Заказчик был загружен с января по март — старый сайт так не мог. Подробные этапы от обсуждения задачи до запуска, редакторские приёмы (например, визуальное повествование), подход и фишки. Всем, кто прокачивает b2b-сайт в 2022.

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

Обычно ко мне приходят с b2b-продуктом, часто сложным и не вполне понятным для аудитории. Тут как раз такой случай.

О чем пойдет речь:

• Чем занимается компания
• Обсуждение задачи
• Разбор страницы курса
• Глубинное интервью
• Прототип в Figma
• Сборка лендинга в Тильде
• Подготовка страницы с услугой и главной
• Перелинковка со старым сайтом и запуск
• Результат — 10 заказов на 596 тысяч и 512 тысяч выручки

Погнали.

Иван — руководитель компании «ХАССП Ликбез». Компания занимается разработкой и внедрением специальных процедур на пищевых производствах, в том числе общепит-предприятиях: кафе, столовых и т. п. Задача этих процедур — обеспечить безопасность продукции для конечного потребителя. ХАССП расшифровывается как Hazard Analysis and Critical Control Points — анализ рисков и критические контрольные точки.

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

В «ХАССП Ликбез» обращаются разные виды компаний: общепит-предприятия — столовые, кафе и рестораны, компании по доставке еды, выездные кухни для вахтовиков, корпоративные отделы питания.

Продуктов два: услуга и курс. Разработка процедур ХАССП — это услуга, которую оказывают Иван и его помощники-эксперты. Обычно её заказывают клиенты, которые не хотят глубоко вникать в суть вопроса.

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

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

Мы с Иваном созвонились и обсуждали его проект примерно 1,5 часа. О чем поговорили:

• Что за продукт, какую проблему решает, когда нужен
• Кто покупатель, что ему важно, какое действие можно предложить
• Зачем понадобился сайт, в чем его задачи
• Как заказчик намерен использовать его
• Кто комментирует результат и принимает решение
• К какому сроку нужно успеть и почему

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

По ходу беседы стала ясна ситуация и что с ней делать. Если вкратце, всё выглядело так:

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

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

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

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

Только есть два нюанса:

• Вопросы нужно корректировать исходя из ситуации заказчика. Если нужен лендинг, это одни вопросы, если текст на существующий сайт — другие. Где-то вопросов будет больше, где-то меншье.
• Невозможно предвидеть все вопросы заранее. Ведь когда заказчик отвечает, появляются уточняющие вопросы, ответы на которые позволяют увидеть более полную картину. Именно поэтому переписка для такой беседы не подходит: слишком долго. Намного быстрее обсудить всё вживую.

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

Запустить одностраничник быстрее, чем сайт из трёх страниц. Так что решение заказчика было вполне разумным.

Убрали часть работ, чтобы сэкономить. У меня есть два варианта лендинга — полный и упрощенный. Разница в объёме работы: в упрощенной версии нет анализа конкурентов, SEO-оптимизации и некоторых других второстепенных работ, плюс дизайн там попроще.

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

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

Для Ивана я подготовил разбор старой страницы курса. Обычно я выкладываю разборы на Ютуб-канал, однако Иван попросил этого не делать. Я был не против.

Мы с Иваном договорились так: если в результате он закажет лендинг, то я вычту стоимость разбора. Посмотрев разбор, заказчик решил — работаем.

Интервью проходило по стандартному сценарию, который устоялся за несколько лет редакторской практики.

Я посмотрел сайт и некоторые материалы от заказчика — в частности, пример разработанных процедур. Договорился о созвоне, попросил заложить 1,5—2 часа.

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

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

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

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

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

С некоторых пор я просто записываю беседу и фокусируюсь на вопросах и ответах заказчика.

Проводить интервью можно в любом мессенджере. Я использую Zoom, потому что в нём есть встроенная запись разговора. Но можно созваниваться и в Телеграм, а разговор писать любым скринкастером, например, OBS или HyperCam.

Чтобы получить расшифровку, я публикую на Воркзилле задание со ссылкой на аудиозапись. Реже ставлю задачи конкретным расшифровщикам, с которыми уже работал. Адекватная цена за такую работу — 10–20 руб/мин.

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

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

Почему первый экран получился именно таким:

• Картинка показывает результат. Смысл прост: до курса у клиента хаос в процессах и документации, а после — всё по полочкам. Цвет создает доп.акцент на результате. Иллюстрация нарисована в Фотошопе. Может, она не самая привлекательная, но главное — тот смысл, который она сообщает. Это работает лучше красивых, но бессмысленных фото из сети, да и выглядит интереснее.
• В заголовке — название продукта. Так мы сразу даем понять клиенту, что он пришёл туда, куда хотел. Поисковые запросы мы не собирали, но я всё равно посмотрел Вордстат, чтобы оптимизировать заголовок: «разработка ХАССП» — самый популярный коммерческий запрос, также популярны слова «процедуры», «внедрение» и «общепит».
• В подзаголовке — краткая суть курса, зачем он нужен и что внутри. Таким образом мы сообщаем пользователю, чего ему ожидать от страницы. Естественно, всё упомянутое в подробностях описано в отдельных блоках.
• В мелком тексте — для кого этот курс, чтобы клиент сразу узнал себя.

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

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

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

Помогли клиентам узнать себя и свои задачи. Обычно в таких блоках либо просто называют клиентов, либо пишут ерунду вроде «Курс для вас, если вы хотите...», ну а дальше сладкие обещания. Я решил пойти другим путём: обозначить, кто приходит на курс, и добавить пользу для каждого вида участников.

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

Показали, что заниматься нескучно. Занятие длится два часа — это немало и может вызвать сопротивление у клиента. Чтобы это предотвратить, я решил визуализировать структуру занятия.

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

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

Блок является частью более крупного блока «Как проходит обучение».

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

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

Форма заявки есть не только в конце: по ходу страницы несколько раз встречаются разные призывы.

Издалека прототип выглядит так:

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

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

Вначале мы запустили страницу курса как отдельный лендинг на поддомене:

Как и прототип, дизайн создавался в несколько этапов:

1. Придумали концепцию, показали первые два экрана.
2. Отрисовали ПК-версию.
3. Сверстали мобильную версию.

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

Следующим этапом подготовили еще одну продуктовую страницу — о разработке процедур. Этапы были всё те же: интервью → прототип → дизайн.

Что тут из интересного:

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

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

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

Показали результат через скриншоты. Можно написать много хорошего текста, но некоторые вещи все же стоит показывать.

Здесь по результатам оказания услуги клиент получает набор документов и материалов для внедрения на производство. У многих конкурентов это просто текстовые документы. Материалы заказчика выглядят гораздо интереснее.

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

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

В последнюю очередь нужно было подготовить главную страницу. У неё было несколько задач:

• Рассказать общую информацию о «ХАССП Ликбез»
• Навигационная: показать, что еще есть на сайте

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

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

С одной стороны, это текст о «ХАССП Ликбез». С другой, он в большей степени о клиенте, а не о самой компании.

Лендинг курса запустили в начале ноября, а в последних числах подтянулись еще две страницы.

Чтобы клиенты могли попасть с блога или Ютуба на продуктовые страницы и обратно, мы определенным образом настроили ссылки:

• Если на старом сайте кликнуть на «Разработку ХАССП», «Обучение ХАССП» или «О компании», то попадешь на соответствующую страницу нового сайта.
• Если на новом сайте кликнуть на блог, то попадёшь на статьи старого сайта.

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

Теперь неважно, с какого сайта клиент начал знакомство с компанией — он в любом случае может посмотреть и образовательные материалы, и рекламные.

Иван рассказал, что за три месяца результаты были такими:

• 2 продажи курса: один средний пакет (28 670 руб) и один дорогой (87 800 руб)
• 8 продаж услуги по разработке: пятеро клиентов выбрали средний пакет (38 970 руб), трое — дорогой (94 870 руб)

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

Оплат было на 512 тысяч: не все клиенты на тот момент заплатили полностью.

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

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

Делюсь опытом, как делаю лучшие информационные продукты (прототипы, сайты, статьи, тексты, видео), как работать с клиентом и зарабатывать фрилансом, публикую вакансии о работе с текстом у себя в Телеграм-канале. Подписывайтесь → https://t.me/krometexta

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