Projecto

Онлайн-запись в теннисный клуб

📌 Задача

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

Групповые тренировки
Персональные тренировки
Аренду кортов (теннис / падел)

Решение должно поддерживать два режима:

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

Важно не визуальное оформление, а обоснование IA/UX-решений, понимание бизнес-процессов и пользовательских сценариев.

👥 Роли и сценарии
🧑‍🦰 Клиент: Аня
Цель: За 2 клика найти и забронировать слот Сценарий:

Хочет тренировку сегодня в 19:00 или завтра утром
Нужна информация:
- Цена
- Длительность
- Свободные места
- Правила отмены
Возможность:
- Забронировать без оплаты
- Оплатить картой (с эмуляцией success/fail)

‍💼 Админ: Сергей
Цель: Быстро управлять записями Сценарий: Видит те же слоты, но с расширенными действиями:

- Записать постоянного клиента
- Создать персональную тренировку
- Продлить аренду корта
- Отметить no-show
- Перенести запись
- Сделать возврат средств

🏟️ Бизнес-правила

Локация

Одна, 2 корта: Хард, Трава

Групповые

«Теннис для начинающих»: пн/ср/пт 19:00, 60 мин, 12 мест, 1 000₽/чел, waitlist до 5

Персоналки

60/90 мин • Junior: 2 500₽ / 3 600₽ • Pro: 4 000₽ / 5 500₽

Аренда корта

30/60/90 мин • Будни до 17:00 — 1 800₽/ч • После 17:00 и выходные — 2 400₽/ч

Оплата

«Забронировать без оплаты» или «Оплатить картой»
🧭 Что нужно сделать

1. User Flow
- B2C: Самозапись клиента (от выбора типа → слота → оплаты/брони)
- B2B: Быстрая запись админа (поиск клиента → выбор слота → действие)
2. Информационная архитектура (IA)
- Как на одном экране органично разместить 3 категории
- Навигация и фильтры:
  - По типу активности
  - По дате/времени
  - По доступности (свободно / ожидание)
  - По цене / тренеру / типу корта
3. Ключевые экраны (мобильные)
- Единый «Экран записей» — агрегирует все три типа бронирования
  - Четкое визуальное разделение категорий
  - Минимизация шагов до бронирования
  - Отображение ключевой информации «в лоб»: цена, время, свободные места

💡 Решение B2C

🔍 ИНФОРМАЦИОННАЯ АРХИТЕКТУРА (IA)

1. Главная точка входа — «Мои записи»
Экран “Мои записи” — это личный кабинет клиента. Он показывает:

Все текущие и будущие записи;
Возможность отменить запись;
Кнопку “Записаться” — если записей нет, то приглашает начать.

✅ Почему так? Это соответствует принципу “первое, что видит пользователь — его собственное состояние”. Клиент приходит не за “выбором услуг”, а за “планированием времени”. Если у него есть запись — он видит её. Если нет — система предлагает создать.
2. «Каталог» — единый экран для всех типов услуг
После нажатия “Записаться” — клиент попадает в каталог, где:

Фильтр по дате: “Сегодня / Завтра / Дата” → позволяет быстро найти нужный день.
Фильтр по времени: после выбора даты — показываются доступные часы (10:00, 16:30, 19:00).
Список клубов: только те, где есть свободные слоты на выбранную дату/время.

📌 Важно: клиент не выбирает тип услуги (групповые/персональные/аренда) на этом этапе. Он выбирает время и место — и система уже подтягивает, что доступно.
💡 Это экономит когнитивные ресурсы: клиент не думает “что я хочу”, а просто смотрит “что есть”.
3. Экран «Оформить запись» — пошаговый мастер с минимальными шагами
После выбора времени и клуба — клиент попадает на экран оформления:
Шаг 1: Выбор покрытия и типа услуги

Покрытие: Трава / Хард (по умолчанию — последнее выбранное или рекомендованное).
Вид: Групповые / Персональные / Аренда корта.

Шаг 2: Оплата — два варианта

“Забронировать без оплаты” — для тех, кто хочет прийти и оплатить на месте.
“Оплатить картой” — с выбором карты (в эмуляции).

Шаг 3: Подтверждение — явное и безопасное
Экран “Проверьте данные и подтвердите запись” — содержит:

Все параметры: дата, время, покрытие, тип услуги, цена, длительность, кол-во мест.
Информацию о правилах отмены (“можно отменить позже”).
Кнопку “Записаться” — финальное действие.

