редакции
Оформить железного коня за 10 минут: наша система онлайн-бронирования для автопроката с 50 станциями в 5 странах
Заказчик
RentMotors — сервис аренды машин, работающий на рынке уже 17 лет. За это время компания создала широкую сетку с 50 арендными пунктами в 5 странах и 28 городах.
Компания является надежным и дружелюбным автопрокатом с высоким качеством обслуживания — оценка сервиса в рейтинге организаций Яндекса составляет 4,9 балла. Ежемесячно заказчик заключает более 7500 договоров аренды. Для этого масштабного клиентского потока нам предстояло создать систему онлайн-бронирования.
Задача
Бронирование автомобилей компания проводит как через партнерские, так и через собственные каналы. При этом больше половины броней проходит именно на сайте проката, поэтому важно, чтобы пользователям было легко выбрать автомобиль, а заполнение заявки не занимало много времени.
Старый сайт компании требовал обновления и имел ряд недостатков: Команда RentMotors обратилась в Атвинту, чтобы разработать новый сервис бронирования. Нам предстояло: Разработан удобный онлайн-сервис бронирования автомобилей для компании RentMotors. Внутри реализована масштабная интеграция с системой управления автопарком Online Fleet, которую заказчик использует в своих бизнес-процессах. Основные функции веб-сервиса: Для комфорта клиентов мы учли привычные паттерны поведения в подобных сервисах и заложили их в основу интерфейса. Наша логика бронирования предлагает простой и быстрый путь заказа автомобиля — пользователю не нужно тратить время на регистрацию и подробное заполнение данных. Всего 5 простых шагов за 10 минут, и вопрос с транспортом в поездке решен. В рамках этапа аналитики провели исследования, которые помогли изучить клиентов сервиса, описать необходимый функционал и структуру сайта с бронированием. Аналитики выяснили, что ядром целевой аудитории сервиса являются туристы, в том числе путешествующие с бизнес-целями. "Основную ценность для пользователей будут иметь расположение офиса и возможность аренды автомобиля в аэропорту, доступ к поездкам по стране и между странами, наличие страховки и гарантийного сервиса, документы, подтверждающие факт аренды для отчетов о командировке, а также вместительность и класс авто, особенно для семей и компаний".Цитата из аналитического отчета Большинство запросов — брендовые, содержат варианты написания имени сайта («рентомоторс», «rent motors», «rentmotors»). Основные локации, упомянутые в запросах: Москва, Сочи, Санкт-Петербург, Краснодар, Симферополь, Калининград, Ереван, Ростов-на-Дону. В большинстве своем запросы по локациям совпадают с точками представленности компании. На основе пользовательского опыта и анализа референсов мы выяснили, что на сайте должны быть: Кроме рекомендаций по функциональности, на этапе аналитики была сформирована предварительная структура сайта. В рамках аналитики также провели исследование пути пользователя по сервису. За основу были взяты типичные сценарии аренды, которые говорят о том, что чаще всего люди бронируют авто в аэропорту чужого города, а также отдают предпочтение уже знакомым маркам автомобилей. Оценили поисковый спрос на продукт с точки зрения SEO: как пользователи ищут бронирование автомобилей, в каких городах и по каким параметрам. В результате анализа поискового спроса выяснили, что основными запросами в сфере бронирования автомобилей являются: На старом сайте отсутствовали посадочные страницы по всем запросам. Помимо постраничной структуры сайта, оценили контентную составляющую, которая необходима для принятия решения пользователем о бронировании. Кроме того, контент важен и для SEO-продвижения с точки зрения коммерческих преимуществ сайта. Учитывая рекомендации аналитиков, разработали прототипы будущего сайта. Предлагаемый интерфейс содержит удобный и понятный путь бронирования, блоки с преимуществами сервиса, а также полезную информацию для клиентов. Главным в проекте было обеспечить понятный путь бронирования, поэтому мы решили не нагружать интерфейс элементами, которые могли бы сместить внимание пользователя с целевых действий на визуал. Минималистичный дизайн с использованием цветов бренда — оптимальное решение для данного сервиса. Для проекта отрисовали уникальные иконки в стиле бренда, которые дополнили раздел дополнительных услуг и главную страницу. Они создают визуальную ассоциацию с предлагаемой опцией или преимуществом. Например, для страховки мы нарисовали зонтик, а для доставки автомобиля по адресу — машину со значком геолокации. Особое внимание уделили процессу бронирования — главной функции, ради которой пользователи приходят на сайт. Мы хотели оформить страницы так, чтобы на каждом из этапов клиенту было легко сделать выбор и заполнить данные. В первом блоке главной страницы сразу разместили форму бронирования, которая является первым шагом на пути оформления заявки. Благодаря такому решению клиенты быстро адаптируются к знакомой схеме и сразу приступают к брони. В форму мы добавили ключевые критерии для заказа: Эти критерии помогают на первом шаге отфильтровать автомобили, открытые к бронированию. Подборку с каталогом свободных машин система выводит на следующем шаге. Один из важнейших шагов бронирования, на котором клиент выбирает железного коня. Для удобства поиска добавили несколько основных фильтров, а также возможность выводить доступные модели списком или плиткой. Сложность оформления карточек заключается в размере — на небольшой области нужно грамотно разместить достаточно много разной информации об автомобиле. Чтобы пользователь легко различал разные данные, мы использовали комбинацию из иконок, кнопок, крупного и мелкого текста, изображений. Изучив карточку, клиент узнает обо всех ключевых характеристиках автомобиля и условиях его аренды. Всего на карточке размещено 9 характеристик, помогающих сделать выбор: Для комфортной поездки RentMotors предлагает клиентам выбрать дополнительные опции, перечень которых мы выводим на одном из этапов бронирования. Здесь мы сделали интерфейс максимально отзывчивым. При наведении на услугу, ее блок выделяются тенью. При нажатии тумблер перемещается и окрашивается в яркий активный цвет, который сигнализирует, что услуга добавлена. При необходимости можно ознакомиться с услугой подробнее и перейти на ее страницу. Одна из главных задач при разработке интерфейса бронирования — обеспечить прозрачное ценообразование. Заказ, который не отображает всех доплат и корректной конечной стоимости, приведет к конфликтам с менеджерами. А это — плохие отзывы и крах копившейся годами репутации. В деталях заказа мы отразили все суммы и предупреждения о возможных доплатах, например, при превышении базового километража. Финальную стоимость выделили ярким цветом и отдельным блоком — чтобы клиент точно обратил на нее внимание. Правило хорошего тона и залог успешной верстки — структурированная дизайн-система, где царит полный порядок. На этапе аналитики мы выяснили, что почти половина клиентов пользуются сервисом с мобильного телефона, поэтому проработка макетов под этот формат стала важным этапом работ по дизайну и верстке. Мы реализовали простой путь бронирования в 5 шагов: Оплатить услугу клиент может онлайн в нашем сервисе или же выбрать оплату на станции. Выбор формы оплаты происходит на последнем шаге. На новом сайте RentMotors клиент может забронировать машину за 10 минут. Реализована логика бронирования как для физических, так и для юридических лиц — мы предусмотрели разные формы сбора данных, а также 2 вида ваучеров. Оплата брони юридического лица осуществляется по счету на оплату, который клиент получает на почту. Еще один сценарий бронирования разработан специально для партнерки S7 — участники программы S7 Priority получают мили за использование сервиса. Для начисления бонусов информация о заказе передается авиакомпании. RentMotors управляет автопарком через сервис Online Fleet. Это многофункциональная платформа, разработанная под бизнес-процессы проката. Внутри хранится база автомобилей, отслеживается статус броней, фиксируются сделки с клиентами и ведется финансовая отчетность. Бронирование в нашем сервисе основано на интеграции с Online Fleet — взаимодействие с системой осуществляется через API. На первом шаге, когда пользователь выбирает дату и место получения автомобиля, мы делаем запрос в Online Fleet, после чего сайт выводит отфильтрованную базу моделей, которые свободны к бронированию и отвечают требованиям клиента. Собранные о бронировании данные отправляем в систему, где формируется заявка, меняется статус машины на выбранные даты и фиксируются данные об оплате. После оформления бронирования Online Fleet отправляет клиенту на почту подтверждение и информацию по заказу. Для управления бронированием создали отдельный раздел, где клиент может изменить или проверить свою заявку. Если будут внесены изменения, то сервис отправит эти данные в Online Fleet и обновит информацию о брони. Для постоянных пользователей сервиса мы разрабатываем функцию автозаполнения данных — это позволит быстро оформлять новые заявки в сервисе. Чтобы повысить эффективность сайта в контексте SEO, по рекомендации аналитиков добавили страницы под востребованные клиентами автопрокатов поисковые запросы. На сайте созданы страницы: Такой подход позволяет максимизировать трафик из поисковиков за счет правильно проработанных страниц, которые охватывают наиболее актуальные запросы пользователей. Клиентами Rent Motors являются как русскоговорящие, так и иностранные пользователи, для которых мы разработали англоязычную версию сайта. Теперь сервис открыт для пользователей со всего мира. В рамках проекта закрыли все поставленные на старте задачи: На момент публикации кейса сервис бронирования запущен и принимает первые брони клиентов RentMotors. Мы продолжили сотрудничество с клиентом по SEO, а также добавляем в проект новые доработки. Классная статья! Где мне ещё найти Атвинту? Здесь: • наш сайт• наш ВК• наша почта: info@atwinta.ru
Решение
Аналитика
Поисковые запросы
Рекомендации аналитиков
User Story
«В качестве артефакта исследования применили User Story — краткое описание пользовательских сценариев, которые состоят из цели пользователя и того, что продукт должен сделать для ее удовлетворения».
«Чтобы сайт мог участвовать в выдаче по востребованным запросам, а также чтобы упростить путь пользователя в поиске автомобиля, было предложено реализовать страницы под города, станции (аэропорты) и страницы автомобилей»
Прототипы
Дизайн
Иконки
Форма бронирования
«Это классическое решение для популярных онлайн-сервисов бронирования, например, Aviasales, Booking, Tutu.ru, Travelata и других. У пользователей уже сформирован паттерн поведения в таких интерфейсах, поэтому мы решили не изобретать велосипед и применить лучшие практики в нашем проекте».
Каталог и карточки автомобилей
Выбор услуг
Детали заказа
UI Kit
Адаптивы для мобильной версии
Логика бронирования
«Предложенный путь бронирования интуитивно понятен пользователю, и огромную роль здесь играет форма на главной. Клиент понимает, что если он заполнит ее, то на следующем шаге откроется выбор автомобиля».
Бронирование для разных видов пользователей
Интеграция с системой управления прокатом
«На этапе тестирования использовали Postman. С помощью платформы мы провели проверку взаимодействия Online Fleet с бэком нашего сервиса».
Управление бронированием
SEO
Англоязычная версия
Итоги
