Платформа для онлайн тренировок

UX/UI & Progressive Web App

GMB — платформа для онлайн тренировок mindful fitness

Mindful fitness — это тренировки, ориентированные не на подсчет калорий, а на улучшение внутреннего состояния и установление контакта с собственным телом. Главное отличие GMB от обычного фитнес-приложения — это фокус на увеличении силы и мышечной выносливости.

Клиент обратился к Distillery за решением нескольких важных задач:

  • Создать новое приложение Praxis для уже существующего оффлайн продукта.
  • Progressive web app должно работать как на компьютере, так и на мобильных устройствах
  • Обновить фирменный стиль и бренд, чтобы отразить существующий дух GMB
  • Создать дружелюбный UX и обеспечить легкий доступ к подпискам на тренировочные программы
  • Построить стратегию развития продукта

Стратегия

Основная задача для первой фазы — разработка стратегии развития продукта. Она должна опираться на бизнес-цели и приоритизировать разработку функциональности для пользовательского приложения Praxis.
Главные бизнес-цели для клиента:

  • Увеличение числа пользователей на обновленной платформе GMB
  • Увеличение User Retention и показателей завершения программ
  • Улучшение пользовательского опыта

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

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

Вайрфреймы

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

Правила адаптивной верстки

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

Использование на любом устройстве

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

Клиентам, которые предпочитают использовать экраны мониторов или телевизора для тренировок, предоставляется расширенная информация по занятию.

Встроенное отслеживание тренировок и ведение журнала

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

Кастомный видео-плеер с интегрированным таймером и субтитрами

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

Персональный график тренировок

Тренировочные программы от GMB всегда предлагали гибкое планирование и возможность совмещения нескольких программ в рамках одной тренировки.

Один из самых популярных вопросов, которые клиенты GMB задавали тренерам: «Как мне настроить тренировки в соответствии с моим свободным временем?»

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

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

Геймификация

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

Технические детали о Praxis

  • Потоковый стриминг и кодирование видео
  • Single Sign-On с использованием OKTA для интеграции с текущим веб приложением
  • Система оплаты с использованием сервиса Stripe
  • Кастомизированная административная панель для создания и управления фитнес-программами. Добавление сессий, упражнений, видео и фото материалов, автоматическое создание субтитров к видео.

Стайлгайд и брендинг

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

Типографика

Иконки

Цвета

#0ea0c3

#16c0e8

#ffffff

#f0f2f5

#dadee3

#b6bec9

#6c7888

#21262d

#6f79ae

#ac4887

#e8165f

По мнению клиента, приложение Praxis — это будущее GMB.

Финальная версия платформы Praxis от Distillery строится на методологии, созданной тренерами GMB, которые обучают десятки тысяч людей.

Год разработки и 6 месяцев бета-тестирования с профессиональными тестировщиками, тренерами GMB и реальными пользователями позволили отполировать продукт и сделать его драйвером для развития всего бизнеса клиента.