Лендинг для запуска B2B-продукта

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

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

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

1. Интервью

   Четыре разговора с логистами из целевых компаний. Формулировка проблемы взята из их слов, а не из описания продукта, — это и стало заголовком первого экрана.

2. Структура

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

3. Дизайн

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

4. Сборка

   Статическая генерация, изображения в AVIF с явными размерами, шрифты со своего домена. Калькулятор считает на клиенте и работает без обращения к серверу.

5. Замер

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

• HubSpot — заявка уходит в воронку с меткой источника
• Plausible — аналитика без cookie-баннера и персональных данных
• Vercel — превью каждой правки для согласования с командой

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

• Доступность по WCAG 2.1 AA: контраст, порядок фокуса, подписи полей формы
• Форма заявки работает без JavaScript — это единственное действие на странице
• Калькулятор при выключенном JS показывает готовую таблицу вместо пустого блока
• Lighthouse на мобильном профиле выше 95 по всем четырём разделам
• Разметка Organization и FAQ, канонические адреса, sitemap
• Нет горизонтальной прокрутки от 320 px, текст читается при масштабе 200%

• ×2.1

  Заявок с той же рекламы

  Три недели до запуска лендинга против трёх после, тот же бюджет и те же объявления. Событие — отправленная форма.

• −52%

  Цена заявки

  Расход на рекламу, делённый на число заявок, за те же два периода.

• 18% → 41%

  Дочитывают до формы

  Доля сессий, дошедших до блока заявки. Событие видимости, мобильный и десктоп вместе.

• 0.9 с

  Загрузка первого экрана

  LCP на мобильном профиле Lighthouse, медиана по десяти прогонам.

• Интервью, структура и тексты — лично, вместе с основателем продукта
• Дизайн-система и вёрстка — лично
• Запись экранов продукта — команда клиента по подготовленному сценарию
• Настройка рекламы — подрядчик клиента, я передал события и метки

• Next.js
• TypeScript
• CSS Modules
• Figma
• Vercel
• Plausible