

Предыдущий проект
Major
URBANFIT.
2025
Завершен
Корпоративный сайт
Сервис
Ui/UX
Аналитика
Дизайн
3D
Дизайн-поддержка
Frontend
NEXT.JS
Backend
Laravel
6
Месяцев
Клиент
URBANFIT. — сеть премиальных фитнес-клубов в Санкт-Петербурге.
Проблема
Клубы выглядели дорого и современно, а сайт морально и функционально устарел:
- 01контент было сложно обновлять;
- 02навигация путала пользователей;
- 03сайт не передавал уровень бренда.
Задача
Задача — разработать новый имиджевый сайт, который станет цифровым отражением клубов и с первого касания передаст атмосферу URBANFIT. При этом важно было:
- чтобы сайт продавал: наглядно показать клубы, тарифы и направления тренировок, упростить путь до покупки абонемента и записи;
- уйти от типовой фитнес-эстетики и сделать дизайн, который может стать референсом в нише;
- сохранить текущие SEO-позиции и трафик;
- автоматизировать работу с заявками и расписанием: связать сайт с CRM и снять рутину с администраторов и отдела маркетинга;
- упростить будущие доработки и заложить основу для масштабирования.
Брифинг и исследование
Из встреч с клиентом собрали основные требования к сайту, а еще погрузились в специфику сферы и аудитории:
- основное ядро — миллениалы 25–35 лет, около 60% из них — девушки;
- некоторые клубы посещает много зумеров, а есть площадки с более возрастной аудиторией;
- около 25% клиентов ходит в URBANFIT. ради групповых занятий, а значит, эти форматы нужно особенно проработать в структуре сайта.

Аналитика и структура
Изучили конкурентов: какие разделы у них есть, как они показывают клубы, тарифы, расписание и тренеров, как ведут человека по страницам. Параллельно описали 4 базовых сценария, с которыми пользователь приходит на сайт URBANFIT:
- человек выбирает клуб рядом с домом или работой;
- сравнивает тарифы и хочет понять выгоду;
- ищет конкретную тренировку или тренера;
- действующий клиент хочет быстро найти расписание, новости и акции.
После этого собрали структуру, в которой каждый раздел закрывает конкретный сценарий и подталкивает к целевому действию. Ключевые разделы вынесли в быстрый доступ. Пользователь проходит путь без лишних шагов: главная → клуб → тариф → покупка/запись. На основе этой структуры сделали прототипы ключевых страниц и путей — от первого визита до покупки абонемента.

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

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

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

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

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

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

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

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

Отдельное пожелание клиента — интегрировать в дизайн фирменный клубный «меч фортуны», который путешествует по клубам. Когда человек приходит на гостевой визит, то может испытать удачу: попробовать достать его в момент, когда меч активен. Если вытащит — получит 100% скидку на взнос.
Клиент был глубоко вовлечен в дизайн-этап. Мы вместе перебирали иконки, уточняли отступы и композицию, обсуждали мелкие визуальные детали. Это позволило на этапе макетов снять большинство будущих правок и прийти к дизайну, который одинаково комфортен бренду и пользователям.
Интеграции
Главный технический вызов проекта — связать новый сайт с CRM для фитнес-клубов Fitbase. Всего реализовали 3 интеграции:
1. Модуль расписания
Все данные по тренировкам теперь подгружаются на сайт из Fitbase автоматически и отображаются пользователям: категория, тренер, дата и время, длительность и другие параметры. Менеджерам не нужно руками обновлять сетку, достаточно внести корректировки в CRM, и они изменятся на сайте.
2. Формы обратной связи
Связали с Fitbase все формы на сайте. Каждая заявка уходит в CRM с пометкой, с какой страницы и из какой формы ее отправили. Отдел продаж сразу видит источник лида и может оценивать эффективность страниц и воронок. Раньше заявки переносили в CRM вручную, сейчас этот этап полностью автоматизирован.
3. Покупка абонементов и личный кабинет
Онлайн-покупка абонемента, регистрация и авторизация на сайте тоже завязаны на Fitbase. При регистрации создается карточка пользователя в CRM, данные по оплатам автоматически подтягиваются в систему.
Удобная админка под процессы URBANFIT.
Чтобы не превращать любое обновление контента в задачу для разработчиков, собрали удобную админку на CMS Filament — под конкретные процессы URBANFIT. Из админки практически полностью управляют сайтом и меняют контент, в том числе с телефона. Менеджеры могут даже настраивать цвета для обозначения разных залов.
SEO без потери позиций
Старый сайт URBANFIT. хорошо индексировался, поэтому важно было не потерять позиции в поиске. Что сделали:
- подключили SEO-команду клиента на этапе проектирования;
- частично сохранили прежнюю структуру разделов;
- учли ТЗ по URL, метаданным и текстовым блокам;
- заложили понятную структуру для быстрой индексации нового сайта.
После запуска была небольшая просадка по позициям в первые недели, затем показатели вернулись на прежний уровень и сейчас продолжают расти.
Результат
Новый сайт URBANFIT. решил все задачи клиента:
- 01По данным клиента, конверсия сайта выросла на 20%.
- 02Онлайн-образ бренда совпал с реальностью.
- 03Автоматизировали работу с заявками, расписанием и покупкой абонементов через CRM Fitbase.
- 04Команда клиента управляет сайтом без участия разработчиков.
- 05Заложили фундамент под рост и SEO.
Клиент остался настолько доволен результатом, что отменил ретровстречу по проекту. Для нас это сигнал, что мы оправдали и даже перевыполнили ожидания.

Над проектом работали
Похожие кейсы
Следующий проект
Пора спать














