Разработка сайта Drive Fitness

Клиент

Федеральная сеть фитнес-клубов Drive Fitness с филиалами в Екатеринбурге, Тюмени и Перми. У компании пятнадцать точек и более 40 000 резидентов. 

Задача

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

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

Ход проекта

Техническое решение для сайта

Старый сайт был реализован на CMS Битрикс. Управление сайтом решили перенести в CMS October на Laravel. Мы уже работали с Laravel, а из всех CMS на ней October была самой проработанной: легко строить и много автокода. Поэтому один бэкенд-разработчик занимался настройкой конструктора модулей  и архитектурой полей. 

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

Фронтенд написали на React + Next.js силами junior и senior-разработчиков, им в пиковые моменты помогали еще двое специалистов.  

Референсы

Такие примеры дизайна привел заказчик в качестве референсов. 

• https://kinective.com
• https://www.behance.net/gallery/73290049/Fit4all?tracking_source=search_projects_recommended%7Cfitness%20gym
• https://praktika-dinamo.ru/
• http://playermaker.mc-staging.net/products/elite/

Вайрфрейм

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

Дизайн и дизайн-система 

Создали новую подробную дизайн-систему. Это позже повлияло на ход и время разработки, потому что ее пришлось основательно готовить к верстке.

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

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

Разработка

Первичная нестабильность

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

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

Интеграция с 1С

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

Информация о тренере

Для настройки в 1С выгрузки тренеров нам предоставили пример запроса. Бэкендеры оценили работу, но не соотнесли структуру запроса с дизайном. Дизайнер, рисуя карточку, тоже не задался вопросом, как она организована. Оказалось, что информация о тренере хранится в одном поле и мы получали ее в карточку тренера не в отдельных полях (Специализация, Образование, Заслуги в спорте), а в одном через запятую. Карточка тренера выглядела неправильно пустой.

Мы составили ТЗ для 1С-разработчиков, чтобы они передали контент-менеджерам клиента задание на перенос данных о тренерах в соответствующие поля.

Работа с расписанием

Реализовали обновления расписания. Внешний вид сетки расписания взяли с предыдущего сайта без изменения дизайна. 

Изначально информация о занятиях обновлялась раз в сутки в 6:00. Со временем мы поняли, что изменения должны подтягиваться чаще, так как в течение дня могут случаться форс-мажоры, например, замена тренера или отмена занятий. Сначала провели нагрузочное тестирование и оценили работу сайта во время обновления расписания. Изменения были незначительные, сам импорт длился не более 10-15 минут. Добавили новые импорты, сейчас обновление происходит 4 раза в течение дня.

Релиз

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

• Успели перенести сайт на preprod площадку на сервере клиента.
• Провели все необходимые тесты по работоспособности, какие можно было провести с площадкой в закрытом режиме.
• Протестировали оплаты с боевым терминалом.
• Подготовили файл с редиректами.
• Обсудили с клиентом, что нужно сделать со старым сайтом: определили поддомен old., куда перенаправляло модальное окно на новом сайте. Это решение было для тех, кто не готов сразу знакомиться с новым сайтом. 

Когда пришло время релиза, мы переключили домены и открыли сайт для индексации. Сам релиз занял меньше трех часов, дольше всего обновлялись DNS-записи. 

Взаимодействие с клиентом

Ход проекта и правки отслеживали с помощью доски в Трелло. Вместе с клиентом обозначили несколько контрольных точек:

1. внутреннее тестирование;
2. доработка выявленных багов;
3. релиз.

Задачи в Трелло разделили на плановые и внешние доработки. Кроме стандартных столбцов по канбану (Очередь — В работе — Готово) добавил еще два: Проверка и Готово по правкам. На доске работали в режиме реального времени вместе с клиентом.

Особенности проекта 

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

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

На каждой странице сайта есть формы обратной связи, чтобы собирать заявки. В заявках настроена маршрутизация: в зависимости от формы – Заказать звонок/Узнать о карте/ Записаться на тест-драйв – и указанного клуба они отправляются на почтовые ящики фитнес-клубов либо руководителей. Каждый лид обрабатывается благодаря тому, что у заявок настроена связь с 1С и каждая отражается в системе.

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

На сайте можно оплатить не только клубную карту, но и пакет персональных тренировок у любого понравившегося тренера.

На сайте доступно реализовано переключение информации между клубами – кнопка «Сменить клуб» всегда зафиксирована в шапке сайта. При выборе клуба пользователь может сразу свериться с его расположением на карте.

У каждого клуба своя красочная страница: есть галерея, блок с видеотуром, можно посмотреть расценки клубных карт, не переходя в раздел Стоимость. Это помогает определиться тем, кто только выбирает клуб.

Результат

Сделали редизайн сайта, полностью пересобрали платформу.