Веб-студія NDC: Сайт House of Pain | UX/UI та функціональна розробка

House of pain

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

Цілі

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

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

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

Завдання

Розробка структури сайту, яка б відповідала потребам бізнесу.
Створення прототипу, що враховує користувацький досвід.

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

Оптимізація сайту для швидкого завантаження та високої продуктивності.

Команда проєкту

1x Project Manager

2x Web-designer UX/UI

1x Front-end developer

1x Back-end developer

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

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

Ми прагнули створити рішення, яке дозволяє легко масштабувати бібліотеку тренувань, швидко оновлювати програми та водночас зберігати повний контроль над контентом.

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

Замість класичного підходу з готовими відеотренуваннями було реалізовано гнучкий конструктор тренувань в адміністративній панелі.

В основі рішення — єдина база вправ, де зібрані:

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

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

Підтримка різних форматів і шаблонів тренувань

Конструктор дозволяє створювати тренування різних типів:

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

Окрім цього, були реалізовані готові шаблони суперсетів, зокрема:

Tabata,
EMOM,
інші інтервальні та циклічні формати.

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

Як працює захист контенту

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

Ми свідомо відійшли від формату «одне тренування — один відеофайл». Натомість кожне тренування збирається динамічно під час відтворення.

Що це означає на практиці:

тренування не існує як єдиний файл, який можна завантажити;
відео вправ відтворюються окремо, як візуальний супровід;

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

У результаті користувач отримує цілісне тренування, але технічно зібрати його в один файл і завантажити — неможливо.

Результат

У підсумку було створено:

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

Це рішення ідеально підходить для тренерів, студій та онлайн-платформ, які хочуть контролювати свій контент, швидко запускати нові тренування та захищати свою експертизу.

Прототип

Дизайн

Головна сторінка

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

Workouts

Найпопулярніші та доступні відразу тренування, які легко відкрити відразу після відкриття сайту. Це патерн пробного заняття, після якого користувач захоче продовжити тренування в, можливо, платній версії сайту.

Програми тренувань

Є кілька видів необхідних тренувань, які підійдуть для будь-кого. Їх можна фільтрувати, сортувати та підлаштовувати пошук під себе. Окрім назви, ми відразу бачимо тривалість програми, необхідність обладнання та приклади вправ.

Сторінка тренування

На сторінці є відео, його опис, зручні таймкоди справа для того, щоб виконувати вправи синхронно було зручно.

Сторінка знань

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

Сторінка рецептів

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

Прайс лист

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

Особистий кабінет

Спостерігаємо тут бокове меню, до міститьчя персональна інформація, гаманець, план підписки та налаштування. Усі необхідні інструменти для позитивного користувацького досвіду.

Сторінка аналітики

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