Империя рекламы: от визитки к инструменту лидогенерации

Контекст

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

Ограничения

Я работал один: исследования, дизайн и разработка на мне, часть в рабочее время, основная — по вечерам. Бюджет — оплата VPS-сервера и подписка на Claude.

Проблема

Яндекс.Метрика показала: 89% отказов, 10 секунд на сайте, глубина просмотра 1,1–1,3, конверсия 0,67% — одна заявка на 150 посетителей. Трафик был целевой: B2B-клиенты приходили по релевантным запросам, но сайт их не удерживал. Причин три:

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

Я сравнил пятерых конкурентов: четверо работали по схеме «оставьте заявку, мы перезвоним». И провёл 7 интервью с клиентами: пятеро предпочли бы мессенджер звонку. Точнее всего сказано так: «Я оставил заявку — позвонили через 2 дня. Я уже договорился с другими».

Решения

Два канала вместо форм

Гипотеза. Форма из пяти полей и «перезвоним завтра» отпугивают B2B-клиента: ему нужна цена сейчас.

Решение. Форм на сайте нет. Основных каналов два: написать в мессенджер (Telegram или Max) или позвонить. CTA стоит на первом экране, в конце страниц и в каждом попапе портфолио.

Почему. Аудитория делится: молодым привычна переписка, старшим проще позвонить, так что главным я не считаю ни один канал. По целям в Метрике с 14 августа чаще всего звонят: 16 обращений против 12 в Telegram и 10 в Max. Поэтому я развёл акценты: в хедере акцентный телефон, а на первом экране и в блоках связи по сайту акцентные мессенджеры. Телефон там тоже есть, но без акцента.

Карточки и поиск вместо длинных списков

Гипотеза. Клиент приходит с конкретным запросом. Текстовый список услуг он не сканирует и уходит.

Решение. 12 направлений — карточками с иконкой и перечнем услуг внутри. На десктопе в шапке одна кнопка «Навигация по сайту»: она открывает разделы и поиск. На телефоне вместо неё нижняя панель со вкладкой «Услуги». Отдельного бургер-меню нет: оно дублировало поиск, и я его убрал.

Почему. Короткий путь от запроса до нужной услуги, один вход вместо двух. Риск понятен: люди привыкли искать навигацию в бургере. Я проверил его тестом, и он подтвердился — подробнее ниже, в «Юзабилити-тест: навигацию и фильтры не замечали».

Портфолио вместо кейсов

Гипотеза. Доверие строят реальные работы. Кейсов с цифрами у агентства нет: клиенты малого и среднего бизнеса не ведут аналитику, результаты есть только по Яндекс Директу.

Решение. Сетка масонри с фото работ без длинных описаний. Работа показана целиком, без обрезки под общую сетку: у каждой свои пропорции (квадрат, 4:3 или 3:4). Клик открывает попап с фото, тегами и CTA «Хотите так же?». Под каждой работой счётчик просмотров и лайк/дизлайк.

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

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

Просмотры и реакции видны в CRM, в таблице портфолио рядом с полем «Порядок на сайте»: по ним можно поднимать работы вверх. Данных для ранжирования пока мало.

Юзабилити-тест: навигацию и фильтры не замечали

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

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

Что нашёл. Кнопку поиска в шапке не воспринимали как путь к разделам: в портфолио участники «в упор не могли попасть». Фильтры над портфолио не замечали — кнопка была в цвет сайта.

Что изменил. Раз поиск не читался как навигация, я сменил подпись: на десктопе вместо «Поиск по услугам…» — «Навигация по сайту». Это кнопка, похожая на поле поиска, она открывает палитру: страницы сайта, дерево услуг и поиск.

Кнопку «Фильтры» в портфолио и блоге я сделал акцентной — после этого вопросы пропали. Если человек пришёл с уже включённым фильтром, например по клику на услугу в поиске, над фильтрами появляется подсказка: «Показываем работы по фильтру „…“ — из вашего запроса. Снять можно крестиком».

На телефоне с 28 сентября, уже после запуска, кнопки в шапке нет: её заменила нижняя панель «Главная / Портфолио / Услуги / Контакты», как в Telegram и Max Web App. Её я проверяю так же, проверка ещё идёт.

Одна система на всех экранах

Сайт и CRM собраны на одной дизайн-системе: основа — shadcn/ui, поверх — общие токены цвета, типографики, отступов и размеров. На публичном сайте почти каждый экран держится на двух компонентах: карточке и блоке заявки.

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

Блок заявки. Кнопки Telegram и Max с раскрывающимися телефонами заменяют форму — это главный элемент конверсии. Раньше они жили в трёх компонентах, которые отличались обвязкой, размером кнопок и целями Метрики. Теперь это один компонент с тремя вариантами: в первом экране, в сайдбаре статьи и в блоке «Свяжитесь с нами» внизу шести страниц. Кнопки правятся в одном месте, а не в трёх.

