Дизайн мобильного приложения Gymnizer: больше 100 макетов и 8 сценариев

О проекте

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

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

Задача

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

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

Сначала сделали прототипы, потом собрали user flow, где экраны связаны в сценарии со всеми ветками, и только после этого отрисовали дизайн-макеты. Всего получилось больше 100 макетов.

Макеты покрывают восемь сценариев: регистрацию, бронирование тренировки, открытие и проверку зала, текущую тренировку, продление и досрочное окончание, покупку товаров в магазине, завершение тренировки и меню «Ещё».

Первый запуск

Знакомство начинается с трёх экранов онбординга. Они кратко объясняют суть сервиса через его преимущества: «Твой личный зал», «Рядом с тобой», «В любое время». На каждом тёмное фото и жёлтый заголовок, а онбординг можно пропустить.

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

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

Главный экран и таймер

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

Отдельно продумали таймер ближайшей тренировки. Это элемент «2 в 1»: сначала он отсчитывает минуты и секунды до начала, а когда время наступает, превращается в кнопку Play. Начать тренировку можно и с главной, и с детальной страницы тренировки.

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

Бронирование зала

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

Дата, время и оплата

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

Бронирование оплачивается с внутреннего счёта, а после оплаты пользователь видит экран «Спасибо! Оплата прошла успешно» с кнопкой «Напомнить».

Тренировка

Когда время пришло, пользователь запускает тренировку и разблокирует дверь зала прямо из приложения. Потом нужно убедиться, что его устраивает состояние зала. Варианты ответа: зал в отличном состоянии, в зале кто-то есть, в зале грязно, зал не открылся. О проблеме можно сообщить и приложить фотографии. Если с залом что-то не так, бронирование отменяется с возвратом средств, а приложение предлагает альтернативные варианты.

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

Мои тренировки и платежи

В разделе «Мои тренировки» видны будущие и прошедшие тренировки, списком или в календаре. История платежей разделена на вкладки «Все», «Зачисления» и «Списания»: видно, когда пополняли счёт и за что списывали деньги. Отчёт по операциям формируется за месяц, неделю или день и уходит на почту. Вход в приложение защищён кодом, предусмотрен и вход по отпечатку пальца.

Визуальный стиль

Приложение тёмное, и акцентный цвет в нём один: жёлтый #D9D714. Им выделены главные кнопки, активные вкладки, таймер и свободное время на шкале. Оттенки серого разделяют фон, карточки и второстепенный текст. Заголовки набраны Montserrat Bold (34 и 24 px), основной текст Montserrat Regular (20, 18, 14 и 12 px).

Результат

Мы спроектировали приложение Gymnizer целиком: больше 100 макетов по восьми сценариям, от регистрации до меню «Ещё». В них есть и нештатные ситуации: зал не открылся или оказался грязным, тренировку нужно продлить или закончить раньше, нужен отчёт по платежам. Новому пользователю помогают онбординг, демо-режим и обучающие подсказки.

Если вы планируете своё приложение, посмотрите разработку мобильного приложения и UI/UX-проектирование: начнём с прототипов и user flow, а потом отрисуем все экраны.