Разработка интерфейса приложения для онлайн записи на услуги
Онлайн-запись в теннисный клуб
📌 Задача
Спроектировать ключевые экраны и пользовательские сценарии для онлайн-записи в теннисном клубе, где на одном экране пользователь может выбрать:
Групповые тренировки
Персональные тренировки
Аренду кортов (теннис / падел)
Решение должно поддерживать два режима:
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
