- Заказчик
- RentMotors — сервис аренды машин, работающий на рынке уже 17 лет. За это время компания создала широкую сетку с 50 арендными пунктами в 5 странах и 28 городах.
- Задача
- Разработать сайт, дизайн-концепцию, спроектировать интерфейс, адаптировать сайт доя мобильных устройств, проработать англоязычную версию сайта
Задача
Бронирование автомобилей компания проводит как через партнерские, так и через собственные каналы. При этом больше половины броней проходит именно на сайте проката, поэтому важно, чтобы пользователям было легко выбрать автомобиль, а заполнение заявки не занимало много времени.
Старый сайт компании требовал обновления и имел ряд недостатков:
- морально устаревший дизайн;
- отсутствие УТП и преимуществ сервиса;
- ошибки в UX.
Команда RentMotors обратилась в Атвинту, чтобы разработать новый сервис бронирования.
Нам предстояло:
- провести аналитику;
- реализовать интуитивно понятную логику бронирования;
- создать лаконичную дизайн-концепцию;
- спроектировать интерфейс, основанный на стандартных паттернах поведения;
- сделать удобный каталог и карточки автомобилей;
- обеспечить максимальный трафик за счет SEO;
- сделать акцент на преимуществах сервиса, актуальных акциях и предложениях;
- реализовать англоязычную версию сайта для иностранных клиентов;
- адаптировать интерфейс под формат мобильного телефона.
1. Аналитика
В рамках этапа аналитики провели исследования, которые помогли изучить клиентов сервиса, описать необходимый функционал и структуру сайта с бронированием.
Анализ целевой аудитории
Аналитики выяснили, что ядром целевой аудитории сервиса являются туристы, в том числе путешествующие с бизнес-целями.
«Основную ценность для пользователей будут иметь расположение офиса и возможность аренды автомобиля в аэропорту, доступ к поездкам по стране и между странами, наличие страховки и гарантийного сервиса, документы, подтверждающие факт аренды для отчетов о командировке, а также вместительность и класс авто, особенно для семей и компаний».
Поисковые запросы
Большинство запросов — брендовые, содержат варианты написания имени сайта («рентомоторс», «rent motors», «rentmotors»). Основные локации, упомянутые в запросах: Москва, Сочи, Санкт-Петербург, Краснодар, Симферополь, Калининград, Ереван, Ростов-на-Дону. В большинстве своем запросы по локациям совпадают с точками представленности компании.
Рекомендации аналитиков
На основе пользовательского опыта и анализа референсов мы выяснили, что на сайте должны быть:
- простая и понятная форма бронирования автомобиля;
- возможность просмотра и редактирования бронирования;
- возможность оплаты аренды авто;
- поиск ближайшей станции аренды;
- информация об условиях аренды и необходимых документах;
- возможность получения договора аренды и подтверждающих документов;
- информация о возможностях для бизнеса: франчайзинг, лизинг;
- каталог авто с фильтрами.
Кроме рекомендаций по функциональности, на этапе аналитики была сформирована предварительная структура сайта.
User Story
В рамках аналитики также провели исследование пути пользователя по сервису.
«В качестве артефакта исследования применили User Story — краткое описание пользовательских сценариев, которые состоят из цели пользователя и того, что продукт должен сделать для ее удовлетворения». Виктория Жильцова, аналитик
За основу были взяты типичные сценарии аренды, которые говорят о том, что чаще всего люди бронируют авто в аэропорту чужого города, а также отдают предпочтение уже знакомым маркам автомобилей.
Работа с User Story
Оценили поисковый спрос на продукт с точки зрения SEO: как пользователи ищут бронирование автомобилей, в каких городах и по каким параметрам.
В результате анализа поискового спроса выяснили, что основными запросами в сфере бронирования автомобилей являются:
- аренда автомобиля + название города;
- аренда автомобиля + название аэропорта;
- аренда автомобиля + марка авто.
На старом сайте отсутствовали посадочные страницы по всем запросам.
«Чтобы сайт мог участвовать в выдаче по востребованным запросам, а также чтобы упростить путь пользователя в поиске автомобиля, было предложено реализовать страницы под города, станции (аэропорты) и страницы автомобилей» Виктория Жильцова, аналитик
Помимо постраничной структуры сайта, оценили контентную составляющую, которая необходима для принятия решения пользователем о бронировании. Кроме того, контент важен и для SEO-продвижения с точки зрения коммерческих преимуществ сайта.
2. Прототипы
Учитывая рекомендации аналитиков, разработали прототипы будущего сайта. Предлагаемый интерфейс содержит удобный и понятный путь бронирования, блоки с преимуществами сервиса, а также полезную информацию для клиентов.
Прототипы нового сайта RentMotors
3. Дизайн
Главным в проекте было обеспечить понятный путь бронирования, поэтому мы решили не нагружать интерфейс элементами, которые могли бы сместить внимание пользователя с целевых действий на визуал. Минималистичный дизайн с использованием цветов бренда — оптимальное решение для данного сервиса.
Визуал сервиса
4. Иконки
Для проекта отрисовали уникальные иконки в стиле бренда, которые дополнили раздел дополнительных услуг и главную страницу. Они создают визуальную ассоциацию с предлагаемой опцией или преимуществом. Например, для страховки мы нарисовали зонтик, а для доставки автомобиля по адресу — машину со значком геолокации.
5. Форма бронирования
Особое внимание уделили процессу бронирования — главной функции, ради которой пользователи приходят на сайт. Мы хотели оформить страницы так, чтобы на каждом из этапов клиенту было легко сделать выбор и заполнить данные.
В первом блоке главной страницы сразу разместили форму бронирования, которая является первым шагом на пути оформления заявки.
«Это классическое решение для популярных онлайн-сервисов бронирования, например, Aviasales, Booking, Tutu.ru, Travelata и других. У пользователей уже сформирован паттерн поведения в таких интерфейсах, поэтому мы решили не изобретать велосипед и применить лучшие практики в нашем проекте».
Павел Привалов, project manager
Благодаря такому решению клиенты быстро адаптируются к знакомой схеме и сразу приступают к брони.
В форму мы добавили ключевые критерии для заказа:
- место получения автомобиля;
- даты аренды с удобным календарем;
- место возврата;
- возраст водителя.
Эти критерии помогают на первом шаге отфильтровать автомобили, открытые к бронированию. Подборку с каталогом свободных машин система выводит на следующем шаге.
6. Каталог и карточки автомобилей.
Один из важнейших шагов бронирования, на котором клиент выбирает железного коня. Для удобства поиска добавили несколько основных фильтров, а также возможность выводить доступные модели списком или плиткой.
Сложность оформления карточек заключается в размере — на небольшой области нужно грамотно разместить достаточно много разной информации об автомобиле. Чтобы пользователь легко различал разные данные, мы использовали комбинацию из иконок, кнопок, крупного и мелкого текста, изображений.
Изучив карточку, клиент узнает обо всех ключевых характеристиках автомобиля и условиях его аренды.
Всего на карточке размещено 9 характеристик, помогающих сделать выбор:
- название марки и модели;
- дисклеймер о возможной замене;
- фотография;
- класс автомобиля;
- коробка передач;
- вместительность;
- стоимость аренды;
- сумма депозита;
- кнопка выбора.
7. Выбор услуг
Для комфортной поездки RentMotors предлагает клиентам выбрать дополнительные опции, перечень которых мы выводим на одном из этапов бронирования.
Здесь мы сделали интерфейс максимально отзывчивым. При наведении на услугу, ее блок выделяются тенью. При нажатии тумблер перемещается и окрашивается в яркий активный цвет, который сигнализирует, что услуга добавлена. При необходимости можно ознакомиться с услугой подробнее и перейти на ее страницу.
8. Детали заказа
Одна из главных задач при разработке интерфейса бронирования — обеспечить прозрачное ценообразование. Заказ, который не отображает всех доплат и корректной конечной стоимости, приведет к конфликтам с менеджерами. А это — плохие отзывы и крах копившейся годами репутации.
В деталях заказа мы отразили все суммы и предупреждения о возможных доплатах, например, при превышении базового километража. Финальную стоимость выделили ярким цветом и отдельным блоком — чтобы клиент точно обратил на нее внимание.
9. UI KIT
Правило хорошего тона и залог успешной верстки — структурированная дизайн-система, где царит полный порядок.
Фрагменты UI Kit
10. Адаптивы для мобильной версии.
На этапе аналитики мы выяснили, что почти половина клиентов пользуются сервисом с мобильного телефона, поэтому проработка макетов под этот формат стала важным этапом работ по дизайну и верстке.
Мобильная версия сервиса
11. Логика бронирования
Мы реализовали простой путь бронирования в 5 шагов:
- Выбор станции и даты
- Выбор автомобиля
- Выбор дополнительных услуг
- Ввод данных клиента
- Завершение бронирования
Оплатить услугу клиент может онлайн в нашем сервисе или же выбрать оплату на станции. Выбор формы оплаты происходит на последнем шаге.
На новом сайте RentMotors клиент может забронировать машину за 10 минут.
«Предложенный путь бронирования интуитивно понятен пользователю, и огромную роль здесь играет форма на главной. Клиент понимает, что если он заполнит ее, то на следующем шаге откроется выбор автомобиля». Кристина Ильина, QA
12. Бронирование для разных видов пользователей
Реализована логика бронирования как для физических, так и для юридических лиц — мы предусмотрели разные формы сбора данных, а также 2 вида ваучеров. Оплата брони юридического лица осуществляется по счету на оплату, который клиент получает на почту.
Еще один сценарий бронирования разработан специально для партнерки S7 — участники программы S7 Priority получают мили за использование сервиса. Для начисления бонусов информация о заказе передается авиакомпании.
Поле для ввода номера участника программы
13. Интеграция системой управления и прокатом
RentMotors управляет автопарком через сервис Online Fleet. Это многофункциональная платформа, разработанная под бизнес-процессы проката. Внутри хранится база автомобилей, отслеживается статус броней, фиксируются сделки с клиентами и ведется финансовая отчетность.
Бронирование в нашем сервисе основано на интеграции с Online Fleet — взаимодействие с системой осуществляется через API.
На первом шаге, когда пользователь выбирает дату и место получения автомобиля, мы делаем запрос в Online Fleet, после чего сайт выводит отфильтрованную базу моделей, которые свободны к бронированию и отвечают требованиям клиента.
Собранные о бронировании данные отправляем в систему, где формируется заявка, меняется статус машины на выбранные даты и фиксируются данные об оплате. После оформления бронирования Online Fleet отправляет клиенту на почту подтверждение и информацию по заказу.
«На этапе тестирования использовали Postman. С помощью платформы мы провели проверку взаимодействия Online Fleet с бэком нашего сервиса». Кристина Ильина, QA
14. Управление бронированием
Для управления бронированием создали отдельный раздел, где клиент может изменить или проверить свою заявку. Если будут внесены изменения, то сервис отправит эти данные в Online Fleet и обновит информацию о брони.
Для постоянных пользователей сервиса мы разрабатываем функцию автозаполнения данных — это позволит быстро оформлять новые заявки в сервисе.
Раздел управления бронированием
15. SEO
Чтобы повысить эффективность сайта в контексте SEO, по рекомендации аналитиков добавили страницы под востребованные клиентами автопрокатов поисковые запросы.
На сайте созданы страницы:
- городов аренды;
- станций выдачи;
- автомобилей.
Такой подход позволяет максимизировать трафик из поисковиков за счет правильно проработанных страниц, которые охватывают наиболее актуальные запросы пользователей.
16. Англоязычная версия сайта
Клиентами Rent Motors являются как русскоговорящие, так и иностранные пользователи, для которых мы разработали англоязычную версию сайта. Теперь сервис открыт для пользователей со всего мира.
ИТОГИ
В рамках проекта закрыли все поставленные на старте задачи:
- разработали логику бронирования для разных видов пользователей;
- реализовали понятный и удобный интерфейс;
- сделали десятки SEO-страниц для получения трафика из поисковиков;
- обеспечили интеграцию с Onine Fleet;
- сделали англоязычную версию сайта для клиентов из других стран.
На момент публикации кейса сервис бронирования запущен и принимает первые брони клиентов RentMotors. Мы продолжили сотрудничество с клиентом по SEO, а также добавляем в проект новые доработки.