Мобильное приложение заявки на сервис автодилера «КЛЮЧАВТО»

Мобильное приложение даёт огромные преимущества во взаимодействии с владельцами смартфонов, но взамен требует внимания. С первой версии собственного приложения КЛЮЧАВТО, крупнейший в России автодилер, успел вырасти и предъявил новые требования к функциям и дизайну

Задача

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

Решение

В дизайне выбрана тёмная тема оформления с 3D-графикой и сложными фоновыми узорами. В дополнение к новому стилю мы предложили акцентный сиреневый цвет, который понравился заказчику. Для оптимизации интерфейса и сокращения путей пользователя Spider Group внедрила концепцию дашбордов во всех ключевых экранах

Главное на Дашборде

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

Cамое востребованное:

Карточки автомобилей
Активные заявки на сервис, покупку или продажу авто
Кнопки записи на сервис и оформление полиса
Подборки автомобилей из каталога в виде набора фильтров — семейные, люкс, внедорожники
Актуальные сториз и лучшие предложения от КЛЮЧАВТО
Консьерж-сервис

Набор функций на дашборде можно оперативно менять в зависимости от бизнес-задач

Cториз

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

Для программистов такой дизайн означает сложную вёрстку с учётом разного разрешения экранов.

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

Текст должен попадать в заданную область и оставаться без прокрутки на любом экране.

Лучшие предложения

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

Мой гараж

Этот раздел из таббара переехал на главный экран.

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

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

В пустой гараж можно добавить автомобиль

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

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

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

Дашборд для авто

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

Всё на одном экране:

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

Оформление заявок на ключевые услуги:

Запись на сервис или переход к текущей заявке
Оформление страхового полиса
Продажа авто
Оценка авто

Этот набор зависит от конкретного автомобиля

Услуги

Новый раздел, который — тоже на одном экране — собрал заказ всех популярных услуг.

Предполагается дальнейшее расширение под актуальные бизнес-задачи

Связь с дилером

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

Сервис

Здесь клиент видит активные и завершённые заявки на сервисное обслуживание и может создать новую заявку. По каждому автомобилю можно определить стоимость владения — общие затраты на ремонт и обслуживание

Работа с заявкой на всех стадиях:

Запись
Выбор и подтверждение списка работ и деталей
Отслеживание процесса
Подтверждение дополнительных работ
Оплата
Просмотр завершённой заявки

Каталог

Доработанные фильтры в каталоге автомобилей делают выбор гораздо удобнее. Здесь, как в других обновлениях, подход Data Driven — всё сделано по данным использования предыдущей версии ПО

Экран автомобиля

Сюда мы вывели краткие характеристики с переходом на детализацию, карточку салона и подборку подобных авто из каталога

Можно заказать тест-драйв, рассчитать кредит, купить в трейд-ин и забронировать машину с предоплатой

Интеграции

Сторонние сервисы могут серьёзно облегчить использование приложения. В данном случае Spider Group обеспечила клиентам КЛЮЧАВТО дистанционное оформление полиса e-ОСАГО из каталога, а также автоматическое заполнение полей информации об автомобиле по VIN из Автотеки

Для маркетинга

Заявки из форм обратной связи идут в BI-систему КЛЮЧАВТО
Переработаны конверсионные цепочки для AppMetrica
Push-уведомления идут через AppMetrica, а не Firebase
Доступен прямой шеринг страницы авто через диплинк

Статистика разработки

Менеджмент — 244 часа
UX/UI-дизайн — 488 часов
Android-разработка — 808 часов
iOS-разработка — 752 часа
Бэкенд-разработка — 3 часа
Тестирование — 152 часа

Команда разработки

Менеджер проекта — 1
UX/UI-дизайнеры — 3
iOS-разработчики — 2
Android-разработчики — 2
Бэкенд-разработчик — 1
Тестировщик — 1

Технологии

Бэкенд:

Фреймворк веб-приложений — Django
Язык программирования — Python

Android:

Архитектура — MVI
Язык программирования — Kotlin
Реактивное программирование — RxJava 2
Зависимости — Kodein
Медиаменеджмент — Glide
Навигация — Cicerone
Сборка — Gradle

iOS:

Язык программирования — Swift
Архитектура — UIKit
Сеть — Alamofire
Макетирование — SnapKit

Spider Group специализируется на разработке мобильных приложений, сайтов, CRM-систем и серверной логики, внедрении AI, а также создании дополненной реальности и интернета вещей разработке мобильных приложений, веба, серверных проектов, дополненной реальности, искусственного интеллекта и Интернета вещей.