Trainet World Фитнес-приложение для онлайн-тренировок

Кейс разработки Trainet World

Основные цели создания мобильного приложения

К нам обратились заказчики — группа спортсменов, проживающих на территории ОАЭ. У них появилась идея создать приложение для проведения тренировок в режиме онлайн, которое устраивало бы и спортсменов, и тренеров, предлагающих свои услуги онлайн.

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

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

Артем

Дизайнер

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

Задачи

Создать экосистему для проведения онлайн тренировок в видео формате с элементами соцсети для атлетов, тренеров, команд и болельщиков.

Экосистема для проведения онлайн тренировок в видео формате с элементами соцсети для атлетов, тренеров, команд и болельщиков

Аналитика

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

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

Блок-схема структуры приложения от заказчика

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

Вячеслав

Аналитик

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

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

Личный профиль в приложении

Решение поставленных задач:

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

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

Преимущества приложения во время тренировок

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

Вячеслав

Аналитик

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

Процесс взаимодействия

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

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

Спортивная экосистема, включающая в себя социальную сеть

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

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

Отслеживание тренером своих финансов в приложении

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

Отслеживание тренером параметров своих спортсменов

Технические сложности и их решение

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

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

Календарь

«Мы вдохновлялись Гугл календарем и почерпнули из него такие функции, как возможность делать повторяемые мероприятия, сдвигать их на несколько часов или даже дней»

Виктория

Frontend-разработчик

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

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

Интеграция со смарт-часами

Дизайн

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

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

«Шрифты и цвета — это элементы фирменного стиля заказчика. Мы не стали их менять, только слегка откорректировали и поработали над акцентами в тексте, чтобы все смотрелось более гармонично и аккуратно»

Артем

Дизайнер

Дизайн

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

Интерактивные элементы
Тренировка в приложении

Планы на будущее

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

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

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

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

Заключение

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

Готовое приложение для занятий спортом

Другие кейсы

Гриль № 1

  • Фудтех
  • Сервис

Сайт и мобильное приложение для доставки из сети ресторанов быстрого питания. Интеграция с iiko

Tagline Awards. Бронза

WDA. Золото

WDA. Серебро

Dropfile. Интерфейсы

Сервико

  • Автотех
  • Логистика
  • Приложение для планшета

Корпоративное приложение для планшетов крупной логистической компании Сервико. Документооборот, прием заявок, трекинг водителей, маршруты доставки.

WDA. Серебро

Tagline Awards. Серебро

CarClick

  • Сервис
  • E-commerce
  • Автотех

Маркетплейс и аукцион для покупки автомобилей онлайн. Разработали веб-сервис и мобильное приложение.

Вэлко

  • Сервис
  • ERP

Сайт для аренды квартир в доме повышенной комфортности с услугами отеля.

Yaves

  • Сервис

Сервис аренды яхт в Сочи. Удобный кастомный календарь, функциональный каталог с онлайн бронированием, личный кабинет владельца яхты и арендатора.

Стройпарк

  • Мобильное приложениe
  • E-commerce

Мобильное приложение интернет-магазина строительных материалов.

Tarkett

  • Сервис
  • ERP

ERP система для мирового лидера напольных покрытий. Электронная подпись, групповая работа с документами, интеграции с Картами и внутренними виджетами.

Trainet

  • Социальная сеть
  • Мобильное приложениe

Приложение-соцсеть для спортсменов и тренеров. Онлайн-тренировки, бронь занятий, блоги.

WDA. Серебро

Fish2o

  • Сервис
  • Фудтех

Корпоративный сайт для компании-производителя премиум лосося и форели.

WDA. Бронза

Behance

Whoosh

  • Автотех
  • Логистика
  • Сервис

Сервис для курьерской службы и экспресс-доставки для жителей США.

Спроси Врача

  • Медтех
  • Сервисы

Автоматизированный сервис для медицинских консультаций онлайн

ФССП.РФ

  • Сервис

Сайт и приложение, с помощью которых пользователь может проверить и уплатить штрафы в ФССП и ГИБДД.

Telemetron

  • Фудтех
  • Мобильное приложениe
  • Сайты

Мобильное приложение для управления сетью вендинговых автоматов.

Dropfile. Интерфейсы

ТутCервис

  • Мобильное приложениe
  • Автотех

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

Behance

Киномир

  • Мобильное приложениe

Мобильное приложение для сети кинотеатров в Сибирском федеральном округе.

Happens

  • Социальная сеть
  • Мобильное приложениe

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

Корона Авто

  • Сервисы
  • Автотех

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

Обменник

  • Сервисы
  • Финансы

Сервис для автоматического обменника электронных валют.

Pikemedia

  • Сервисы
  • E-commerce
  • Сайты

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

ArTravel

  • Сайты
  • Концепция

Мобильное приложение-путеводитель с AR.

StayHome

  • Мобильное приложениe

Игровое мобильное приложение, призывающее соблюдать карантин во время пандемии COVID-19.

Incognito

  • Социальная сеть
  • Мобильное приложениe

Мобильное приложение-социальная сеть для анонимной оценки человека.

Reporter

  • Сервисы

Система подсчета эффективности проектов и исполнителей.

Места Будды

  • Сайты
  • Концепция

Приложение-путеводитель по буддийским местам России.

Обложка кейса НяняГуру

Tagline Awards. Бронза

Made on Tilda

НяняГуру

  • Мобильное приложениe

Мобильное приложение для поиска нянь и их трудоустройства

Обложка кейса Lutch

Lutch

  • Сайты
  • Концепция

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

Обложка кейса образовательной онлайн-платформы

Онлайн-школа

  • Сайты
  • Концепция

Открытая школа 2035 — образовательная онлайн-платформа для учителей и школьников 7-18 лет из России и Казахстана.

Обложка кейса Mriya Resort

Mriya Resort

  • Сайты
  • Концепция

Mriya Resort & SPA — пятизвездочный отель на Южном берегу Крыма, на территории которого есть медицинский и SPA-центр, современный конгресс-центр, парк и собственный пляж.

caseTrainet