🛑 Важно: запись резервируется только после нажатия кнопки. Это предотвращает случайные бронирования.

🔄 USERFLOW КЛИЕНТА (B2C)
Сценарий: Анна хочет записаться на тренировку сегодня в 19:00

Открыть приложение → экран “Мои записи” → Нет записей → нажать “Записаться”
Перейти в “Каталог” → выбрать “Сегодня” → выбрать “19:00” → Показывается список клубов с доступными слотами → выбрать “Tennis Sport Club”
На экране “Оформить запись” → выбрать покрытие “Трава” и тип “Групповые тренировки” → Нажать “Далее”
Выбрать способ оплаты: “Забронировать без оплаты” → Нажать “Оформить запись”
Подтвердить запись → запись создана, статус “Без оплаты”

📌 Ключевое преимущество: всё в одном потоке, без переходов между разными разделами. Клиент не теряется — он просто выбирает время → место → параметры → подтверждает.

🧩 ЛОГИКА ОБЪЕДИНЕНИЯ ТРЕХ ТИПОВ УСЛУГ НА ОДНОМ ЭКРАНЕ
Принцип: “Слот — это слот, независимо от типа услуги”

Система не разделяет интерфейс по типам услуг.
Вместо этого — единый механизм выбора даты + времени + места.
После выбора — система подтягивает доступные слоты с указанием:
Типа услуги (групповая, персональная, аренда),
Цены,
Длительности,
Количества мест/тренеров.

✅ ПРОДУКТОВЫЙ БОНУС: МАСШТАБИРУЕМОСТЬ

Система не разделяет интерфейс по типам услуг.
Вместо этого — единый механизм выбора даты + времени + места.
После выбора — система подтягивает доступные слоты с указанием:
Типа услуги (групповая, персональная, аренда),
Цены,
Длительности,
Количества мест/тренеров.

💡 Решение B2B
🔍 ИНФОРМАЦИОННАЯ АРХИТЕКТУРА (IA)

1. Главная точка входа — «Запись»
Экран не начинается с выбора типа услуги, а с поиска клиента или места — это критически важно для B2B: админ знает, кого он записывает и куда, а не что именно он хочет забронировать.
💡 Почему? В реальном сценарии админ работает с конкретным клиентом: «Анна звонит — хочет сегодня в 19:00». Он не выбирает тип тренировки — он ищет слот для Анны. Это меняет всю логику IA.
2. Табы «Клиенты / Места / Слоты» — правильная иерархия

«Клиенты» — основной режим. Админ видит список клиентов, которых можно быстро выбрать.
«Места» — если нужно создать запись без привязки к клиенту (например, для гостя).
«Слоты» — для просмотра всех свободных/забронированных слотов по датам (не показано, но логично).

✅ Это соответствует принципу “пользователь-центричность” даже в B2B: админ — это пользователь, который решает задачу “записать клиента”, а не “выбрать услугу”.
3. Контекстная карточка записи — все ключевые данные на одном экране

После выбора клиента и слота (08.10.25, 19:00, Трава, Групповая) — показывается расширенная карточка с:
- Деталями тренировки (тип, время, покрытие, цена, длительность, кол-во мест);
- Статусом оплаты (“Забронировано без оплаты”);
- Кнопками действий: редактировать, отменить, перенести, оформить скидку.

⚙️ Почему так? Админ должен иметь максимальную скорость доступа к действиям. Все операции — в одной карточке, без переходов. Это экономит время и снижает когнитивную нагрузку.

🔄 USERFLOW АДМИНА (B2B)

Открыть экран «Запись» → вкладка «Клиенты» → Поиск по имени или выбор из списка → «Анна Аннова»
Нажать «Записать» → Переход на экран выбора клуба → «Tennis Sport Club»
Выбрать дату → 08.10.25 → выбрать слот 19:00 (Групповая, Трава) → Подтверждение → Карточка записи
На карточке — нажать «Оформить» → Запись создана, статус “Без оплаты”
(Опционально) Нажать «Перенести» / «Отменить» / «Оформить скидку» → Все действия доступны сразу.

📌 Ключевое преимущество: админ не переходит между разными разделами “Групповые / Персональные / Аренда”. Он просто выбирает слот — и система сама определяет тип услуги по контексту.

#ПродуктовыйДизайн #UXДизайн #UIДизайн #UserExperience #UserInterface #ProductDesign #UXResearch #UIUX #UX #UI