SMSTRETCHING — это сеть фитнес-клубов в Москве с акцентом на занятие растяжкой. Помимо сайта у клуба имеется свое приложение с домашними тренировками.

Я работала под руководством Lead дизайнера, которая ставила задачи, принимала работу и передавала макеты в разработку. Работы по сайту завершились в феврале 2023 года.

Так мы придумали механику подарков за заполнение данных о себе и дарили 3 дополнительных дня к абонементу. Сами карточки с данными сделали яркими и привлекательными, чтобы пользователь точно обратил на них внимание.

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

Абонементы:

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

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

Мои занятия:

В списке занятий мы отображаем не только название направления, время начала и место, но и имена и фото преподавателей, а также пометку «NEW» для новых направлений. Для занятий до которых осталось менее 12 часов, кнопку «Отменить» переводим в состояние Disabled.

Для прошедших занятий добавили кнопку «Оценить», такая механика позволяет отслеживать степень удовлетворенности клиентов, после оценка остается в карточке в виде звездочек.

История платежей:

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

• Номер счета
• Дата и время совершения операции
• Сумма платежа
• Способ оплаты
• Квитанция и возможность ее скачать

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

В карточке две кнопки, одна ведет на страницу с расписанием, где можно сразу записаться, а вторая на страницу о студии.

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

• Студия только для девушек или для обоих полов;
• Наличие парковки;
• Количество направлений;
• Топовые направления, такие как Hot йога;
• Место ориентир: метро, достопримечательность, стадион, парк и т. д.

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

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

Переключение между «Разовым занятием» и «Абонементом» реализовала с помощью таба. Так как абонементов много (есть на разное количество занятий, во все студии или только в одну конкретную), я предусмотрела фильтры по студиям, количеству занятий и времени занятий (дневной абонемент и вечерний).

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

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

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

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

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

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

Что я хотела донести:

• Простота — это зрелость. Я сознательно ушла от сложных визуальных решений и перегруженности. Зрелый бизнес говорит просто, но по делу. Это и было заложено в основу: минимум графики, максимум акцентов на тексте и логике.