23TopTraining | Приложение персональных тренировок на Ionic и Firebase

Главный экран приложения 23TopTraining с прямым доступом к планам тренировок.

О проекте

23TopTraining вырос из конкретной задачи: перенести метод Хуанкара, персонального тренера из Мадрида с многолетним опытом работы со спортсменами и требовательными клиентами, в собственное мобильное приложение, чтобы метод стал доступен гораздо большему числу людей без потери качества.

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

Смотреть проект

Что мы сделали

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

Приложение iOS и Android

Гибридное приложение на Ionic в обоих сторах из одной кодовой базы.

Недельные планы

Тренировки по неделям и целям, с прогрессией и днями отдыха.

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

Упражнения с подходами, повторами и указаниями прямо в телефоне.

Бэкофис тренера

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

Push-уведомления

Оповещения о новой тренировке и напоминания для регулярности.

Айдентика и UX/UI

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

Экраны входа и регистрации приложения 23TopTraining

Контекст и потребность

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

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

Какую задачу нужно было решить

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

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

Решение Digitup

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

Приложение построено как гибридное на Ionic: одна кодовая база для iOS и Android, Firebase — как бэкенд для авторизации, данных и push-уведомлений. Поверх этого — бэкофис, где тренер создаёт планы, собирает тренировки и управляет пользователями без кода.

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

Продукт на экране

Экраны онбординга приложения 23TopTraining

Экран упражнений приложения 23TopTraining

Экраны для App Store и Google Play 23TopTraining

Ключевые возможности

Регистрация и вход пользователей
Персональный недельный план тренировок
Тренировки с упражнениями, подходами и повторами
Отметка выполненных тренировок
Отслеживание прогресса
Push-уведомления и напоминания
Управление пользователями в бэкофисе
Создание и редактирование планов тренером
Медиаматериалы к упражнениям
Публикация в App Store и Google Play

Как мы работали

Общий мудборд с клиентом
Перевод метода в структуру продукта
Вайрфреймы и пользовательские сценарии
Итерации UI-дизайна
Очные рабочие сессии
Гибридная разработка на Ionic
Бэкенд и данные в Firebase
Публикация в сторах и поддержка

Архитектура и технологии

Приложение построено на Ionic и Angular с одной кодовой базой для iOS и Android: это вдвое снижает стоимость поддержки и позволяет выпускать изменения сразу на обеих платформах. Firebase отвечает за авторизацию, базу данных, хранение контента и доставку push-уведомлений.

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

Ionic Angular Firebase Cloud Firestore Firebase Auth Push-уведомления iOS Android Бэкофис UX/UI

Результат проекта

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

Для Digitup это показательный пример работы с уже действующим бизнесом: мы отталкиваемся не от абстрактной идеи, а от проверенного метода, и превращаем его в софт, которым клиент управляет сам.

Частые вопросы

Что Digitup сделал в проекте 23TopTraining?

Digitup Studio спроектировал и разработал продукт целиком: визуальную айдентику и UX/UI приложения, гибридную разработку для iOS и Android на Ionic, бэкенд на Firebase, бэкофис тренера, push-уведомления и публикацию в сторах.

На какой технологии построено приложение?

На Ionic и Angular с одной кодовой базой для iOS и Android, с Firebase в роли бэкенда для авторизации, базы данных, контента и push-уведомлений.

Сколько занимает разработка такого приложения?

Первая публикуемая версия приложения с планами, тренировками, бэкофисом и уведомлениями обычно занимает от двух до четырёх месяцев — в зависимости от объёма метода и числа ролей пользователей.

Может ли тренер создавать планы без помощи разработчиков?

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

Digitup делает мобильные приложения для других отраслей?

Да. Digitup Studio — техническая студия из Мадрида: мобильные приложения, SaaS-платформы, бэкофисы и интеграции для мобильности, финансов, образования, спорта, туризма и профессиональных услуг.