Mobile App • UI/UX

Fitness app

Приложение для онлайн-тренировок, которое позволяет пользователям оставаться на связи с тренером 24/7, составлять программы тренировок и делиться результатами с друзьями.

Идея

Заказчики пришли к нам, когда у них уже был пул тренеров, с которыми они сотрудничали.

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

Workout video screen showing five women lifting pink dumbbells in a bright studio.

Как это работает?

Есть два пути:

1. Если пользователь занимался в зале, а потом решил продолжить заниматься дома, приложение обеспечит удобную коммуникацию с тренером и видео-инструкции к упражнениям.

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

Для удобства сделали мобильное приложение для клиентов, чтобы тренировки были всегда “под рукой”, и веб-версию для тренеров.

Purple laptop and smartphone screens displaying a fitness app with workout plans and a create account form.

Chat conversation with Michael Hill showing a photo of a man performing an abdominal exercise on a decline bench, followed by messages discussing breathing technique.

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

Как это работает со стороны клиента?

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

Portrait of a woman with short blonde hair wearing a light purple hoodie, against a gray blurred background.

Mobile app screen titled Details showing height input set to 170 cm and weight input set to 73 kg, with illustration of a woman running wearing earphones and a Done button at the bottom.

Mobile phone screen showing a November 2020 calendar with the 15th highlighted in purple and the 10th circled.

Как это работает со стороны тренера?

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

Laptop screen displaying a fitness app videos section with workout thumbnails and menu options.

Что получилось?

UI — Сделали привлекательный и современный интерфейс и два основных цвета: фиолетовый и розовый

Область нажатия пальца — в Fitness app кнопки 52px по гайдлайнам Apple

Mobile app screen showing user details input for height 170 cm and weight 73 kg with a running woman illustration below and a Done button.

Онбординг — пользователь указывает свои параметры на одном экране

Текст в карточках — вынесен на белый или затемненный фон для лучшего считывания

Изначально на этапе дизайна мы прорисовывали графики изменений показателей тела человека, но после оценки проекта, решили решили доделать их после релиза.

Mobile screen showing weight metrics progress with a graph of weight from 2 to 30 November 2020 and options to view weekly, monthly, quarterly, or yearly data.

UI/UX-дизайн

Референсом для Fitness app стал наш старый проект — Fitforce. Заказчики пришли с запросом сделать что-то похожее, но в итоге вышло совсем другое приложение.

Разработка

Язык — typescript
Мобильное приложение — React Native
Веб-приложение — React
Бэкенд — Node.js

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

Мы использовали Vimeo для всего, связанного с видео, Auth0 — для авторизации, Pusher — для чата между клиентом и тренером и Stripe для платежей.