Расписания и слоты для SPA-системы бронирования

Product DesignUX/UISaaSCRMBooking System2021–2023

Один из ключевых модулей большой SaaS-системы: настройка графиков, бассейнов и правил, по которым клиент видит доступное время для записи

Контекст

SaaS-система бронирования для SPA, бассейнов, массажных и beauty-сервисов. Этот кейс показывает модуль расписаний: настройку графиков, технических интервалов, бассейнов и правил, по которым клиент видит доступные слоты для записи

Роль пользователя

Администратор салона настраивает расписания, услуги, мастеров и доступность бассейнов. Клиент видит только финальный результат — свободные даты и время для бронирования

Моя роль в разработке продукта

Я отвечал за UX/UI модуля расписаний: проектировал сценарии администратора и клиента, логику технических интервалов и шаблонов графиков, продумывал ключевые флоу и проверял решения на юзабилити-тестах перед передачей в разработку
Проект
SaaS-система бронирования для SPA и wellness-сервисов
Метод
Product design + UX/UI design
Год
2021-2023
Технология
Web CRM | Booking system
Интерфейс модуля расписаний SaaS-системы бронирования для SPA

Пользователи и роли

В модуле расписаний пересекались несколько ролей. Администратор системы создавал базовую структуру платформы, администратор салона настраивал расписания и операционные правила, мастер работал по графику, а клиент видел только финальный результат — доступные слоты для записи.

Администратор системы

Создаёт и поддерживает базовую структуру платформы: салоны, офисы, роли, пользователей и справочники. На этом уровне задаются сущности, с которыми дальше работает CRM салона.

Администратор салона

Главная операционная роль в этом сценарии. Администратор настраивает офисы, бассейны, услуги, графики работы, мастеров и правила, по которым система формирует доступные слоты для записи.

Мастер

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

Агент

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

Основные сценарии

В качестве главного сценария я бы показывал настройку работы бассейна. Это хороший пример сложности системы: администратор должен настроить не просто «рабочие часы», а набор правил, из которых потом собираются доступные интервалы для клиента

Flow

Этот flow показывал, как внутренняя настройка CRM превращается в клиентский сценарий записи: пользователь видит простой выбор времени, но за ним работает набор правил и ограничений.

01Создание офиса
02Добавление бассейна / зоны
03Настройка услуги
04Выбор длительности сеанса
05Добавление технического времени
06Настройка графика работы
07Привязка мастеров / сотрудников
08Генерация доступных слотов
09Клиентское бронирование

Решения

Настройка бассейнов

Обзор

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

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

Настройка бассейнов в CRM модуля расписаний

Техническое время между сеансами

Обзор

Одним из важных правил было техническое время между сеансами. Например, после посещения бассейна нужно было оставить 15 минут на подготовку зоны к следующему клиенту. Это время не должно было отображаться как свободный слот, но при этом должно было учитываться при генерации расписания.

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

Настройка технического времени между сеансами

Шаблоны графиков работы

Обзор

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

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

Мастер в нескольких офисах

Обзор

Отдельная сложность возникала из-за мастеров, которые могли работать в нескольких офисах. Это создавало риск пересечений: один и тот же мастер не должен был быть доступен в двух местах одновременно, даже если разные офисы формально открыты.

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

Настройка доступности мастера в нескольких офисах

Генерация доступных слотов для клиента

Обзор

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

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

Клиентский экран бронирования доступных слотов

Ограничения MVP и legacy

Проект развивался в условиях MVP, накопленного легаси и постоянно меняющихся приоритетов. За несколько лет в системе появилось много логики, которую нужно было учитывать при проектировании новых сценариев. Не всегда была возможность пересобрать всё идеально — часто нужно было встроить новую механику в уже существующую архитектуру. Поэтому часть интерфейсов проектировалась как быстрый рабочий слой для разработки: с опорой на Ant Design, существующие паттерны и ограничения текущей системы. Приоритетом была не визуальная уникальность, а предсказуемость, скорость реализации и снижение риска ошибок в расписаниях

Коротко в тезисах:

  • много накопленной логики и legacy, которые нельзя было пересобрать целиком
  • часть интерфейсов опиралась на Ant Design и существующие паттерны системы
  • расписания были самым рискованным местом системы: цена ошибки в них — двойная запись или сорванный слот

Проверка решений

Полноценной регулярной аналитики в проекте не было, но отдельные сценарии проверялись через локальные юзабилити- и коридорные тесты. Мы смотрели, насколько понятно менеджерам настраивать расписания, создавать услуги и работать с операционными сценариями. Особое внимание уделялось сценариям, где была высокая цена ошибки: изменение графика, настройка расписаний и создание доступных слотов. Такие проверки помогали находить проблемные места в сложных формах и корректировать логику до передачи в разработку

Для usability-теста я зафиксировал целевые лимиты времени для трёх ключевых сценариев. Эти показатели использовались как ориентир для оценки понятности интерфейса и скорости выполнения задач.

Создание расписания мастера

Целевой лимитдо 20 сек
Результат
14,2 секбыстрее

Создание абонемента клиенту

Целевой лимитдо 45 сек
Результат
31,6 секбыстрее

Создание записи администратором

Целевой лимитдо 60 сек
Результат
47,3 секбыстрее

Итог

Этот модуль стал одним из самых сложных направлений в системе бронирования. За простым клиентским выбором времени стояла большая операционная логика: офисы, бассейны, мастера, услуги, технические интервалы, графики и правила доступности. Для меня это был сильный опыт проектирования B2B SaaS-системы, где UX строится не вокруг визуального эффекта, а вокруг точности, предсказуемости и устойчивости сложных бизнес-правил

Следующий проект

Мобильные интерфейсы системы бронирования wellness-сервисов

White-label платформа для SPA, бассейнов, массажных и wellness-центров