Как составить грамотное ТЗ на продающий лендинг за 60 минут и ничего не упустить

Татьяна Голод, руководитель отдела дизайна и разработки агентства moab, принесла удивительное — шаблон ТЗ на лендинг и полноценную инструкцию по его использованию. Что, как и зачем заполнять — фактически это гайд по созданию продающего лендинга с примерами и рекомендациями. Инджой!

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

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

В нем можно просто удалять ненужное (то есть то, что не актуально для конкретной задачи), менять блоки местами и оставлять свои комментарии для исполнителей по каждому блоку/элементу.

Поэтому можно сказать, что эта статья будет полезна всем, перед кем стоит задача поставить задачу. Будь то представители бизнеса (овнеры, тимлиды, маркетологи) или агентства (ПМы, тимлиды, редакторы).

Ну и сразу определимся, что мы понимаем под лендингом.

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

Да, это выглядит просто и без изысков, но это удобно и легко масштабируется.

Вкладка «Структура» — сама главная. В ней, собственно, отражен набор блоков лендинга и их состав. Блоки лендинга собраны в смысловые группы и размечены цветовым кодом. Руководство по созданию каждого блока разбито на 6 столбцов.

Вкладка «Общие данные» заполняется в свободной форме. Там для удобства можно разместить ссылки на бриф, материалы для копирайтера и иную существенную информацию. Там же мы разместили памятку для редактора по работе с документом и подготовке текстов.

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

Здесь и далее мы используем понятия «заказчик» и «исполнитель», но, строго говоря, речь может и не идти о двух разных компаниях. Действие может происходить внутри агентства, где заказчиком будет, например, собственник, руководитель отдела, менеджер, а исполнителем — маркетолог, дизайнер, тимлид разработки.

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

Итак, есть 2 типа заказчиков: «сделайте на свое усмотрение» и «никто лучше меня не знает мой продукт».

Если вы относитесь к первому типу, то работать с файлом вам, по всей видимости, не придется, но в этом и есть его сила: там уже перечислено всё, что на ленде по-хорошему должно быть. Вы просто вручаете исполнителю файл со словами «У меня есть базовое ТЗ от MOAB.pro», а дальше уже его задача подготовить тексты по каждому актуальному для проекта блоку и запросить у вас недостающие материалы.

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

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

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

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

Важно отметить, что порядок блоков менять можно, и даже нужно, отталкиваясь от специфики ниши. Например, если наличие лицензии/партнерского сертификата — это важный триггер, то логично поднять его выше на странице. Рабочие названия блоков тоже могут меняться в зависимости от ниши. Например, если речь идет про лендинг о вебинаре или курсе, то «Команду» логично заменить на «Спикеры» и добавить блок «Расписание».

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

1. Кто ваша целевая аудитория

То есть для кого делаем посадочную страницу.

Возраст, пол, род деятельности, предпочтения, что ищут, что триггерит.

Пример хорошо сформулированной ЦА, заказчик st-ups.ru, продажа погрузчиков:

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

Пример плохо сформулированной ЦА:

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

2. Боли вашей ЦА

То есть проблемы и страхи, с которыми приходит к вам ваш пользователь.

Пример хорошо сформулированной клиентской боли от нашего заказчика, дистрибьютора отечественных печей для бани в США:

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

3. Кто ваши конкуренты, чем вы от них отличаетесь

Это поможет сформировать УТП, подобрать референсы, определиться с набором блоков, отталкиваясь от практики других игроков рынка.

Пример хорошо сформулированных конкурентных преимуществ из брифа нашего заказчика smartofood.ru, digital-платформа для предприятий общепита:

Пример плохо сформулированных конкурентных преимуществ (как ни странно, из каждого второго брифа):

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

Даже этот скромный набор можно довести до ума, добавив конкретики, например:

Наличие фирменного стиля: логотипа, брендбука.

Предпочтения по стилистике сайта — при наличии.

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

Какими источниками информации исполнитель может пользоваться для подготовки контента.

Чтобы интересно (и полезно) рассказать о продукте, исполнитель должен понимать, что это за продукт. И задача заказчика — предоставить исполнителю материалы, которые помогут ему это сделать, или как минимум задать правильное направление для поиска.

Для текстов:

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

Для визуала:

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

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

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

