Сайт агентства, который показывает работу, а не только список клиентов

Было

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

Что выяснил до дизайна

• Расспросил коллег о прошлых попытках обновить сайт и о том, почему они не сложились.
• Разобрал, кто к нам приходит и с какими возражениями. Приходят маркетологи и бренд-менеджеры (им важны визуал и метрики) и коммерческие или IT-директора (им важны сроки, бюджет и процесс). Частые возражения к старому сайту: нет описанных кейсов; видны только похожие сайты застройщиков; непонятно, как устроена поддержка после сдачи.
• С бренд-дизайнером разобрал фирменный стиль: принципы, фотостиль, вёрстку, метафору.

Каждое решение ниже отвечает на одно из возражений.

Ключевые решения

1. Каталог проектов с фактом в заголовке

Каталог делали первым. Определили сетку: крупные проекты чередуются с рядами помельче. В заголовке карточки — не только имя клиента, а факт из проекта: «+29% к стоимости помещения», «×2 целевых лидов». Человек сразу видит результат, а не логотип. Прошли несколько кругов со старшими дизайнерами, арт-директором и основателями.

2. Фильтр по типу проекта

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

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

3. Клиенты с цифрами и лентой проектов

У каждого клиента логотип, описание, сколько лет работаем вместе, сколько задач и продуктов, и лента проектов. Проекты бывают двух видов: полный кейс, который можно прочитать, и превью, которое ведёт на живой сайт, на заявку или помечено как закрытое по NDA. Так виден весь объём работы, даже если кейс нельзя показать.

Каждому проекту нужна обложка. К запуску мы нарисовали около 200 обложек вдвоём с коллегой за один-два месяца — каждая в бренде и при этом не похожа на соседнюю.

4. Главная чередует клиентов и продукты

После первого экрана идут несколько клиентов, затем слайды продуктов, снова клиенты, снова продукты. Главная показывает и опыт, и экосистему.

5. Экран продукта: много информации без перегруза

На одном экране нужно было уместить визуал, название, ключевые метрики, преимущества, описание и кнопки. Я поставил в центр визуал продукта, а справа список преимуществ, связанный с ним: выбираешь пункт — меняется картинка. Метрики стоят под названием, а не теряются в тексте.

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

6. Час вайбкодинга вместо 4 дней разработки

Продукты связаны и допродаются друг через друга, поэтому они движутся по орбитам вокруг общего центра. Раньше я отдавал разработчику анимацию из After Effects, и параметры он подбирал на глаз. Здесь я за час завайбкодил всю страницу: разработчик получил не видео, а работающую страницу, и ему осталось подключить код к сайту. Час моей работы сэкономил ему около 4 дней.

Результат

В первые месяцы после запуска, год к году:

• конверсия визита в заявку на услуги +28%;
• трафик −19%, при этом заявок столько же, сколько год назад.

В разработке: час вайбкодинга сэкономил около 4 дней фронтенд-разработки на странице продуктов.

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