Кейс: приложение для онлайн тренировок с функцией видеосвязи

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

Аналитика

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

Кейс: приложение для онлайн тренировок с функцией видеосвязи

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

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

Вячеслав Мауль, аналитик студии Pyrobyte
Кейс: приложение для онлайн тренировок с функцией видеосвязи

Опрос целевой аудитории

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

Среди пожеланий со стороны тренеров чаще всего упоминалось:

  • Удобное взаимодействие с атлетом и отслеживание его параметров для создания индивидуального курса тренировок;

  • Реклама услуг в рамках одной площадки;

  • Прозрачная система вознаграждений и легкий вывод денежных средств на счет или карту банка;
  • Создание шаблонов тренировок и их использование в работе;
  • Возможность регулировать количество свободных дней в календаре;

Спортсменам в первую очередь оказались интересны:

  • Простота записи на тренировки;
  • Календарь с возможностью передвинуть или отменить занятие;
  • Заниматься по индивидуальной программе;
  • Выбирать тренера на основе оценок и отзывов;
  • Выбирать спортивное направление;
  • Делиться опытом и результатами занятий;
  • Получать обратную связь от тренера после занятий;
  • Возможность отменить занятие и вернуть деньги;

Анализ на соответствие правилам маркетплейсов

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

Кейс: приложение для онлайн тренировок с функцией видеосвязи

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

  • Поскольку в Трайнет есть своя социальная сеть с пользовательским контентом, сделали кнопку “пожаловаться”. Жалобы также можно оставить на клуб, событие или команду;
  • Добавили текст, предупреждающий о травмоопасности упражнений;
  • Изменили текст в сообщении о доступе к галерее пользователя;
  • Убрали рейтинг пользователя;

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

Марат Хисматуллин, руководитель студии Pyrobyte

Задача

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

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

Решение

1. Дизайн

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

Кейс: приложение для онлайн тренировок с функцией видеосвязи

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

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

Артем Сафаров, дизайнер студии Pyrobyte

Во время работы над дизайном мы:

  • Сохранили фирменный стиль, но сгладили визуальные и смысловые акценты;

  • Исправили логические ошибки в расположении интерактивных элементов;

  • Исправили элементы, которые неправильно отображались и настроили их работу;

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

2. Взаимодействие тренера и спортсмена

Нам не сразу удалось настроить удобную схему взаимодействия тренера и атлета на этапе бронирования занятия. Рассматриваемый изначально вариант оказался слишком громоздким и не мог гарантировать на 100%, что тренировка состоится.

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

Вячеслав Мауль, аналитик студии Pyrobyte

Сейчас процесс выглядит следующим образом:

  1. Атлет выбирает тренера, указывает свои параметры;
  2. Выбирает в календаре тренера дату и время, доступные для бронирования;
  3. Оплачивает занятие, сумма резервируется системой до проведения занятия;
  4. Тренеру приходит информация о спортсмене и оповещение об изменениях в графике в виде push-уведомления;
  5. В назначенное время и день тренер и атлет проводят занятие и только после этого деньги зачисляются на счет тренера;
Кейс: приложение для онлайн тренировок с функцией видеосвязи

3. Возможности тренера

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

Кейс: приложение для онлайн тренировок с функцией видеосвязи

Отслеживание финансов: баланс, сумма, доступная к выводу на банковский счет, последние зачисления и т.д.

Кейс: приложение для онлайн тренировок с функцией видеосвязи

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

Кейс: приложение для онлайн тренировок с функцией видеосвязи

Отслеживание показателей спортсменов и создание персональных тренировочных программ на их основе;

Кейс: приложение для онлайн тренировок с функцией видеосвязи

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

4. Возможности для спортсменов

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

Кейс: приложение для онлайн тренировок с функцией видеосвязи

В рамках развития внутренней социальной сети мы ввели в приложение:

  • Групповые и персональные чаты для обмена сообщений с возможностью поделиться результатами занятий и сделать ссылку на событие/пост внутри приложения;
  • Клубы и команды, объединяющие спортсменов для совместных тренировок и участия в соревнованиях;
  • Спортивные события;
  • Ленту для просмотра новых записей участников, на которых пользователь подписан;
  • Возможность вести собственный блог;
  • Просматривать, оценивать и комментировать посты и профили других пользователей;

Также из полезных функций можно выделить:

  • Возможность делиться своими спортивными достижениями: грамотами, медалями, участием в соревнованиях;
  • Редактирование расписания;
  • Отслеживание прогресса своих показателей;
  • Поиск тренировок по параметрам: стоимости, виду спорта, типу тренировки и т.д.;
  • Удобная система бронирования через календарь;

5. Полезные фичи

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

Календарь.

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

Кейс: приложение для онлайн тренировок с функцией видеосвязи

Видеосвязь

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

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

Для внедрения видеосвязи в приложение мы использовали библиотеку agora_rtc_engine и видео сервис Agora IO.

У Agora есть официальная библиотека для работы с Flutter. Выбор этого сервиса помог избежать проблем с интеграцией.

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

Дмитрий Ананьев, frontend-разработчик студии Pyrobyte

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

  • Дизайн в фирменном стиле Trainet;
  • Экраны, на которых атлет разговаривает с тренером;
  • Элемент загрузки, если один человек ещё не подключился;
  • Кнопки для отключения/включения звука, микрофона, кнопку смены камеры с фронтальной на основную;

6. Технологический стек

Для создания приложения мы использовали PHP, Laravel, MySQL 8, Docker, Node JS на бэкенде и Flutter, Dart, MobX, Firebase на фронтенде.

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

Кирилл Прокудин, backend-техлид студии Pyrobyte

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

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

Заключение

Trainet стал для нас интересной задачей. Благодаря тесному сотрудничеству с заказчиком, мы смогли разработать экосистему, которая позволит заниматься с тренером из дома.

Кейс: приложение для онлайн тренировок с функцией видеосвязи

Приложение опубликовано в Google Play и App Store. Уже сейчас его можно скачать, зарегистрироваться и записаться на первую тренировку. Мы же пока продолжим техническую поддержку проекта. Планами на будущее мы уже поделились в кейсе на нашем сайте.

Если у вас есть задача разработать сайт или мобильное приложение, то напишите в Телеграм, мы это обсудим: https://t.me/sashadzen

Заказать разработку сайта, веб-сервиса или мобильного приложения на нашем сайте: https://vk.cc/cuglQZ

Партнерская программа, где мы платим от 10 000 до 200 000 рублей за контакты тех, кому нужен дизайн или разработка: https://vk.cc/cuglXT

Телеграм-канал Саши Комбарова про управление агентством, проектами, людьми: https://t.me/sasha_kombarov

Телеграм-бот, который бесплатно выдает чек-листы, памятки и регламенты по управлению, маркетингу, аналитике, дизайну и разработке: https://t.me/regulations_pyro_bot

34
35 комментариев

Тренер оценивает атлета в конце тренировки

10
Ответить

и вот те самые отлеты

1
Ответить

Хорошо, когда можешь себе позволить такие игрушки :)

1
Ответить

Сколько по стоит такое видео сделать про приложение? И по времени.

2
Ответить

Тут все зависит от исходников, сложности анимаций и длительности видео. Можете написать нам в личку или на почту и мы поможем с рассчетами!

1
Ответить