URBANFIT.

Клиент

URBANFIT. — сеть премиальных фитнес-клубов в Санкт-Петербурге.

Проблема

Клубы выглядели дорого и современно, а сайт морально и функционально устарел:

1. 01контент было сложно обновлять;
2. 02навигация путала пользователей;
3. 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. решил все задачи клиента:

1. 01По данным клиента, конверсия сайта выросла на 20%.
2. 02Онлайн-образ бренда совпал с реальностью.
3. 03Автоматизировали работу с заявками, расписанием и покупкой абонементов через CRM Fitbase.
4. 04Команда клиента управляет сайтом без участия разработчиков.
5. 05Заложили фундамент под рост и SEO.

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