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

Роль: Продуктовый дизайнер Период: 2023 — настоящее время Продукт: Корпоративный сайт рекламного агентства «Империя рекламы» (наружная реклама, вывески, полиграфия) Платформа: Next.js 15 + shadcn/ui (раньше — Tilda) Команда: 2 человека — я (проектировал и сам собирал сайт с ИИ-агентами) и владелец бизнеса (заказчик)

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

Ключевые результаты: до продуктовой работы → новый сайт, 14.08–26.09.2026

Конверсия в обращение

0,67% → ~4,9%

Звонок, Telegram и Max; оценка сверху

Отказы

89% → 45%

Время на сайте

10 с → 1 м 13 с

Глубина просмотра

1,1–1,3 → 1,42

Обложка кейса: мобильная версия сайта в светлой и тёмной теме — главная, страница услуги, портфолио, поиск, контакты и Telegram Web App

Объём работы:

7 интервью

6 человек в юзабилити-тесте

9 уникальных страниц

32 макета

49 компонентов

Контекст

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

Ограничения

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

Проблема

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

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

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

Синтез интервью: боли, цитаты и решения

Решения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блок заявки в трёх вариантах: первый экран, виджет в статье и блок «Свяжитесь с нами»
Один блок заявки в трёх обвязках — начинка и кнопки общие.

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

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

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

Контакты с графиком и раскрытыми телефонами, сайт внутри Telegram Web App с нижней навигацией
Загрузка, «сейчас закрыто» и главная в Web App с нижней панелью.

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

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

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

Результаты

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

МетрикаДоЧерез 3 месяца после релизаНовый сайт, 14.08–26.09.2026
Отказы~89%50,7%45%
Время на сайте~10 сек42 сек1 м 13 с
Глубина просмотра1,1–1,31,431,42
Конверсия в лид0,67%~1,2%~4,9%

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

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

Цели у версий разные: на старом сайте конверсией считались клик по контактам и отправка формы, после редизайна — переход в 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% отказов не требует объяснений. Два канала связи вместо форм, а вместо кейсов — портфолио из реальных работ.

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

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

Обновлено 29 сентября 2026 года.