От визитки к инструменту лидогенерации

Контекст

Я работаю в рекламном агентстве полного цикла. Агентство делает всё: от печатных материалов и наружной рекламы до сайтов, брендинга и контекстной рекламы. Но собственный сайт годами оставался в стороне — некогда, нет приоритета, «сапожник без сапог».

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

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

Метрика успеха: конверсия в лид (переход в Telegram или заполнение заявки).

Ограничения

Платформа — TapTop (no-code): решение принято до меня, сменить стек возможности не было, все решения приходилось укладывать в возможности конструктора. Команда — я и владелец бизнеса, без дизайн-отдела и без выделенного бюджета на исследования: интервью и конкурентный анализ проводил сам, в свободное от основной работы время.

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

Проблема

Данные до редизайна

Я открыл Яндекс.Метрику и увидел цифры, которые говорили сами за себя.

[СКРИНШОТ: Яндекс.Метрика — показатели до редизайна]

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

Три корневые причины

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

1. Высокий Interaction Cost — форма заявки из 5 полей, звонок менеджера «в течение дня». B2B-клиент хочет цену сейчас, а не завтра.
2. Перегруженная навигация — длинные текстовые списки услуг без структуры. Пользователь не мог быстро найти нужное.
3. Слабый сторителлинг — сайт перечислял услуги, но не доказывал экспертизу. Нет кейсов, нет результатов, нет доверия.

Исследование

Конкурентный анализ

Составил сравнительную таблицу по 5 прямым конкурентам в регионе. Критерии: Mobile UX, скорость первого ответа, наличие цен, наличие портфолио, CTA.

[СКРИНШОТ: таблица бенчмарка конкурентов]

Ключевой инсайт: 4 из 5 конкурентов используют устаревшую модель — «оставьте заявку, мы перезвоним». Никто не предлагает мгновенную коммуникацию.

Я увидел незанятую нишу: скорость ответа как конкурентное преимущество.

Глубинные интервью с клиентами

Провёл 7 интервью с текущими и потенциальными B2B-клиентами агентства.

Ключевые вопросы:

• Как вы обычно ищете подрядчика на рекламу?
• Что вас останавливает, когда вы заходите на сайт агентства?
• Какой способ первого контакта вам комфортен?
• Что даёт вам уверенность, что агентству можно доверять?

[СКРИНШОТ: конспект интервью / цитаты]

Синтез

JTBD — Job-to-be-Done

Job 1 (основной)

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

Job 2

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

Job 3

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

Гипотезы и их проверка

Гипотеза 1: Telegram вместо форм снизит барьер входа

Логика: B2B-клиенты хотят мгновенного ответа и удобного канала. Длинная форма из 5 полей + ожидание звонка = высокий барьер. Telegram = 0 полей, мгновенный старт диалога.

Решение:

• Убрал страницу «Контакты» и все длинные формы
• Разместил кнопку «Рассчитать стоимость в Telegram» в контексте каждой услуги и кейса
• CTA — не «Оставить заявку», а «Написать сейчас»

[СКРИНШОТ: сравнение старого CTA и нового — форма vs Telegram-кнопка]

Как проверял: сравнил конверсию цели «клик по контактам + заполнение формы» (старый сайт) с «переход в Telegram» (новый).

✅ Результат: конверсия в лид выросла в 2 раза — с 0,67% до ~1,2%.

Гипотеза 2: Модульная сетка с тегами улучшит сканируемость

Логика: Пользователи терялись в текстовых списках и уходили с первой страницы. Если упаковать услуги в карточки с визуальными тегами — пользователь найдёт нужное быстрее.

Решение:

• Адаптивная сетка карточек (Content-Agnostic — работает с заголовками любой длины)
• Система тегов по направлениям: Наружная реклама / Полиграфия / Digital / Сайты
• Визуальная иерархия: приоритетные услуги крупнее

[СКРИНШОТ: до — текстовый список; после — модульная сетка с тегами]

Как проверял: отслеживал метрику «Глубина просмотра».

✅ Результат: Bounce Rate снизился с 89% до 50,7%. Пользователи перестали уходить с первого экрана.

Гипотеза 3: Двухуровневая навигация с поиском ускорит путь до услуги

Логика: B2B-клиенты приходят с конкретным запросом. Если они не могут быстро найти нужную услугу — уходят. Явный поиск снижает время до целевого действия.

