РН-карт - мобильное приложение виртуальной топливной карты водителя

Задача

Бэкграунд

Необходимо было разработать дизайн для страницы «Главная» мобильного приложения РН-карт. С помощью нового дизайна заказчик хотел сделать процесс взаимодействия с приложением удобнее, конструктивнее и эффективнее.

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

Group 512971.png

Процесс

проектирования

Этапы работы

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

Я работала в команде вместе с дизайн-директором, UX-копирайтером и проджект-менеджером.

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

и результаты

Что исследовала ?

Основные потребности пользователей в мобильном приложении
Какой функционал пользователи хотели бы видеть на странице «Главная»
Какие боли есть у пользователей при работе с картами

Ключевые подтвержденные гипотезы:

Пользователям важно быстро находить АЗС в дороге.
Главный экран Татнефть и Лукойл (конкуренты) на главном экране содержат нерелевантную для пользователя информацию из-за чего они будут дольше ориентироваться в приложении за рулем.

<aside> ✅ Результаты исследования и инсайты:

10/10 респондентов ответили, что, открывая мобильное приложение, они в первую очередь хотят видеть карту для поиска АЗС, так как они считают это основным действием в этом приложении

6/10 пользователей хотят видеть баланс топливной карты на главной странице

8/10 респондентов отметили, что главный экран конкурентных решений перегружен и им сложно сориентироваться в дороге

4/10 респондентов хотели видеть карту без отвлекающих элементов

</aside>

Переходим к решению: Дизайн экрана «Главная»

%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F 1.png

%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F_%D0%BE%D0%B1_%D0%B0%D0%B7%D1%81 1.png

%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F_%D1%84%D0%B8%D0%BB%D1%8C%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F 1.png

Что сделала?

На главном экране разместила карту АЗС - для поиска заправок. Это именно то, ради чего пользователи скачивают приложение.
Увеличила количество разделов до 5 в нижнем меню, таким образом решила требования клиента по функционалу и позволила пользователям решать их задачи в дороге быстрее.
Добавила баланс топливной карты внизу с возможностью сразу пополнить ее, чтобы водитель совершал меньше действий в дороге.
Сделала карту черно-белой так как по результатам исследования были те, которые отвлекались от дороги из-за карты с лишним визуальным шумом.

Экран на главной «Об АЗС»

Оптимизировала дизайн экрана «Информация об АЗС». При нажатии на любую иконку АЗС открывается окно с информацией об интересующей локацией
Пересмотрела UI-карточки, убрала визуальный шум. Переместила пункт «Оплата топливной картой» в услуги на этом же экране.

Экран на главной «Фильтр»

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

Итоги работы:

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