House of pain

Сайт с тренировками, планом питания и полезными статьями о здоровье

Цели

Цель проекта заключалась в разработке индивидуального цифрового пространства для онлайн-фитнеса «с нуля».

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

Проект направлен на максимальное вовлечение пользователей через современный UX/UI дизайн, который транслирует ценности бренда и обеспечивает высокую производительность платформы.

Задачи

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

Дизайн интерфейса с учётом корпоративного стиля.
Реализация адаптивного дизайна для корректного отображения на разных устройствах.

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

Команда проекта

1x Project Manager

2x Web-designer UX/UI

1x Front-end developer

1x Back-end developer

Одна из главных задач

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

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

Конструктор тренировок вместо статичных видео

Вместо классического подхода с готовыми видеотренировками был реализован гибкий конструктор тренировок в административной панели.

В основе решения — единая база упражнений, где собраны:

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

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

Поддержка разных форматов и шаблонов тренировок

Конструктор позволяет создавать тренировки разных типов:

на количество повторений;
на время выполнения;
комбинированные форматы.

Кроме того, были реализованы готовые шаблоны суперсетов, в частности:

Tabata,
EMOM,
другие интервальные и циклические форматы.

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

Как работает защита контента

Одним из ключевых вызовов стала защищённость тренировок от скачивания.

Мы сознательно отошли от формата «одна тренировка — один видеофайл». Вместо этого каждая тренировка собирается динамически во время воспроизведения.

Что это означает на практике:

тренировка не существует как единый файл, который можно скачать;
видео упражнений воспроизводятся отдельно, как визуальное сопровождение;

аудио-подсказки — это не сплошная дорожка, а набор голосовых фрагментов, которые запускаются в нужные моменты;
логика воспроизведения (когда и что должно прозвучать или измениться) просчитывается системой заранее.

В результате пользователь получает целостную тренировку, но технически собрать её в один файл и скачать — невозможно.

Результат

В итоге было создано:

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

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

Прототип

Дизайн

Главная страница

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

Workouts

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

Программы тренировок

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

Страница тренировки

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

Страница знаний

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

Страница рецептов

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

Прайс-лист

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

Личный кабинет

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

Страница аналитики

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