Trainet World. Всемирная тренировочная платформа

1. Вводная задача от заказчика, проблематика, цели

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

Для заказчика было важно реализовать на проекте следующие функции:

• Функцию видеосвязи для проведения онлайн тренировок в режиме реального времени;
• Элементы социальной сети для обмена опытом и общения;
• Систему мониторинга спортивного состояния занимающегося: его физических параметров и спортивного развития;
• Возможность создания индивидуальных тренировочных комплексов.

Проект в студию поступил с готовым техническим заданием и своим видением дизайна и структуры будущего проекта.

Артем Сафаров

Дизайнер, Pyrobyte

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Аналитика

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

В первую очередь изменили ТЗ и структуру сайта.

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

Вместо стандартной аналитики провели полевое исследование среди будущих пользователей. Это позволило понять реальные проблемы, и потребности клиентов, и сформировать список функций и предложений по продукту:

• Удобная схема взаимодействия между тренером и атлетом до, во время и после тренировки;
• Общение с другими пользователями, обмен опытом и результатами;
• Участвовать в соревнованиях;
• Простой для использования, но при этом функциональный календарь;
• Интеграция со смарт часами;
• Система отзывов для оценки занятия;
• Возможность рекламировать свои услуги в рамках одного приложения (для тренеров).

Дизайн

После агрегации требований и адаптации документации преступили к работе и первым делом провели ревью дизайна, предоставленного заказчиком. От нас требовалось сохранить фирменный стиль, при этом улучшив UI/UX, логику работы верстки и сделав оформление более эстетичным.

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

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

Взаимодействие между тренером и атлетом

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

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

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

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

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

Календарь и система бронирования

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

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

Из плюсов можем выделить:

• Снижение ресурсов на разработку этого элемента
• Снижение потраченного времени на дизайн, верстку и программирование
• Работа с уже готовым функционалом

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

Тренировка по видеосвязи

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

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

Для внедрения видеосвязи в приложение мы использовали библиотеку agora rtp_engine и видео сервис Agora IO. Работает связь по следующей схеме:

• В начале тренировки со стороны одного из участников Agora создает комнату, которой присваивается ID;
• ID комнаты отправляется на сервер, где хранится до окончания сессии.

Когда к занятию присоединяется второй участник, сервер проверяет ID комнаты для этой тренировки и подключает его к звонку.

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

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

Социальная сеть и обмен опытом

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

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

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

3. Результаты сотрудничества

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

Нам удалось создать удобный сервис, который понравится и тренерам, и спортсменам. Мы учли их замечания и пожелания, а потому функционал Trainet World в полной мере закрывает все основные потребности. Ознакомиться с проектом подробнее можно в Google Play, App Store, а также в кейсе на нашем сайте.

4. Заключение

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

• Интегрировать Trainet World со смарт часами популярных торговых марок;
• Разработать и обучить нейросеть, которая будет отслеживать положение и движения атлета и вовремя предупреждать, если упражнение выполняется неправильно;
• Собирать обратную связь от пользователей. Это позволит нам совершенствовать проект, делая его только лучше.

Скачать получившееся приложение можно по ссылкам:

• https://apps.apple.com/ru/app/trainet-world/id1666176205
• https://play.google.com/store/apps/details?id=com.trainet.trainet

Trainet World

компания, Trainet World

Честно говоря, не ожидал что мы найдем такую компанию. Требования были завышены, бюджет был ограничен, задание было очень сложное. И кто бы мог подумать что в РФ... в Барнауле... найдется такой разработчик. Работаем уже год, в течение этого времени ни разу не возникло серьезных проблем, в переговорах в технических решениях, в плане исполнения проекта. Тьфу Тьфу Тьфу, боюсь перехвалить, так как находимся на последней стадии проекта. Если нужны отзывы о работе на Пиробайт, то коллеги смогут дать мой контакт для референса и расскажу в подробностях лично.