study

UX/UI дизайн мобільного фітнес-додатку для тренувань

Дизайн головної сторінки проєкту UX/UI дизайн мобільного фітнес-додатку для тренувань

Задача

Провести UX-дослідження та спроєктувати інтерфейс мобільного фітнес-додатку з персональним підбором тренувань, програмами реабілітації та записом до тренерів.

Зроблено

Аналіз

Дизайн

Десктоп

Адаптиви

Анімації

Аналіз конкурентів

Провели глибокий UX-аудит 10 світових фітнес-мереж та мобільних додатків (The Gym Group, CrossFit Games, Virgin Active, Planet Fitness, PureGym, LA Fitness, F45 Training, Gold's Gym, Orangetheory, Curves). Оцінили візуальний дизайн, структуру навігації, ключові функції, УТП та бар'єри онбордингу кожного продукту.

Порівняльний аналіз 10 фітнес-додатків

Юзер персони

На основі дослідження сформували 4 персони користувачів із принципово різними цілями: від схуднення й підтримки форми при щільному ІТ-графіку — до фізичної реабілітації військових після поранень. Це дозволило закласти у продукт не лише стандартні тренування, а й адаптивні реабілітаційні програми з супроводом тренера.

Ольга

Ольга

Олена

Олена

Іван

Іван

Марія

Марія

User journey map

Деталізували 2 карти шляху користувача (CJM) для сценаріїв схуднення та післятравматичної реабілітації: від першого візиту в зал і скачування додатку за QR-кодом до подолання рутини на 3-му місяці занять. Для кожного бар'єра (складність вибору програми, страх неправильної техніки виконання вправи) прописали точкові UX-рішення з відеоінструкціями та чатом із тренером.

Карти шляху користувачів

Давайте працювати разом.

Готові втілити ваше бачення у життя? Давайте об'єднаємося для вашого наступного проєкту та разом створимо щось незабутнє.

// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
var paddingTop = 'px';
var sectionRadius = 'px';
// Interactive Theme Configuration
function updateButton(config) {
var radius = 'px';
btn.style.borderRadius = radius;
}
updateButton({ active: true });
Розробник

Color Styles

Pink
Purple
Orange
Green
Blue
Дизайнер

Прототипи

Перед візуальним дизайном спроєктували деталізовані чорно-білі UX-вайрфрейми ключового сценарію: онбординг, реєстрація з верифікацією, покроковий збір фізичних параметрів (вік, вага, ціль) та вибір програми тренувань і сертифікованого тренера.

Прототипи - мобільний інтерфейс 1
Прототипи - мобільний інтерфейс 2
Прототипи - мобільний інтерфейс 3
Прототипи - мобільний інтерфейс 4
Прототипи - мобільний інтерфейс 5
Прототипи - мобільний інтерфейс 6
Прототипи - мобільний інтерфейс 7
Прототипи - мобільний інтерфейс 8
Прототипи - мобільний інтерфейс 9

Мобільна версія

Фінальний UI-дизайн додатку виконаний у контрастній темній темі з енергійними лаймово-жовтими акцентами, що забезпечує відмінну читабельність під час тренувань у залі. Опрацьовано 27 екранів повного циклу: персоналізація параметрів тіла, каталог програм і тренерів, бронювання занять, прив'язка картки й оплата підписки, відеоплеєр вправ та екран статистики прогресу.

Мобільна версія - мобільний інтерфейс 1
Мобільна версія - мобільний інтерфейс 2
Мобільна версія - мобільний інтерфейс 3
Мобільна версія - мобільний інтерфейс 4
Мобільна версія - мобільний інтерфейс 5
Мобільна версія - мобільний інтерфейс 6
Мобільна версія - мобільний інтерфейс 7
Мобільна версія - мобільний інтерфейс 8
Мобільна версія - мобільний інтерфейс 9
Мобільна версія - мобільний інтерфейс 10
Мобільна версія - мобільний інтерфейс 11
Мобільна версія - мобільний інтерфейс 12
Мобільна версія - мобільний інтерфейс 13
Мобільна версія - мобільний інтерфейс 14
Мобільна версія - мобільний інтерфейс 15
Мобільна версія - мобільний інтерфейс 16
Мобільна версія - мобільний інтерфейс 17
Мобільна версія - мобільний інтерфейс 18
Мобільна версія - мобільний інтерфейс 19
Мобільна версія - мобільний інтерфейс 20
Мобільна версія - мобільний інтерфейс 21
Мобільна версія - мобільний інтерфейс 22
Мобільна версія - мобільний інтерфейс 23
Мобільна версія - мобільний інтерфейс 24
Мобільна версія - мобільний інтерфейс 25
Мобільна версія - мобільний інтерфейс 26
Мобільна версія - мобільний інтерфейс 27