Редизайн приложения «Мой РОЛЬФ»

Заказчик

«РОЛЬФ» — крупнейший автодилер России. Портфель брендов компании включает более 20 марок, а дилерская сеть состоит из 59 шоурумов и 3 мегамоллов авто с пробегом.

Задача

1. Перепроектирование UX: перестроить взаимодействие с приложением, предложить пользователю понятный путь к решению задач. 2. Привести визуальный стиль продукта в соответствие актуальным трендам.

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

• В 2020 году стало очевидно, что omnichannel — не хайп, а новая реальность, и прежнее приложение «РОЛЬФа» не отвечает её требованиям. 
• В компании провели SWOT-анализ текущей версии продукта. Оценили угрозы — внутренние и внешние.
• Параллельно исследовали конкурентов, включая крупные компании-агрегаторы, который сделали автобизнес одним из новых направлений своей работы (Сбер, Авито, Яндекс).
• Заказали внешнее исследование перспектив развития рынка мобильных приложений.

В компании приняли решение провести глобальную переработку продукта. Важной частью проекта стал редизайн. Компания arcsinus приняла участие в конкурсе вместе с 8 другими агентствами. Мы подготовили дизайн-концепцию, защитили её перед командой в офисе «РОЛЬФа» и победили — нашу работу посчитали наиболее сильной.

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

Исследования

В ходе работы над проектом команда arcsinus провела целый ряд исследований.

1. Данные прежних исследований и аудит текущей версии.
   На старте работы мы запросили и проанализировали исследования, которые были в распоряжении команды «РОЛЬФа», а также провели аудит приложения на своей стороне. Арт-директор и аналитик arcsinus препарировали пользовательские сценарии и выяснили смысл каждого шага. Это необходимо, когда имеешь дело с продуктом, разработанным другой командой.
2. Метод персон.
   Вместе с коллегами из «РОЛЬФа» мы сформировали портреты основных пользователей приложения по методу персон. Галерея портретов пользователей получилась обширной, но на старте мы сфокусировались на потребностях трёх базовых персон.
3. Опрос автовладельцев.
   Чтобы приложение отвечало актуальным запросам, мы провели исследование среди потенциальных пользователей. В анкете предложили респондентам рассказать о реальных нештатных ситуациях, которые произошли с ними на дороге, и выбрать варианты помощи, которые могли бы помочь в таких ситуациях. Выяснилось, что возможность вызвать аварийного комиссара и эвакуатор — полезные опции, а вот «трезвый водитель» не интересует почти никого. Данные этого исследования стали основой для опций раздела «Помощь на дороге» в последующих релизах приложения.
4. UX-исследование.
   Во время работы над функцией «Избранные сравнения» мы провели исследование-опрос. Он помог понять, что результаты своих сравнений автомобилей в каталоге пользователь скорее будет искать в личном кабинете, а не в разделе «Услуги». Там и разместили.
5. Анализ конкурентов.
   Мы провели глубокий анализ других игроков авторынка. Это важная часть работы и аналитика, и дизайнера — они изучают, как решают ту или иную задачу пользователя другие продукты, используют лучшие практики или предлагают свой вариант.

Карта пользовательских историй

Сформировав портреты представителей целевой аудитории, мы приступили к компоновке карты пользовательских историй — user story mapping.

User Story Map позволяет понять, что именно делает человек внутри продукта. Разработка карты перед проектированием приложения помогает избежать логических ошибок, а значит, свести к минимуму риск негативного пользовательского опыта.

Помимо данных исследований наша команда ориентировалась на стратегию развития компании «РОЛЬФ». В ней отражены цели бизнеса, и отдельно — цели и основные функции продукта «Мой РОЛЬФ». Сверяясь со стратегическими целями, мы разработали подробную карту пользовательских историй для каждой целевой персоны.

Работа над дизайном

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

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

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

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

Возможности приложения 

Вот несколько элементов обновлённого приложения «Мой РОЛЬФ»:

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

• Главный экран.
  Главный экран персонализирован в зависимости от типа пользователя. Возможности неавторизованного пользователя ограничены, и приложение мотивирует авторизоваться с помощью небольшой, но заметной кнопки в хедере. В прежней версии приложения плашка с призывом авторизоваться занимала треть экрана и скорее отталкивала, чем мотивировала. Авторизованный пользователь на первом экране получает доступ ко всем ключевым возможностям. Сюда мы вывели блок записи в дилерский центр, данные об активных заявках и штрафах, а также «гараж» — транспортные средства, добавленные в учётную запись. Если у пользователя ещё нет добавленных автомобилей — предлагаем исправить это.

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

• Услуги.
  Раньше услуги компании были раскиданы по приложению без явной логики: например, тест-драйв и аренда были спрятаны в меню-гамбургере, а заявка на техобслуживание — в «Сервисе» на главном экране. Мы собрали все возможности пользователя в разделе «Услуги». Чтобы записаться на услугу, раньше пользователю приходилось заполнять длинную форму с множеством полей. Мы разбили процесс на несколько последовательных шагов: выбор услуги, выбор дилерского центра, выбор даты и времени или мастера и подтверждение. Также у пользователя появилась возможность добавить запись на услугу в календарь.

• Сторис.
  В приложении реализовали блок в стиле сторис. Здесь собраны интересные и полезные автомобилисту новости. Полную версию материала укомплектовали конверсионными элементами: в зависимости от содержания статьи мы предлагаем перейти в каталог, связаться с «РОЛЬФом» или поделиться материалом.

• Чат поддержки.
  В любой непонятной ситуации пользователь «Моего РОЛЬФа» может написать в чат поддержки. С типовыми вопросами справляется чат-бот, а при необходимости подключается живой консультант. Если нужно, из чата можно позвонить на горячую линию «РОЛЬФа».

Задачи и решение

1. Основная задача была в переосмыслении UX. Необходимо было перестроить взаимодействие с приложением, предложить пользователю прямой и понятный путь к решению каждой задачи. Нам это удалось — мы воссоздали все сценарии взаимодействия пользователя с продуктом в новом, более удобном и интуитивном виде.
2. Важно было привести облик продукта в соответствие актуальным трендам. Мы отказались от теней, элементы выделяются только оттенком. Белому цвету фона тоже придали красноватый оттенок — так мы обыграли фирменный акцентный цвет «РОЛЬФа». Чтобы сделать интерфейс дружелюбнее, мы добавили элементам скруглённые углы. Дизайн обновлённого приложения выглядит минималистично и свежо. Кроме того, у команды клиента теперь есть дизайн-система, которая помогает поддерживать приложение, а также создавать новые продукты.

Генеральный директор arcsinus так проникся проектом, что когда решил купить новое авто — сделал это в «РОЛЬФе». Так Александр протестировал на себе весь путь, стал клиентом нашего клиента и одним из первых пользователей нового приложения.

Я очень люблю автомобили и удобные интерфейсы. Когда коллеги из «РОЛЬФа» пришли к нам с задачей на редизайн приложения, я подключился к проекту и участвовал как консультант по дизайну и проектированию. Благодаря слаженной работе команды arcsinus и высокому профессионализму Николая Голдберга и Татьяны Соколовой из команды «РОЛЬФа» нам удалось сделать приложение автодилера лучше!

Александр Науменко
генеральный директор arcsinus

Достигнутые цели:

• Отличная динамика по приросту MAU и DAU;
• Заметный рост показателя удержания пользователей;
• Рост количества и качества сервисов, доступных в приложении.

Комментарии представителей заказчика

Перейти на сайт