Или как его еще называют — intro-блок. Блок, с которого начинается знакомство с продуктом.

Беглого взгляда на блок должно быть достаточно, чтобы понять, что предлагается на странице. Убедитесь, что в первом экране есть:

Очень часто есть потребность в 2 разных целевых действиях. Например, «Консультация» и «Посмотреть примеры работ», или «Расчет стоимости» (ведет в квиз) и «Заказать звонок».

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

Не стоит перегружать шапку другими функциями.

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

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

К слову, если в панели есть блок навигации (для лонгридов обязательно, для компактных страниц может быть избыточным), то пункт «Контакты» — должен быть последним, равно как и сам блок «Контакты» — последний на странице перед футером.

Именно тут следует разместить все актуальные контактные данные.

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

Скрины из формы ТЗ: шапка, контакты и футер в полном варианте:

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

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

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

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

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

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

Пример:

Прозрачное объяснение, как пользователь может решить свою боль в N простых шагов. Наливаете воду, включаете в розетку, настраиваете параметры увлажнения. 2 минуты — и ваши растения говорят вам спасибо. Если речь идет об услуге, то это могут быть этапы работ: заполнили бриф — написали ТЗ — сделали прототип — нарисовали макет — сверстали на Тильде — вуаля, ваш лендинг готов.

Пример:

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

Задача блока — помочь пользователю преодолеть типичные для ЦА сомнения и страхи. Например, опровергнуть мифы и ложные слухи об услуге; заверить, что на товар дается гарантия и обслуживание оборудования будет бесплатным в течение гарантийного периода; пообещать возврат средств при невыполнении тех или иных условий; ответить на популярные вопросы формата "а что если…? а вдруг…?"

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

В противном случае это уже не лендинг, а интернет-магазин.

Тем не менее, если предложений несколько (например, 2-3 услуги; 4 модификации товара), то напрашивается наличие карточек продукта. Что на них желательно осветить:

Что делать, если товаров/услуг много? Например, есть оптовый поставщик продукции с огромным каталогом и непростой ценовой политикой. Самый очевидный вариант — ограничиться категориями вместо товаров и закрывать лиды на получение полного прайс листа/коммерческого предложения.

Другая опция — закрывать лид на подбор продукта под требования заказчика (например, подбор подходящих под параметры покупателя объектов недвижимости) или расчет стоимости (например, сколько будет стоить сделать сайт по вашему ТЗ).

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

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

Лидмагнит

Блок баннерного типа для привлечения лидов через бесплатные товары/услуги, а также специальные предложения, акции, подарки. Здесь можно сделать акцент на упущенную выгоду, на экономию и ограниченный срок предложения (таймер обратного отсчета). Таймер создает у посетителей ощущение срочности. Срочность ведет к таким психологическим явлениям, как чувство дефицита, страх упущенной выгоды, страх потери. Наличие такого инструмента как таймер способно увеличить конверсию в 3 раза.

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

Трипвайер

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

Ловец лидов

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

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

Квиз

Пошаговая форма для сбора данных о потребностях клиента. Целью квиза может быть подбор оптимального продукта (товара или услуги) или расчет стоимости. Помните, что наличие квиза на сайте способно увеличить конверсию до 40%.

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

Блок о компании

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

Мы в цифрах

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

Сертификаты, лицензии

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

Премии и награды

Речь идет как о достижениях в профильной сфере («Предприятие года по версии …»), так и участие в специализированных программах («Золотой партнер») и рейтингах («Топ-10 в рейтинге Рунета»). Обязательно выложить пруф: диплом, значок, ссылка на источник.

Фотогалерея

Галерея работ, фото «до» и «после», фотографии производственного процесса, будь то лепка пельменей или тренировка по боксу.

Видео

Доказано, что наличие видео может повысить конверсию лендинга на 80%. По статистике, 64% посетителей сайта после просмотра видео о продукте совершают покупку.

Обращение руководителя

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

Команда

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

Социальное доказательство

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

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

Реальными — то есть не выдуманными. С пруфами, фотографиями, чтобы пользователь видел, что история на 100% реальна. Хорошо, если автор отзыва согласен по запросу предоставить свой контакт, чтобы дать обратную связь при необходимости. Конверсия возрастает на 15%, если пользователь уверен, что отзывы на сайте оставили реальные люди.

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

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