Авторизация
Забыли пароль?
Сброс пароля
Вернуться к авторизации
RUWARD AWARD #1

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

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

Ruward использует технологию "cookie" – сохранение на компьютере пользователя небольших текстовых файлов. Также мы используем на сайте сервис Яндекс.Метрика. Эта информация не позволит идентифицировать вас, однако может помочь нам улучшить работу нашего сайта. Если вы не согласны, чтобы мы использовали данные технологии, вы должны соответствующим образом установить настройки вашего браузера или не использовать наш сайт.

Согласен