Решение:

• Desktop: кнопка в шапке стилизована под поисковое поле. Клик — открывается полноэкранный попап с реальным поиском и структурированным списком всех услуг
• Mobile: шапка упрощена до двух действий — «Меню» и «Telegram». Никакого лишнего

[СКРИНШОТ: навигация Desktop и Mobile]

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

✅ Результат: глубина просмотра выросла с 1,1–1,3 до 1,43 (+10,8%). Пользователи стали изучать страницы конкретных услуг.

Дизайн-система

Сайт агентства — живой организм: услуги добавляются, портфолио обновляется, контент меняется. Я сразу проектировал систему, которую можно масштабировать без переверстки.

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

А. Семантические токены вместо хардкода

• Surface/Primary, Surface/Secondary — уровни контента
• Action/Primary — интерактивные элементы
• Смена брендбука = 1 правка в токенах, не 200 правок в макете

Б. Content-Agnostic компоненты (Auto Layout)

• Карточки услуг растягиваются под заголовок любой длины — Hug Contents
• Теги переносятся на новую строку при необходимости — Wrap
• Не нужно подгонять контент под макет — макет адаптируется под контент

В. Состояния всех интерактивных элементов

• Default / Hover / Focus / Pressed / Disabled
• Визуальная обратная связь на каждое взаимодействие

[СКРИНШОТ: компоненты дизайн-системы — карточки, кнопки, теги, навигация]

Результаты — первый редизайн

Через 3 месяца после релиза:

[СКРИНШОТ: Яндекс.Метрика — Q4 2025, рост поведенческих факторов после релиза]

Контекст: замеры сделаны в период сезонного снижения трафика. Несмотря на это, показатели вовлечённости (время, глубина) показали рост. В сезон эффект должен быть выше.

Итерация 2 → стратегический пивот

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

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

Вывод: продолжать строить сайт под контент, которого нет, — это ошибка. Нужно спроектировать под контент, который есть.

Новая концепция — Lean Site

Принцип: убрать всё, что требует контента, которого нет. Оставить только то, что работает.

Почему галерея без описаний — это не компромисс: визуальная работа говорит сама за себя. Баннер, стенд, сайт — клиент видит качество без текста. Описание «мы сделали баннер для компании N» не добавляет ценности, если нет метрик. Фото добавляет.

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

[СКРИНШОТ: новая структура сайта — Lean концепция]

Главный блокер — контент

Самая сложная часть проекта оказалась не дизайнерской.

Проблема: агентство работает преимущественно с малым и средним бизнесом. Большинство клиентов не ведут аналитику — даже после запуска сайта. Результаты в цифрах есть только по услуге ведения Яндекс Директ, где мы сами настраиваем и отслеживаем рекламные кампании. Для остальных направлений — полиграфия, наружная реклама, сайты — результаты либо субъективны, либо не зафиксированы.

При этом портфолио — один из главных факторов доверия для B2B-клиента (Job 3: «покажите примеры работ»). Без него сайт закрывает только первые два job story.

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

Что предложил:

• Разделить портфолио на два типа: «визуальные работы» (скриншот + описание — без метрик) и «результаты» (только Директ и то, где есть цифры)
• Не ждать идеальных данных — показывать визуальные работы как есть, это уже лучше, чем пустой раздел
• Ввести минимальный регламент: после сдачи проекта — 1 скриншот + 2 строки описания. Не требовать метрик там, где их нет

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

Выводы

Что сработало:

• Данные убедили заказчика лучше любых слов — 89% bounce rate не требует объяснений
• Telegram как CTA — нестандартное решение, которое дало измеримый результат
• Проектирование системы, а не страницы — сайт легко масштабируется

Что я бы сделал иначе:

• Раньше поднял вопрос документирования портфолио — это должно было идти параллельно с редизайном, а не после
• Провёл бы UX-тест на навигации до релиза — сэкономил бы одну итерацию

Главный инсайт: хороший дизайн под неправильные требования — это провал. Я спроектировал кейсы под контент, которого не существовало. Правильное решение — не «выстроить процесс создания контента», а переосмыслить, что вообще нужно показывать. Content-first: сначала контент, который реально есть, потом структура под него.

Кейс обновляется по мере развития продукта. Последнее обновление: 2026-07-06.