Привет, это iD EAST. Мы создаём крупные ИТ-проекты для брендов вроде Сбербанка, СОГАЗ, ВТБ, Открытия, MediaMarkt. Сейчас мы работаем уже над восьмой версией приложения для клиентов автомобильного дилера РОЛЬФ.
На примере этого проекта мы покажем, как сделать приложение, где можно купить машину в два клика и записаться на тест-драйв без телефонных звонков.
С чего всё начиналось
РОЛЬФ — дилер, которые продаёт новые автомобили и автомобили с пробегом. В рейтинге крупнейших частных компаний Forbes 2019 РОЛЬФ признан лидером автомобильного ритейла в России.
Ещё в 2017 году клиент пришёл с задачей: сделать приложение с личным кабинетом, каталогом машин, программой лояльности и десятком других функций.
До этого у РОЛЬФа не было нативного приложения. Поэтому нам за 3–4 месяца нужно было с нуля создать проект под две платформы и с внушительным набором функций:
1) авторизацией пользователей;
2) каталогом автомобилей (новых и с пробегом);
3) информацией о страховке;
4) чатом для общения с поддержкой;
5) пуш-уведомлениями;
6) сезонными предложениями;
7) программой лояльности;
8) картой дилерских центров с возможностью построить маршрут прямо в приложении.
Функции внедряли постепенно начиная с самого нужного: интеграции с системами заказчика, каталога автомобилей и информации о страховке.
Помимо приложения, мы также переработали административную панель, которую используют редакторы РОЛЬФа. Но обо всём по порядку.
Под капотом
Мы сделали админку для управления приложением. В ней можно редактировать сезонные предложения, информацию по салонам дилера и контентный раздел «РОЛЬФ Эксперт» со статьями для автовладельцев.
Админка главного экрана и общий принцип дизайна:
Прежде чем проектировать дизайн приложения, мы изучили приложения конкурентов. Например, посмотрели на других дилеров: у большинства из них использовалось коробочное решение Bright Box, но были и исключение — у Major было нативное приложение.
Мы тоже проектировали нативное приложение — «коробка» ограничена и по дизайну (нельзя придумать полностью свой интерфейс), и по функциональности.
Помимо дилеров, мы обратили внимание на приложения автобрендов (KIA, Hyundai, BMW) и ведущих банков вроде Тинькова, Райффайзен-банка. У всех круто сделан интерфейс. Отдельный интерес представляло то, как они спроектировали «главную».
Главный экран
Для нас главный экран стал самым большим вызовом с точки зрения дизайна. Это точка входа пользователя в приложение, и нужно сделать так, чтобы там он мог получить самое нужное: каталог, чат, информацию о страховке.
Затем по аналогичному принципу мы сделали все остальные разделы приложения, везде показывая сначала самое нужное.
Главный экран подстраивается под пользователя: если у пользователя в «Гараже» (о нём ниже) нет машин, то мы предлагаем их добавить. Если их несколько — появляется карусель для прокрутки.
Так же и с картой лояльности: нет карты — предлагаем оформить. Если оформлена, сообщаем о привилегиях и скидках.
Онбординг
Когда пользователь впервые заходит в приложении, его приветствует интерактивный гид. В нём рассказываем об основных возможностях приложения: от онлайн-оплаты до персональных предложений.
Так как мы сделали упор на понятный дизайн и лаконичность, онбординг тоже выглядит просто и понятно, чтобы не отвлекать пользователя ненужными инструкциями.
Тест-драйв и сервис
Раньше для того, чтобы записаться на тест-драйв, пользователю приходилось заполнять множество полей с данными. Вот как выглядит запись на тест-драйв сейчас:
То же с записью на сервис. Чтобы упростить процесс, ввели автозаполнение полей. Пользователь может использовать информацию, которую до этого вводил в профиле, например, данные об авто, информацию об избранных мастерах.
В приложении можно выбрать день, время, а также мастера, к которому вы хотите записаться.
Гараж
Здесь собрана вся информация об автомобилях клиента: номера, пробег, полисы, история обслуживания. Поэтому больше не придётся запоминать сложные цифры для оформления КАСКО.
У каждого автомобиля в «Гараже» есть собственный раздел. Можно записаться на сервис, отслеживать статус ремонта автомобиля, оставить заявку на тест-драйв.
Каталоги транспорта
В приложении РОЛЬФ есть внушительный каталог автомобилей и мотоциклов, а фильтров для работы с каталогом — ещё больше. Отталкиваясь от принципа «главной», мы сразу решили спроектировать раздел так, чтобы все фильтры, даже если их много, отображались на одном экране.
Мы предложили клиенту несколько вариантов дизайна на выбор. Ниже — одна из концепций каталога и карточки автомобиля. Иконки, понятное дело, мы бы заменили.
В итоге вместе с клиентом решили выбрать выпадающие списки, так как они хорошо сочетаются с общей концепцией дизайна. К тому же, они аккуратные. Так каталог выглядит сейчас:
Поиск по каталогу сделан максимально подробно: к примеру, можно сделать запрос «Mercedes E класса с автоматической коробкой передач, седан, на дизеле, до 2,5 млн ₽, мощность 150 л.c. в дилерском центре на Варшавке» — и у вас будет 14 предложений.
Вдобавок у каждого транспортного средства — своя карточка. Всё вместе превращается в «Ламоду» для мира автомобилей — просто и понятно.
Покупка в несколько кликов
Начало года. Мы все сидим дома и ждём окончания самоизоляции. В квартире тесно, у соседей нескончаемый ремонт — кажется, что звук перфоратора уже начинает сниться. Хочется выехать на дачу, а каршеринг не работает.
Похоже, пора покупать машину, тем более, права есть. Да только до дилера не добраться: все офисы закрыты. И тут РОЛЬФ предлагает купить машину онлайн. Заказал продукты, заказал вещи, заказал машину — и уехал дышать свежим воздухом.
Пользователь вносит предоплату, а дилер доставляет ему машину. Также вы можете оплатить сервис и внести предоплату за будущие услуги: осмотр или ремонт.
Чат
Мы использовали решение LiveTex, которое интегрировано с популярными мессенджерами: Телеграмом, Вайбером, Вотсапом, мессенджерами Фейсбука и ВКонтакте. Сейчас клиент перешёл на «Открытые линии» Битрикса24 — это его внутреннее решение.
Стоит сказать, что дизайн чата у нас полностью нативный. Битрикс24 даёт интерфейс скорее для внутренних систем заказчика. Чат поддержки в РОЛЬФе:
Как выросло количество пользователей
Сейчас в базе дилера — 100 тысяч пользователей. На старте количество пользователей в месяц (MAU) было в районе 5–10 тысяч, а сейчас — 41 тысяча пользователей. Нас такая динамика только радует.
Что дальше
В следующих версиях мы выпустим промежуточный API для мобильных приложений, чтобы клиенту было проще работать с данными клиента.
Ещё планируем добавить предоплату автозапчастей. Скоро вы сможете заказать воздушный фильтр, зеркала или фары для конкретной машины и забрать их в удобное время.
Что касается дизайна, мы готовим обновление по UX/UI раздела каталога. Там будут доработаны фильтры, корневой раздел и карточки автомобиля.