Запустили сервис онлайн-бронирования для автопроката в 5 странах. Вот как мы сделали его удобным для клиентов

Это «Атвинта». Недавно мы запустили сайт для автопроката RentMotors с сетью на 28 городов и 5 стран. Собрали 16 рекомендаций для работы с интерфейсами бронирования и показали, как это выглядит на наших примерах. Советы помогут вам создать второй Booking или что покруче!

RentMotors обратились к нам за разработкой нового сайта с онлайн-бронированием автомобилей. Заявки компания принимает как через партнерские, так и через собственные каналы, при этом львиная доля заказов проходит именно на сайте компании.

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

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

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

Они основаны на привычных решениях, которые встречаются в таких интерфейсах, например, на Aviasales, Tutu.ru, Booking или более актуальном сегодня Ostrovok. Попадая на очередной сайт бронирования, человек ожидает, что его путь по достижению цели будет выглядеть примерно так же, как и в других сервисах.

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

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

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

2 главных критерия, которые обязательно должны быть в форме:

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

В своем проекте мы также добавили чек-боксы по точке возврата и возрасту водителя. Для автопроката это важные маркеры, которые повлияют на подборку машин и цены на следующем шаге.

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

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

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

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

Читайте статью о том, как выстроена аналитика в нашем агентстве:

Секрет качественных веб-продуктов: собираем команду аналитиков внутри digital-агентства

В каждом бизнесе логика бронирования, а значит и интерфейс, будут разными. На это влияет множество факторов. Разберем ключевые.

Тип услуги

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

Наличие дополнительных услуг

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

Форма оплаты

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

Сбор персональных данных

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

Этапы бронирования в нашем сервисе учитывают все необходимые для сделки пункты и при этом не занимают лишнее время клиента. Вместе с выбором автомобиля, вводом персональных данных и онлайн-оплатой можно найти машину за 10 минут.

Оформление брони включает:

Шаг 1. Выбор станции и даты аренды;

Шаг 2. Выбор автомобиля;

Шаг 3. Выбор дополнительных услуг;

Шаг 4. Ввод данных арендатора;

Шаг 5. Завершение бронирования (выбор формы оплаты и отправка ваучера).

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

Бронирование в нашем сервисе основано на интеграции с Online Fleet — взаимодействие с системой осуществляется через API.

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

Собранные о бронировании данные отправляем в систему, где формируется заявка, меняется статус машины на выбранные даты и фиксируются данные об оплате. После оформления Online Fleet отправляет клиенту на почту подтверждение и информацию по заказу.

Один из важнейших шагов бронирования — где клиент выбирает предложения из каталога. В нашем случае на этом этапе решается, какой из железных коней будет катать клиента в отпуске или командировке.

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

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

Изучив карточку, клиент должен узнать обо всех ключевых характеристиках и стоимости аренды. Остальные подробности стоит отразить на отдельной странице.

Например, в кейсе RentMotors на карточке мы разместили:

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

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

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

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

Некоторые «допы» доступны в количестве более 1 шт, например, можно взять 2 детских кресла. Для выбора количества аксессуаров мы выводим поле, где клиент может увеличить или уменьшить количество позиций.

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

Чем больше информации на сайте — тем меньше недоразумений ждет бизнес и клиентов во время обслуживания.

Формирование стоимости отражается в деталях заказа — это форма, где мы выводим всю информацию по брони.

Если брать наш кейс, то сюда входят:

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

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

Разобраться со стоимостью снова поможет аналитика — проведите аудит бизнес-процессов, чтобы узнать о всех нюансах оформления заказа. Например, в нашем кейсе специфичным является аэропортовый сервисный сбор. Большинство точек выдачи находятся на территории аэропортов, и за их обслуживание компания несет дополнительные расходы.

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

Самый распространенный случай — когда пользователи отличаются по статусу: физические и юридические лица. Такой кейс актуален и для нашего проекта.

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

Еще один сценарий бронирования разработан специально для партнерки S7 — участники программы S7 Priority получают мили за использование сервиса RentMotors. Для начисления бонусов информация о заказе передается авиакомпании.

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

Можно использовать несколько подходов:

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

Клиенту может потребоваться изменить бронирование или вспомнить информацию о нем. Функцию управления бронированием можно реализовать двумя способами:

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

Значительная часть людей пользуется сервисами онлайн-бронирования через мобильный телефон. В RentMotors это почти половина клиентов, поэтому мы уделили особое внимание проработке адаптивов под смартфоны.

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

В каких случаях это актуально:

Закрепим ключевые рекомендации из статьи: