01 · Контекст проєкту
Орієнтація та Вихідна точка
FitHub Sport Club — це продуктова концепція сучасного фітнес-клубу. Метою було створити повноцінну багатосторінкову платформу: від головної сторінки до онлайн-магазину, з UX-рішеннями, що спираються на реальні потреби користувачів.
Концепція клубу включає персональні та групові тренування, кілька тарифних планів, protein bar, роздягальні з безкоштовними рушниками, профілі тренерів, merch-магазин і активну Instagram-спільноту.
Галузь
Produktkonzept · B2C
Завдання
UX/UI Design · Multi-Page
Роль
UX Strategie · Design · System
02 · Вимоги
Що має забезпечити платформа
→Показати і персональні, і групові тренування із сертифікованими тренерами
→Кілька цінових моделей: Test Drive, Basic, Premium і VIP
→Різні тренувальні програми: Strength, Fitness, CrossFit, Yoga та Pilates
→Інфраструктура клубу: роздягальні, душові, безкоштовні рушники та protein bar
→Секція спільноти та інтеграція Instagram
→Каталог тренерів з окремими профілями
→Merch-розділ із футболками, аксесуарами та добавками
→Зрозуміла комунікація локації: лише 5 хвилин до метро
→Lead-capture форма для заявок на зворотний дзвінок
03 · UX Аналіз
Структура замість складності
Ключове UX-питання звучало так: як розмістити розклад, тарифи, магазин, тренерів та інфраструктуру на одному сайті, не перевантаживши користувача? Відповіддю стала чітка інформаційна архітектура з окремими сторінками та сильною візуальною системою.
// 01
Зрозуміла структура сторінок
Home, Schedule, Coaches, Shop і Gym
// 02
Sticky-навігація для швидкого доступу до бронювання та кошика
Sticky-навігація для швидкого доступу до бронювання та кошика
// 03
Розділення між знайомством на головній і дією на внутрішніх сторінках
Розділення між знайомством на головній і дією на внутрішніх сторінках
// 04
Візуальна ієрархія
teal для CTA, orange як акцент енергії
Інформаційна архітектура та структура макета
04 · Design System
Teal & Orange Identity
Назва FitHub і візуальна айдентика були розроблені спеціально для цієї концепції. Логотип поєднує іконку dumbbell і геометричну типографіку. Teal відповідає за відчуття довіри та дії, а orange-red додає енергію й динаміку на контрасті темних hero-блоків і світліших контентних секцій.
Основний колір — Довіра та Дія
Бірюзовий — CTA бронювання, навігація, елементи довіри
Акцентний колір — Енергія та Динаміка
Оранжево-червоний — Хайлайти, тренувальні програми, бейджі
Логотип
Іконка гантелі + геометрична типографіка. Сильний, впізнаваний, спортивний.
Ритм фону
Темні Hero-секції чергуються зі світлими контентными блоками — візуальний ритм дихання.
Дизайн-система та UI-компоненти
05 · Стратегія
User Journey як основа
Стратегія будувалась за принципом користувацького шляху: надихнути, пояснити, переконати, сконвертувати. У кожної сторінки є своя чітка роль усередині цієї воронки.
01Hero-секція з сильним позиціонуванням і зрозумілим CTA
02Окремі сторінки для Schedule, Coaches, Shop і Gym замість перевантаженої головної
03Цінова логіка на основі чотирьох моделей членства з ясною різницею цінності
04Елементи спільноти, social proof і точки контакту на всьому шляху користувача
06 · Процес дизайну
Від концепту до платформи
01
Визначення інформаційної архітектури та структури сторінок
Визначення інформаційної архітектури та структури сторінок
02
Опрацювання desktop-макетів і візуальної ієрархії у Figma
Опрацювання desktop-макетів і візуальної ієрархії у Figma
03
Створення перевикористовуваної дизайн-системи для всіх сторінок
Створення перевикористовуваної дизайн-системи для всіх сторінок
04
Паралельне опрацювання мобільних екранів і патернів взаємодії
Паралельне опрацювання мобільних екранів і патернів взаємодії
07 · Фінальне рішення
Платформа на повну ширину
Конверсійний лендинг, структурований розклад, інтегрований магазин і довірчі профілі тренерів — все як єдина система.
Інтерактивний розклад занять
Інтегрований онлайн-магазин
08 · Мобільний досвід
Мобайл як самостійний шлях
Мобільна версія проєктувалася не як урізане доповнення, а як повноцінний основний користувацький сценарій.
Hamburger menu, компактні product cards і overlay-модулі бронювання дають той самий повний шлях на смартфоні без втрати функціональності.
Quick-action іконки для wishlist і cart прямо в header
Інтерактивні картки товарів з add-to-cart і detail popups
Overlay-сценарій запису на заняття без жорстких переходів між сторінками
Lead generation через модальну форму для newsletter і callback requests
09 · Результати
Що було доставлено
Не MVP-фрагмент — а повноцінний, цілісний продукт. Кожна сторінка з власною метою, всі разом — система.
5+
Повноцінний багатосторінковий дизайн
5+ пов'язаних сторінок: Schedule, Coaches, Shop, Gym і Contact — кожна з чіткою користувацькою задачею.
4
Спроєктовано 4 моделі підписки
Тарифи Test Drive, Basic, Premium і VIP з чіткою візуальною ієрархією та логікою конверсії.
2×
Mobile-First прототип
Повністю адаптивний Figma-прототип для desktop і smartphone.
✓
Повна дизайн-система
Єдині UI-компоненти, типографіка та палітра teal/orange, застосовані на всій платформі.
