Проблема

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

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

ТрансТехСервис (ТТС) — крупная сеть автомобильных дилерских центров, официальный дилер ряда российских и международных автопроизводителей. Входит в топ-10 крупнейших автодилеров России, присутствует в 11 городах.

Задача

• Обновить интерфейсы имеющихся приложений, сделать их более современными и понятными.
• Проработать и добавить новые экраны.
• Реализовать два варианта для основных мобильных платформ: светлую и тёмную темы.

То есть нужно не просто создать дополнительные разделы, а определить новую дизайн-концепцию приложения.

Результат

• Проработали дизайн более 200 экранов в светлой и тёмной темах для Android и iOS.
• Упростили интерфейс раздела «Бонусная система»: 1 клик до виртуальной карты вместо 12.
• Обновили каталог автомобилей и добавили запись на ТО, услугу обмена старого автомобиля на новый, бронирование с расчётом стоимости и напоминаниями.

Решение

Бонусная система

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

Заказчик предоставил прототипы со своим видением реализации задачи. 

Мы проанализировали их на удобство использования и подготовили предложения по улучшению:

1. Страница зарегистрированного пользователя должна отличаться от экрана незарегистрированного пользователя. Если человек не авторизован в системе, ему нужно предложить заполнить анкету для получения бонусной онлайн-карты. 
2. Нужно продумать Анкету таким образом, чтобы пользователь охотнее её заполнял: не перенасытить вопросами, никто не любит вводить большое количество данных и выполнять большое количество действий. Если разделить Анкету на личную информацию и другие данные (о семье, увлечениях и  соц. сведения), то вероятность, что пользователь зайдет на все экраны небольшая. Даже если эта информация  будет обязательная к заполнению, это создаст неудобства для клиента и уменьшит вероятность регистрации бонусной карты. 
3. Решить, какой вариант бонусной карты предпочтительнее —  реальный «пластик» или онлайн-карта.

Заказчик принял предложенные правки и мы приступили к работе.

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

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

Убрали разделение данных при заполнении Анкеты. Такое деление создает неудобство для клиента: ему нужно зайти в раздел, заполнить Анкету, нажать «Сохранить» и вернуться назад. И так по каждому пункту —  получается 12 кликов. Вероятность, что пользователь заполнит все данные, в таком случае небольшая. После того как мы убрали заполнение данных со стартового экрана и объединили Анкету, количество кликов уменьшилось до одного!

Решили использовать виртуальную карту, так как такой вариант будет ещё удобнее для пользователя: ему не нужно носить с собой дополнительный предмет. Плюс, это дополнительный стимул иметь установленное мобильное приложение. 

Остальные экраны

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

Реализовали левое меню для более удобного взаимодействия с приложением.

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

Выбранные параметры фильтра можно сохранить.

Через приложение можно забронировать автомобиль и внести предоплату за него.

Компания «ТрансТехСервис» предлагает своим клиентом воспользоваться услугой обмена старого автомобиля на новый. Подготовили 4 экрана для каждого шага записи на оценку автомобиля.

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

Это уже привычная для нас работа, подобные функции мы уже делали в приложениях iCherga и АвтомойкиРУ.

Перед подтверждением записи появляется экран с перечнем услуг и общая стоимость ТО. Когда пользователь записался, на экране выводится напоминание о записи: адрес сервиса, дата и время. 

Тёмная тема

После того как, были реализованы экраны светлой темы на обе платформы (Android и IOS), проработали дизайн приложения и в тёмном варианте. 

Итог

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

Нужен дизайн или разработка мобильного приложения?
Мы помогаем создавать удобные цифровые продукты: проектируем интерфейсы, продумываем пользовательские сценарии и разрабатываем решения, которые поддерживают реальные бизнес-процессы компании.
Оставьте заявку — обсудим задачу и подготовим предварительную оценку проекта.