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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Дизайн

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

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

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

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

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

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

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

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

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

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

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