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

URBANFIT. — сеть премиальных фитнес-клубов в Санкт-Петербурге. Бизнес развивался быстрее, чем сайт: открывались новые клубы, обновлялись пространства, менялся подход к сервису. А в онлайне бренд застрял в прошлом.

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

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

При этом важно было:

✔️ чтобы сайт продавал: наглядно показать клубы, тарифы и направления тренировок, упростить путь до покупки абонемента и записи;

✔️ уйти от типовой фитнес-эстетики и сделать дизайн, который может стать референсом в нише;

✔️ сохранить текущие SEO-позиции и трафик;

✔️ связать сайт с CRM и снять рутину с администраторов и отдела маркетинга;

✔️ упростить будущие доработки и заложить основу для масштабирования.

Мы разбили задачу на несколько этапов и последовательно прошли их:

✅ изучили рынок и поведение пользователей, спроектировали новую структуру сайта и ключевые пользовательские сценарии;

✅ продумали визуальный язык: мягкая неоновая эстетика, роль 3D-маскота, собрали детальные прототипы всех основных страниц;

✅ разработали дизайн и 3D-сцену на главной, создали микроанимации и навигацию под основные сценарии;

✅ реализовали фронтенд и бэкенд, настроили 3 интеграции с Fitbase: расписание, заявки, покупка абонементов и личный кабинет;

✅ собрали удобную админку на Filament под процессы URBANFIT. и заложили фундамент для дальнейшего развития без потери SEO.

Дальше по шагам показываем, как именно это реализовали.

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

Из встреч с клиентом собрали основные требования к новому сайту:

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

✓ Дать эмоцию через сторителлинг и интерактивные элементы. Показать преимущества, сделать виртуальные туры по клубам, добавить аккуратные анимации.

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

✓ Мотивировать к действию. Купить абонемент, оставить заявку, записаться на тренировку, поделиться новостью или акцией — все эти действия должны быть доступны в пару кликов.

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

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

Параллельно погрузились в специфику сферы и аудитории. Выяснили, что основное ядро — миллениалы 25–35 лет, около 60% из них — девушки. Есть клубы, которые посещает много зумеров, а есть площадки с более возрастной аудиторией. Около 25% клиентов ходит в URBANFIT. ради групповых занятий, а значит, эти форматы нужно особенно проработать в структуре сайта.

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

Параллельно описали базовые сценарии, с которыми пользователь приходит на сайт URBANFIT. Зафиксировали 4 основных:

✅ человек выбирает клуб рядом с домом или работой;

✅ сравнивает тарифы и хочет понять выгоду;

✅ ищет конкретную тренировку или тренера;

✅ действующий клиент хочет быстро найти расписание, новости и акции.

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

На основе этой структуры сделали прототипы ключевых страниц и путей — от первого визита до покупки абонемента. Согласовали их с командой URBANFIT. и перешли к дизайну и 3D.

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

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

После комментариев клиента выделили 3 стилистических направления:

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

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

У URBANFIT. уже был свой персонаж. Клиент изначально предложил сценарий 3D-сцены на главной странице и видел этого персонажа центральной фигурой. Вместе мы сформулировали ТЗ для 3D-художника: сделать образ более интересным, реалистичным и цельным.

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

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

Чтобы 3D быстро загружалась, в том числе на мобилках, оптимизировали секвенцию. Подобрали количество кадров, настроили свет и текстуры так, чтобы итоговая последовательность быстро грузилась, но при этом сохраняла качество и предсказуемость результата.

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

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

Выделили 7 ключевых блоков, которые влияют на конверсию, и вынесли их в верхнее меню.

1. Клубы — кастомная карта с метками локаций. Сделали акцент на удобстве выбора клуба по расположению: при клике на точку появляется карточка с адресом, графиком работы и основными услугами. Оттуда же можно перейти на страницу с подробной информацией о клубе.

2. Тарифы — собрали на одной странице 4 основных предложения, показали характеристики и отличия, добавили цены и микроанимации браслетов при наведении.

3. Расписание — календарь, в котором можно посмотреть тренировки в каждом клубе. Страница интересная и сложная с точки зрения интеграций, об этом чуть позже расскажем подробнее:)

4. Тренировки — вынесли в быстрый доступ, потому что значительная часть аудитории ходит в URBANFIT. именно ради групповых занятий. Здесь человек знакомится с форматами, а дальше уходит в расписание и покупку. 

5. Услуги — собрали в отдельные блоки, добавили микроанимации ракеток. 

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

Отдельное пожелание клиента — интегрировать в дизайн фирменный клубный «меч фортуны», который путешествует по клубам. Когда человек приходит на гостевой визит, то может испытать удачу: попробовать достать его в момент, когда меч активен. Если вытащит — получит 100% скидку на взнос.

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

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

1. Модуль расписания

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

2. Формы обратной связи

Мы связали с Fitbase все формы на сайте. Каждая заявка уходит в CRM с пометкой, с какой страницы и из какой формы ее отправили. Отдел продаж сразу видит источник лида и может оценивать эффективность страниц и воронок. Раньше заявки переносили в CRM вручную, сейчас этот этап полностью автоматизирован.

3. Покупка абонементов и личный кабинет

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

Чтобы не превращать любое обновление контента в задачу для разработчиков, собрали удобную админку на CMS Filament — под конкретные процессы URBANFIT.

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

Бэкенд реализовали на Laravel CMS Filament, а фронтенд — на Next.js. Это позволяет быстро загружать страницы без их предварительной загрузки, то есть у человека создается впечатление, будто он пользуется мини-приложением. Еще комфортно работать с микроанимациями и 3D-секвенцией, сохранять отзывчивость интерфейса даже с тремя интеграциями.

Старый сайт URBANFIT. хорошо индексировался, поэтому важно было не потерять позиции в поиске. 

Что сделали:

✔️ подключили SEO-команду клиента на этапе проектирования;

✔️ частично сохранили прежнюю структуру разделов;

✔️ учли ТЗ по URL, метаданным и текстовым блокам;

✔️ заложили понятную структуру для быстрой индексации нового сайта.

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

Новый сайт URBANFIT. решил все задачи клиента:

1. По данным клиента, конверсия сайта выросла на 20%. Путь пользователя укоротился и стал прозрачным: человек заходит на сайт → выбирает клуб → смотрит тарифы и тренировки → записывается или покупает абонемент. Расписание, клубы, тарифы, новости и акции — в быстрых сценариях, без блужданий по разделам.

2. Онлайн-образ бренда совпал с реальностью. Сайт по тону, визуалу и подаче наконец-то соответствует тому, что человек видит в клубах: премиальный формат, атмосфера, внимание к деталям.

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

4. Сайтом управляет команда, а не разработчики. Кастомная админка на Laravel Filament дает возможность команде самостоятельно запускать акции, обновлять контент клубов, настраивать визуальные акценты.

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

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