Разработали сайт для фитнес-клубов URBANFIT: 3D-маскот на главной, 3 интеграции и +20% к конверсии

Главное о кейсе

URBANFIT — сеть фитнес-клубов из Петербурга. Мы разработали имиджевый сайт в темной неоновой эстетике с 3D-маскотом на главной странице и микроанимациями. Теперь его удобно масштабировать и развивать, он выглядит современно, как референс в своей нише.

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

После запуска конверсия выросла на 20%. Команде клиента больше не нужно руками переносить заявки в CRM-систему, данные с сайта теперь автоматически подтягиваются.

Как проект изменил жизнь пользователей

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

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

Бизнес-задача и ее решение

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

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

Главную страницу построили вокруг 3D-маскота и сторителлинга бренда, а внутренние разделы — вокруг ключевых задач: выбор клуба, тарифов, расписания и тренировок. Функционал покупки, регистрации и заявок связали c Fitbase, а управлять контентом дали через кастомную админку на Laravel Filament.

Крафт (мастерство), реализация, технические детали

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

3D-маскот существовал у клиента, но требовал переработки:
→ мы сформулировали ТЗ для 3D-художника;
→ прошли этапы от скетча до риггинга и симуляции ткани;
→ собрали сцену в секвенцию;
→ оптимизировали количество кадров, свет и текстуры под веб.

Главное — встроить персонажа в UX: мы перестроили сетку так, чтобы он не закрывал контент и корректно вел себя на разных экранах.

Технически сайт построен на связке Laravel + CMS Filament и Next.js. Filament дает кастомную админку под процессы URBANFIT: из нее управляют клубами, расписанием, новостями и визуальными акцентами. Next.js обеспечивает скорость рендера, плавную работу 3D-секвенции и ощущение, что человек зашел в приложение.

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Главный инсайт — офлайн-бренд URBANFIT сильно опережал онлайн: в клубах уже были продуманные интерьеры, свой маскот, меч удачи, живое комьюнити, но сайт этого не показывал. Мы сразу договорились, что не будем выдумывать новый образ, а аккуратно перенесем существующий в цифровую среду и сделаем его удобным для продаж и сервисных задач.

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

В разработке самой сложной частью были 3D-анимации и интеграции: при внедрении маскота анимация ломалась на некоторых разрешениях, а связка с Fitbase требовала точной синхронизации данных. Мы закладывали время на тесты и итерации и добились плавных переходов и стабильной работы модулей.

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

Клиент даже отказался от ретро-встречи по проекту, настолько ему понравился новый сайт. Теперь он закрывает и имиджевые, и операционные задачи.

Скриншоты