Контекст
В экосистеме CRM-платформы появляется продукт — бронирование столиков для ресторанов. Конечно же, важно, чтобы гостям было удобно создать бронь через специальный виджет, который сейчас часто можно увидеть на сайтах различных ресторанов.
Задача
Разработать дизайн виджета бронирования, для начала нужно подготовить базовую версию виджета в бренд-буке компании. В будущем, для b2b-клиентов виджет будет кастомный — по фону, логотипу, цвету текста и кнопок.
Виджет должен быть адаптивен для веб и мобильной версии.
Форма внутри должна собирать следующие данные о госте:
— Имя
— Дата желаемого бронирования
— Время бронирования
— Количество гостей
— Филиал ресторана (если это сеть)
Основная аудитория
В открытом доступе не так много исследований, связанных конкретно с онлайн-бронированием столиков, однако есть данные по бронироваю столов в целом и данные об использовании приложений, связанных с заказом еды. Чаще всего бронируют столики респонденты в возрасте от 25 до 44 лет. В гендерном соотношении результаты таковы: позаботиться о месте заранее готовы 21% мужчин и 14% женщин. А вот накануне очень важных событий (дни рождения, юбилеи) женщины становятся более ответственными: в этом случае стол забронируют 51% женщин и 36% мужчин. Что же касается формата бронирования, то подавляющее большинство россиян предпочитают классический способ — по телефону (67%), а 33% бронируют места онлайн с помощью специальных приложений. Целевая аудитория фуд-приложений — люди в возрасте 25–34 лет.
Зарубежом, согласно исследованиям, 65% посетителей бронируют стол непосредственно через сайт ресторана, вероятнее всего в России будет похожая тенденция с дальнейшим ростом посетителей, предпочитающих бронировать столы именно через сайт.
Согласно статистике с сайта gs.statcounter.com большая часть пользователей использует мобильные устройства, однако в России преобладает десктоп. Предположим, что виджет будет доступен для разных стран, поэтому я буду ориентироваться в первую очередь на создание мобильной версии виджета, а уже после на создание веб-версии.
Портреты целевой аудитории
В экосистеме CRM-платформы появляется продукт — бронирование столиков для ресторанов. Конечно же, важно, чтобы гостям было удобно создать бронь через специальный виджет, который сейчас часто можно увидеть на сайтах различных ресторанов.
Андрей
29 лет
Менеджер по продажам
Часто проводит время с друзьями, путешествует, интересуется художественной литературой
Василиса
34 года
Студентка магистратуры
Увлекается кинематографом, часто посещает музыкальные фестивалей
Дмитрий
34 года
Руководитель строительной компании
Любит играть в футбол, поездки на природу, отдых в семейном кругу
Минимум шагов
Mobile First
Ясность, удобство, визуальная эстетика
Ключевые моменты, которые необходимо учесть:
Таблица с анализом конкурентов представлена
Анализ конкурентов
Дизайн
При переходе в виджет пользователь видит три блока данных, которые ему необходимо указать:
1. Основные, в которых указываются данные бронирования.
2. Особые пожелания, где можно отметить важность события и отдельно указать комментарии к брони (заполняется по желанию).
3. Контактные данные для связи с пользователем.
В форму для введения количества гостей можно ввести только число. Если в ресторане есть ограничения по рассадке, можно заранее указать их в Description под Input.
Дата выберается в календаре, а время подтягивается из доступных слотов ресторана с шагом в полчаса. Если в конкретное время нет подходящих под количество гостей столов, слот отключён и его нельзя выбрать.
Логика десктопной версии такая же, как и у мобильной, но пользователь заполняет данные в 3 отдельных шага в соответствии со смысловым разделением на блоки. При желании пользователь может вернуться назад, нажав на соответствующий шаг, при наведении состояние шага меняется на Hover.
После заполнения всех данных пользователь видит информацию о резервировании стола, которую может добавить в календарь. Также он может поделиться бронированием, например, с коллегами, с которыми планирует пообедать, или с девушкой, которую позвал на свидание.
Результат
Дизайн получился минималистичным и удобным, виджет имеет достаточный функционал, чтобы через него можно было совершать бронирования через сайты ресторанов.
Что можно добавить в будущем:
1. Карта зала с выбором конкретного стола
2. Дополнительные поля с указанием аллергенов, непереносимых ингредиентов
3. Возможность добавить обязательный депозит
4. Возможность отменить бронь онлайн (например, через куки)