Бронирование столиков: веб-приложение для сети ресторанов

Задача

Заказчик — сеть ресторанов. Брони записывали в бумажный журнал. Заказчик хотел, чтобы бронировать было удобно, брони не накладывались друг на друга, копилась база гостей и все рестораны сети работали в одной системе.

Приложение работает в браузере на планшете с Android. Гости бронируют по телефону: звонок принимает хостес и сразу заводит бронь.

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

В приложении три роли, у каждой свои права.

• Менеджер — на деле хостес или свободный официант. Принимает звонки, заводит и редактирует брони, меняет их статусы. Видит только столы своего ресторана.
• Админ — главный менеджер ресторана. Может всё, что менеджер, а ещё заводит залы и столы, создаёт менеджеров и назначает их на рестораны. Подменяет менеджера и видит, кто и когда менял брони.
• Суперадмин — владелец сети. Полный доступ ко всем ресторанам, пользователям, броням и базе гостей.

Что было сложным

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

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

Открыть в полном размере

Открыть в полном размере

Ключевые решения

Расписание на диаграмме Ганта

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

Что я сделала. Диаграмму Ганта попросил заказчик, я её спроектировала. Столы идут строками и сгруппированы по залам, у зала есть описание («Уличная зона. Для курящих»), у стола — число мест. Время идёт столбцами с шагом 30 минут, красная линия отмечает текущее время. Нажатие на свободное место открывает форму брони, где дата, время и стол уже проставлены.

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

Открыть в полном размере

Статусы цветом и бронь, которая ждёт действия

Проблема. Когда время брони наступает, гостей нужно не забыть встретить и отметить, что они пришли.

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

Открыть в полном размере

История изменений

Проблема. Брони ведут несколько человек в разные смены. Если гость пришёл, а стола нет, нужно знать, кто изменил или удалил его бронь.

Что я сделала. В карточке брони видно, кто и когда менял её последним. По ссылке открывается история: последние изменения с датой и временем, дата создания и кто завёл бронь.

Открыть в полном размере

Быстрая бронь по звонку

Проблема. Гостя нельзя долго держать на линии, а записать бронь нужно без ошибок.

Что я сделала. Вся бронь — в одном окне поверх расписания: дата, время начала, сколько часов, число гостей, зал, стол, телефон, имя и комментарий. Обязательные поля отмечены звёздочкой. Ошибка в номере видна сразу под полем вместе с подсказкой, как её исправить, а кнопка «Сохранить» не активна, пока форма не заполнена.

Открыть в полном размере

Разделы для владельца и админа

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

Открыть в полном размере

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

Открыть в полном размере

UI-kit и передача в разработку

UI-kit я сделала с нуля: шрифт, цвета, кнопки, поля, полоски броней и другие элементы диаграммы Ганта, всплывающее окно комментария. Состояния наведения нет: приложение работает на планшете. У полей есть состояние ошибки, у кнопки «Сохранить» — неактивное.

Макеты отдали в разработку целиком. Было даже видео, как сотрудники ресторана пробуют работать в приложении. Потом разработчики вместе с одним из основателей AZAT TEAM поменяли ввод времени на «с — по». По-моему, вышло неудобно; чем это кончилось, я не знаю.

Взгляд на доступность: что я исправила бы сегодня

Доступность в этом проекте не закладывалась. Сегодня я бы исправила:

• Статус виден только по цвету. Пришли ли гости и ждёт ли бронь подтверждения, понятно лишь по цвету полоски. Человек с нарушением цветовосприятия не отличит красную бронь от бирюзовой. Добавила бы к полоске значок или подпись статуса, например «Ждёт подтверждения». Критерий 1.4.1.
• Серый текст. Время на прошедших бронях и неактивные вкладки статуса — #838585 на #E8E8E9, контраст 3,0:1. Значения в карточке брони — тот же цвет на белом, 3,7:1. Нужно от 4,5:1. Критерий 1.4.3.
• Белый текст на цветных кнопках. На оранжевой «Редактировать бронь» контраст 1,9:1, на красной «Отменить бронь» — 4,0:1. Поставила бы тёмный текст на оранжевую кнопку и затемнила бы красную. Критерий 1.4.3.
• Белый текст на бирюзовом. Названия и описания залов, кнопка «Все бронирования» — белый на #3D8A95, контраст 4,0:1, а описания залов к тому же мелкие. Затемнила бы бирюзовый. Критерий 1.4.3.

Итог

Приложение запустили, сотрудники ресторанов им пользовались. Дальнейшие доработки шли уже без меня, и пользуются ли им сейчас, я не знаю.

Для портфолио я переработала главный экран: убрала с полосок мелкий текст, который по требованию заказчика ушёл в работу. Мельчить информацию я не люблю: это мешает пользоваться интерфейсом.