Кейс: обновили систему онлайн-бронирования для автопроката с 50 станциями в 28 городах и 5 странах

Рассказываем о разработке онлайн-сервиса для автопроката RentMotors. Главные интерфейсные решения и секреты внедрения простой и быстрой логики бронирования.rent

Заказчик

RentMotors — сервис аренды машин, работающий на рынке уже 17 лет. За это время компания создала широкую сетку с 50 арендными пунктами в 5 странах и 28 городах.

Компания является надежным и дружелюбным автопрокатом с высоким качеством обслуживания — оценка сервиса в рейтинге организаций Яндекса составляет 4,9 балла. Ежемесячно заказчик заключает более 7500 договоров аренды. Для этого масштабного клиентского потока нам предстояло создать систему онлайн-бронирования.

Задача

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

Главная страница старого сайта

Старый сайт компании требовал обновления и имел ряд недостатков:

1. морально устаревший дизайн;
2. отсутствие УТП и преимуществ сервиса;
3. ошибки в UX.

Команда RentMotors обратилась в Атвинту, чтобы разработать новый сервис бронирования.

Нам предстояло:

1. провести аналитику;
2. реализовать интуитивно понятную логику бронирования;
3. создать лаконичную дизайн-концепцию;
4. спроектировать интерфейс, основанный на стандартных паттернах поведения;
5. сделать удобный каталог и карточки автомобилей;
6. обеспечить максимальный трафик за счет SEO;
7. сделать акцент на преимуществах сервиса, актуальных акциях и предложениях;
8. реализовать англоязычную версию сайта для иностранных клиентов;
9. адаптировать интерфейс под формат мобильного телефона.

Решение

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

Основные функции веб-продукта:

1. бронирование автомобиля;
2. онлайн-оплата заказа;
3. управление бронированием.

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

Новый сайт, разработанный нашей командой

Аналитика

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

Анализ ЦА

Аналитики выяснили, что ядром целевой аудитории сервиса являются туристы, в том числе путешествующие с бизнес-целями.

Цитата из аналитического отчета

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

Поисковые запросы

Большинство запросов — брендовые, содержат варианты написания имени сайта («рентомоторс», «rent motors», «rentmotors»). Основные локации, упомянутые в запросах: Москва, Сочи, Санкт-Петербург, Краснодар, Симферополь, Калининград, Ереван, Ростов-на-Дону. В большинстве своем запросы по локациям совпадают с точками представленности компании.

Рекомендации аналитиков

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

1. простая и понятная форма бронирования автомобиля;
2. возможность просмотра и редактирования бронирования;
3. возможность оплаты аренды авто;
4. поиск ближайшей станции аренды;
5. информация об условиях аренды и необходимых документах;
6. возможность получения договора аренды и подтверждающих документов;
7. информация о возможностях для бизнеса: франчайзинг, лизинг;
8. каталог авто с фильтрами.

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

User Story

В рамках аналитики также провели исследование пути пользователя по сервису.

Виктория Жильцова

Аналитик Digital агентства Атвинта 

«В качестве артефакта исследования применили User Story — краткое описание пользовательских сценариев, которые состоят из цели пользователя и того, что продукт должен сделать для ее удовлетворения». 

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

Работа с User Story

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

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

1. аренда автомобиля + название города;
2. аренда автомобиля + название аэропорта;
3. аренда автомобиля + марка авто.

На старом сайте отсутствовали посадочные страницы по всем запросам.

Виктория Жильцова

 Аналитик Digital-агентства Атвинта

«Чтобы сайт мог участвовать в выдаче по востребованным запросам, а также чтобы упростить путь пользователя в поиске автомобиля, было предложено реализовать страницы под города, станции (аэропорты) и страницы автомобилей».

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

Прототипы

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

Прототипы нового сайта RentMotors

Дизайн

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

Визуал онлайн-сервиса

Иконки

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

Иконки в интерфейсе

Форма бронирования

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

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

Первый блок главной страницы

Павел Привалов

Project manager Digital-агентства Атвинта

«Это классическое решение для популярных онлайн-сервисов бронирования, например, Aviasales, Booking, Tutu.ru, Travelata и других. У пользователей уже сформирован паттерн поведения в таких интерфейсах, поэтому мы решили не изобретать велосипед и применить лучшие практики в нашем проекте». 

Благодаря такому решению клиенты быстро адаптируются к знакомой схеме и сразу приступают к брони.

В форму мы добавили ключевые критерии для заказа:

1. место получения автомобиля;
2. даты аренды с удобным календарем;
3. место возврата;
4. возраст водителя.

Эти критерии помогают на первом шаге отфильтровать автомобили, открытые к бронированию. Подборку с каталогом свободных машин система выводит на следующем шаге.

Каталог и карточки автомобилей

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

Каталог онлайн-сервиса

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

Оформление карточек

Изучив карточку, клиент узнает обо всех ключевых характеристиках автомобиля и условиях его аренды.

Всего на карточке размещено 9 характеристик, помогающих сделать выбор:

1. название марки и модели;
2. дисклеймер о возможной замене;
3. фотография;
4. класс автомобиля;
5. коробка передач;
6. вместительность;
7. стоимость аренды;
8. сумма депозита;
9. кнопка выбора.

Выбор услуг

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

Выбор дополнительных услуг

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

Детали заказа

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

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

Варианты деталей заказа

UI Kit

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

Фрагменты UI Kit

Адаптивы для мобильной версии

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

Мобильная версия онлайн-сервиса

Логика бронирования

Мы реализовали простой путь бронирования в 5 шагов:

1. Выбор станции и даты
2. Выбор автомобиля
3. Выбор дополнительных услуг
4. Ввод данных клиента
5. Завершение бронирования

Шаги бронирования

Оплатить услугу клиент может онлайн в нашем сервисе или же выбрать оплату на станции. Выбор формы оплаты происходит на последнем шаге.

На новом сайте RentMotors клиент может забронировать машину за 10 минут.

мКристина Ильина

QA, Digital-агентства Атвинта

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

Бронирование для разных видов пользователей

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

Формы заполнения данных

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

Поле для ввода номера участника программы

Интеграция с системой управления прокатом

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

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

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

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

Кристина Ильина

QA, Digital-агентства Атвинта

«На этапе тестирования использовали Postman. С помощью платформы мы провели проверку взаимодействия Online Fleet с бэком нашего сервиса».

Управление бронированием

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

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

Раздел управления бронированием

SEO

Чтобы повысить эффективность сайта в контексте SEO, по рекомендации аналитиков добавили страницы под востребованные клиентами автопрокатов поисковые запросы.

На сайте созданы страницы:

1. городов аренды;
2. станций выдачи;
3. автомобилей.

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

Страница автомобиля

Англоязычная версия

Клиентами Rent Motors являются как русскоговорящие, так и иностранные пользователи, для которых мы разработали англоязычную версию сайта. Теперь сервис открыт для пользователей со всего мира.

Англоязычная версия сайта

Итоги

В рамках проекта закрыли все поставленные на старте задачи:

1. разработали логику бронирования для разных видов пользователей;
2. реализовали понятный и удобный интерфейс;
3. сделали десятки SEO-страниц для получения трафика из поисковиков;
4. обеспечили интеграцию с Onine Fleet;
5. сделали англоязычную версию сайта для клиентов из других стран.

На момент публикации кейса сервис бронирования запущен и принимает первые брони клиентов RentMotors. Мы продолжили сотрудничество с клиентом по SEO, а также добавляем в проект новые доработки.

Классная статья! Где мне ещё найти Атвинту?
Здесь:
• наш сайт
• наш ВК
• наша почта: info@atwinta.ru