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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Календарь.

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

Видеосвязь

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

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

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

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

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

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

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

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