Токены, состояния и свойства всех компонентов — на странице «Империя рекламы — дизайн-система».

Детали, которые держат сайт

Состояния нарисованы, а не оставлены браузеру: скелетоны загрузки, пустое портфолио, пустой поиск, «сейчас закрыто». Тёмная тема — не инверсия: блоб на первом экране и кнопки шапки подобраны для неё отдельно. Нижняя панель из четырёх пунктов есть в Telegram и Max Web App, а с 28 сентября — и в мобильном браузере. Компоненты и токены подробно — на странице «Империя рекламы — дизайн-система».

Десктоп: тот же сайт на широком экране

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

Почему так

UI

• Белый и королевский синий. Фирменные цвета агентства, они были до меня. Синий я сделал ярче и современнее.
• Шрифт Inter. Базовый шрифт дизайн-системы.
• Одна дизайн-система с CRM. Так быстрее разрабатывать и добавлять функции, а крупные изменения применяются сразу везде.
• Блоб на первом экране. Без него сайт выглядел слишком строго для рекламного агентства.
• Проектировал от телефона. Большинство посетителей приходит с мобильных.

UX

• Форм нет, два канала связи. Клиенту нужна цена сейчас, «перезвоним завтра» его отпугивает.
• Акцентный телефон в хедере, акцентные мессенджеры на первом экране и в блоках связи. Звонят чаще всего, а молодым привычнее переписка, поэтому главного канала нет.
• Портфолио вместо кейсов. Кейсов с цифрами у агентства нет, а результат рекламы виден на фото.
• У каждой работы своя пропорция. В сетке с фиксированными пропорциями обрезался сам объект.
• «Навигация по сайту» вместо бургер-меню. Бургер дублировал поиск, а подпись «Поиск по услугам…» не читалась как путь к разделам.
• Акцентная кнопка «Фильтры». Кнопку в цвет сайта на тесте не замечали.

Результаты

«До» — январь–апрель 2024 года: Яндекс.Метрику я подключил, когда взялся за сайт как за продукт. Визуальный редизайн 2023 года прошёл без неё, поэтому его эффект не измерен. Второй замер — через три месяца после релиза, в период сезонного снижения трафика. Последний столбец — нынешний сайт на основном домене с 14 августа 2026 года.

Цвет цифр показывает изменение к предыдущему столбцу: зелёный — лучше, красный — хуже, обычный цвет текста — без заметных изменений.

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

Цели у версий разные: на старом сайте конверсией считались клик по контактам и отправка формы, после редизайна — переход в Telegram. Поэтому 0,67% и ~1,2% сравнимы только по порядку величины.

Последний столбец — Яндекс.Метрика по новому сайту с переезда на основной домен: 780 визитов с 14 августа по 26 сентября 2026 года. Конверсию я считаю по звонкам и мессенджерам: звонок — 16, Telegram — 12, Max — 10, вместе 38 обращений на 780 визитов. Почта, 12 кликов, в расчёт не вошла. Метрика считает нажатия, а не визиты: если человек нажал и звонок, и Telegram, это два достижения, поэтому 4,9% — оценка сверху. У прежнего сайта конверсия считалась по форме, так что сравнение приблизительное.

Сайт стал возвращать людей: раньше возвращались 3% посетителей, теперь повторными приходятся около 19% визитов (524 из 2 738 за три месяца наблюдений). Доли считаются по разным основаниям, посетители и визиты, но направление ясно. Вернувшиеся ведут себя лучше: отказы около 33–36% против 55% у новичков.

После переработки на сайте появился и рекламный, и органический трафик. Каждое обращение попадает в бота и оседает в CRM с меткой источника (см. кейс «Империя рекламы — CRM»): видно, с какой рекламы или страницы пришёл каждый клиент.

Что не сработало

• Сайт около года стоял заброшенным. Им никто не занимался: содержимое не обновлялось, форма заявки была выключена. За месяц до запуска нового сайта 14 августа 2026 года на старый пришло 1 389 визитов и ни одной заявки.
• Раздел кейсов я спроектировал под контент, которого нет. Классический ответ «выстроим процесс наполнения» я попробовал, но он не сработал.
• Почта в шапке — рудимент. Иконку я оставлял для фирм, которые общаются только по почте. По ней 12 кликов, а писем с заказом не пришло ни одного. Клики идут постоянно, поэтому предполагаю, что это боты. Из шапки я почту убрал, в контактах она осталась для тех, кто её ищет. Основные каналы — телефон и мессенджеры.

Что бы поменял

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

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

Выводы

Что сработало. Заказчика убедили данные: 89% отказов не требуют объяснений. На сайте сработали два канала связи вместо форм и портфолио из реальных работ вместо кейсов.

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

Обновлено 13 октября 2026 года: «Почему так» и «Что бы поменял».