Кейс. Сайт для маркетингового-агентства. По структуре от ТОПов digital-индустрии

Всем привет! Это Виталий Радченко СЕО Web-do.ru и основатель таск-трекера для digital-агентств Otask.ru. Сегодня поделюсь кейсом о том, как мы разрабатывали сайт для наших коллег — маркетингового digital-агентства Capsula. Статья получилась длинная, но богатая на детали процесса, поэтому наливайте чайку/кофейку и погнали! 🙌🏼

Итак, входные данные

Задача: создать сайт для маркетингового digital-агентства Capsula.

Цели:

  • привлечение новых клиентов
  • привлечение партнеров
  • размещение в рейтингах
  • размещение кейсов на сайте

Начали, традиционно, со структуры будущего сайта

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

<p>Структуру будущего сайта собирали в Xmind</p>

Структуру будущего сайта собирали в Xmind

Здесь важно отметить, что многие элементы структуры были предложены на основе большого исследования, которое мы проводили для своего агентства Web Do в 2022 году, когда было изучено около 30 сайтов топовых агентств из которого мы получили список основных разделов и блоков для сайта digital-агентства. Думаю, в скором времени расскажу об этом в отдельной статье 🤗

По этой же структуре определили список макетов к отрисовке, получилось:

<p>Скриншот задачи по дизайну из нашего таск-трекера O! task</p>

Скриншот задачи по дизайну из нашего таск-трекера O! task

Целевые действия на сайте, которые мы определили:

  • Расчет стоимости - квиз собранный в Marquz
  • Запись на онлайн-экскурсию — форма обратной связи (в т. ч. интеграция в АмоCRM и Telegram)
  • Сообщение в мессенджер WhatsApp, Telegram
  • Звонок по телефону
  • А чтобы пользователь остался, даже если не оставил заявку обязательно указали ссылки на соцсети, которые активно ведутся агентством

Если интересно — вот ссылки на соцсети ребят:

Рекомендую изучить😉

Цветовое решение

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

Первая концепция и сразу в "яблочко"
Первая концепция и сразу в "яблочко"

Главная страница

Порядок блоков, который мы использовали получился следующий:

  • Первый блок
  • Блок Услуги
  • Кейсы
  • О компании
  • Команда
  • Партнерская программа
  • Блог — последние несколько статей
  • Призыв к действию
  • Подвал

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

Прелодер и анимация на первом экране

Блок с услугами

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

Блок Услуги
Блок Услуги

Блок с кейсами

Здесь предлагаем предлагаем ознакомится с результатами клиентов агентства с возможностью перейти к прочтению полной версии кейса.

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

Кейсы с сайта Capsula
Кейсы с сайта Capsula

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

Здесь расположили основные дынные о компании и в стиле капсулы сделали коллаж с фотографиями руководителя агентства.

О компании Capsula
О компании Capsula

Команда агентства

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

При наведении на каждого участника можно посмотреть цветную альтернативную фотографию.

Блок команда сайта Capsula

Блок партнерской программы

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

Кейс. Сайт для маркетингового-агентства. По структуре от ТОПов digital-индустрии

Предложение связаться + Подвал

В самом низу предлагаем пользователю CTA из нескольких вариантов - рассчитать стоимость, написать в WhatsApp или в Telegram.

Подвал традиционно собрал ссылки на все разделы сайта + кнопки всех целевых действий, социальных сетей. А также отдельно выделили членство агентства в ассоциациях digital-агентств - для целевой аудитории это важное подтверждение экспертности и заинтересованности в развитии.

Подвал сайта
Подвал сайта

Раздел услуги

Для каждой из услуг создали отдельную посадочную страницу с:

  • Названием услуги + коллаж, по аналогии с главной страницей, но здесь уже показываются специалисты именно той услуги, которую они оказывают в агентстве
  • Описанием услуги
  • Процессом работы
  • Кейсами, которые подбираются под конкретную услугу. Если посетитель просматривает странице Performance-маркетинг, то и кейсы показываем только из Performance-маркетинга
  • Командой
  • Целевыми действиями на просчет и т.п.
Услуга performance-маркетинг в агентстве Capsula
Услуга performance-маркетинг в агентстве Capsula

Раздел Кейсы

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

Раздел Кейсы с разделением на категории
Раздел Кейсы с разделением на категории

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

Описание кейса
Описание кейса

Остальные разделы, но не менее важные

Конечно, мы не забыли и про страницу Спасибо, куда пользователь попадает сразу после того, как оставляет заявку. Здесь самое время предложить пользователю подписаться на Telegram канал, ведь он уже заочно доверяет агентству, а если еще и увидит "внутреннюю кухню" в канале, то прогреется еще лучше.

Страница Спасибо
Страница Спасибо

А также остальные разделы и модальные окна.

Раздел Контакты и модальные окна
Раздел Контакты и модальные окна

Мобильная версия

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

Мобильная версия сайта <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fcapsulapro.ru%2F&postId=1134404" rel="nofollow noreferrer noopener" target="_blank">Capsulapro.ru</a>
Мобильная версия сайта Capsulapro.ru

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

  • Меню, которое открывает красивый сайбар с навигацией
  • Кнопка Расчета - квиз
  • Связаться, показывает все способы связи

Про дальнейшее управление, наполнение и обслуживание

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

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

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

Скриншот административной панели сайта
Скриншот административной панели сайта

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

Интеграции

Еще из невидимых, но немаловажных работ - интеграции, чтобы заявки с сайта попадали напрямую в отдел продаж, а именно:

  • Сделали интеграцию с AmoCRM
  • Интеграция заявок с форм в Telegram. И помогли настроить бота так, чтобы он присылал заявки непосредственно в чат отдела продаж. Получилось очень удобно:)

Результат

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

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

После запуска клиент стал активно развивать

Это был первый кейс, который мы решили описать настолько подробно. Надеюсь, такой формат интересен к прочтению и мы будем делиться подобными историями чаще 😎

Готовый результат можете посмотреть по ссылке

Сайт digital-агентства Capsula

Спасибо что дочитали до конца🤗

💻 Заказать разработку сайта или приложения — Web Do

✅ Таск-трекер и учет финансов для digital-команд и не только — O!task

✈ Telegram канал про развитие агентства Web Do и продукта O!task — Подписывайся

44
4 комментария

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

1
Ответить

Кайф, спасибо за фидбек✊🏼

Ответить

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

Ответить

В данной статье ни слова про стоимость.

А про готовые решения, я так понимаю вы используете вместо Яндекс.Метрики своё самописное решение, а не берете готовое у Яндекса?)

Ответить