«Новая нефть»: как мы переработали логику приложения и провели редизайн для «Нефтьмагистрали»

Futura by red_mad_robot рассказывают, как работа в «полях» помогла улучшить пользовательский опыт в мобильном приложении, а также почему отказались от неоморфизма в дизайне и при чём тут Лас-Вегас.

«Нефтьмагистраль» — сеть мультисервисных заправок. Работает с 2001 года, всего по Москве и области 99 заправочных станций.

Ежедневно через станции «Нефтьмагистрали» проезжает более ста тысяч человек, а приложение использует около шестисот тысяч водителей. В 2020 году настало время глобальных изменений — компания решила трансформировать свои АЗС в АЗК (автозаправочные комплексы).

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

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

Приложению нужен был редизайн.

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

Владислав Устинович, Руководитель направления мобильной разработки «Нефтьмагистраль»

Работа над новым приложением «Нефтьмагистрали» заняла полгода. И вот как это было.

Исследуем, анализируем и «ходим в поля»

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

Вся работа шла практически параллельно, но для плавности истории начнём с аудита — во время него мы нашли четыре проблемы, которые мешали пользователю.

№1 Запутанное описание условий программы лояльности

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

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

Слева — профиль, справа — раздел с акциями в первой версии приложения
Слева — профиль, справа — раздел с акциями в первой версии приложения

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

В ходе исследования она подтвердилась: чаще всего люди заправляются на двух-трёх АЗК, которые им по пути.

Приложение открывают уже на заправке, чтобы накопить или списать бонусы. А другие АЗК ищут только тогда, когда отправляются в дальнюю поездку. Поэтому карта на главном экране могла быть полезной, в основном, водителям коммерческого транспорта, которые по работе много перемещаются по разным маршрутам и готовы поискать заправку ради экономии.

Стартовый экран в первой версии приложения
Стартовый экран в первой версии приложения

№3 Вопросы к UX-копирайту и юзабилити. Основной текст в приложении был набран мелким кеглем, а это неудобно даже для человека с хорошим зрением. В длинных текстах с описанием условий акций не хватало акцентов — заголовков и разделений на абзацы.

Текст в приложении
Текст в приложении

Были и другие моменты, например, трудности с навигацией — выбор любимого топлива был спрятан глубоко в разделе «Кабинет». Не все пользователи могли узнать о такой возможности.

№4 Много красного. Это цвет, который сильнее всего привлекает внимание. Если в интерфейсе много красных элементов, на их фоне сложно выделить ошибки и уведомления.

Красный в интерфейсе на иконках и уведомлениях
Красный в интерфейсе на иконках и уведомлениях

Анализируем конкурентов и тренды

Аудит — часть работы, которую нужно проделать перед тем, как «пересобрать» приложение. Ещё важный момент — учесть лучшие практики и мировые тенденции, а также ошибки в похожих сервисах.

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

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

Поездки на заправки и интервью с клиентами

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

Бизнес-аналитик Вова Румянцев составил список, где собрал все офлайн-сервисы на АЗК: рестораны, магазины, мойки, аптеки и т. д. Это помогло отделить общие принципы от особенностей отдельных точек
Бизнес-аналитик Вова Румянцев составил список, где собрал все офлайн-сервисы на АЗК: рестораны, магазины, мойки, аптеки и т. д. Это помогло отделить общие принципы от особенностей отдельных точек

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

Сначала общались с друзьями-водителями и таксистами. Потом опубликовали пост в Facebook с просьбой ответить на несколько наших вопросов. Откликов пришло так много, что через пару дней пост даже пришлось удалить — у нас на тот момент не было ресурсов для обработки такого количества обратной связи.

Даша Князева, старший дизайнер red_mad_robot

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

В ходе исследования мы выяснили, что люди по-разному используют заправки во время коротких и длительных поездок. В коротких поездках, например, из дома на работу, водителям важно как можно скорее заправиться. В длительных поездках на дачу или в другие города люди готовы больше времени проводить на заправке, так как хотят немного отдохнуть и размяться. По итогам исследования описали два утрированных собирательных образа: ИТ-специалист, который каждый день добирается на работу, и мама с двумя детьми, которая ездит на выходных на дачу.

Оля Сартакова, дизайн-директор red_mad_robot

Особенности коротких и длительных поездок разложили в виде Customer Journey Map — это помогло понять, чем отличаются запросы водителей, когда они едут по знакомому маршруту до работы и когда выезжают в соседние города.

CJM короткой поездки
CJM короткой поездки
CJM длительной поездки от 2 часов
CJM длительной поездки от 2 часов

С помощью CJM получилось найти важные разрывы в клиентском опыте. Например, люди отмечали, что нужное им топливо на заправке может закончиться, и тогда об этом оповещают, вешая табличку на заправке. Но не всегда её видно издалека, поэтому водитель теряет время, заезжая на АЗС. В новой версии приложения клиент сразу видит, есть ли его топливо на нужной заправке. Заезжать не нужно.

Дальше на совместном воркшопе с командой клиента обсудили результаты исследований и проблемы, которые возникают у людей при краткосрочных и длительных поездках. На второй части воркшопа разбились на две команды и сгенерировали идеи, как мы можем исправить существующие проблемы. Затем всё собрали в один список и отскорили с помощью модели RICE. Выделили фичи, которые делаем в первую очередь, а остальное оставили на следующие релизы.

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

Структура нового приложения
Структура нового приложения

Обновлённая «Нефтьмагистраль»: персонализированный главный экран, понятная система лояльности, дизайн-мэтч с заправками и новые возможности

По итогу аналитики стало понятно, что во время коротких и длинных поездок у людей разные запросы.

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

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

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

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

Если пользователь зашёл в свой профиль и находится на заправке, он видит свои бонусы и информацию по конкретному АЗК.

Главный экран, каким его видит авторизованный пользователь
Главный экран, каким его видит авторизованный пользователь

Совсем карта из приложения не пропала: если водитель в дороге, то на стартовом экране он видит ближайшую заправку.

Логика главного экрана, в зависимости от ситуации, в которой находится водитель
Логика главного экрана, в зависимости от ситуации, в которой находится водитель

«На всех заправках разные акции и рестораны»

Мы изучили результаты исследования, которое проводила для «Нефтьмагистрали» компания LabBee. Они выяснили, что 84% водителей заправляются раз в неделю или чаще, причем чем чаще, тем важнее для клиентов наличие ресторана. Для нас это означало, что в приложении важно рассказать о типах ресторанов и их режиме работы, сроках действия и подробных условиях акций.

Изменения коснулись отображения условий программы лояльности и акций. В первой версии приложения из-за универсального отображения акций с разными условиями не все клиенты могли в них сориентироваться.

Я тоже водитель. Когда началась работа над «Нефтьмагистралью», я поставила себе приложение и стала заезжать на АЗК постоянно. В какой-то момент я накопила на хот-дог в подарок. Но на той заправке, куда мы приехали, их не было, там продавалась только пицца. Оказалось, что на разных АЗК работают разные рестораны, от этого и зависит представленное меню. Я на себе почувствовала, как могут расстроиться другие клиенты, но благодаря этому опыту поняла, как важно максимально прозрачно описать все условия акций для каждой заправки.

Даша Князева, старший дизайнер red_mad_robot

В обновленном приложении на главном экране отображаются только те предложения, которые действуют на той АЗК, на которой сейчас находится человек. Мы добавили информацию о сроке и времени действия предложения. А если водитель приезжает к окончанию акции, он узнает об этом по уведомлению «Осталось 5 минут». Все акции по-прежнему можно посмотреть в специальном разделе.

Вариантов предложений оказалось действительно много: фишки, накопления, подарки и т. д. Поскольку разработка приложения была на стороне «Нефтьмагистрали» и стартовала после того, как мы закончили работу над дизайном, мы составили подробный UI-kit для технической команды с описанием всех краевых состояний элементов.

UI-Kit проекта
UI-Kit проекта
Кусочек правил формирования карточки с акцией
Кусочек правил формирования карточки с акцией

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

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

Оля Сартакова, дизайн-директор red_mad_robot

«Непонятно, как копить и тратить бонусы»
Водители не понимали, как долго хранятся бонусы, когда они сгорают и как происходит переход на следующий уровень в программе лояльности.

Правила программы лояльности
Правила программы лояльности

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

Даша Князева, старший дизайнер red_mad_robot
Подсказка про скорое сгорание бонусов
Подсказка про скорое сгорание бонусов

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

Экран оплаты. Можно копить бонусы, сканируя QR-код на кассе, или оплачивать услуги прямо в приложении
Экран оплаты. Можно копить бонусы, сканируя QR-код на кассе, или оплачивать услуги прямо в приложении

При проектировании новой версии приложения мы исправили ещё ряд проблем с юзабилити. Например, выбор любимого топлива был спрятан в «личных данных» — там, где пользователи, скорее всего, ожидают увидеть ФИО, телефон и e-mail. Люди не так часто редактируют свои данные, поэтому вряд ли скоро дойдут до этого экрана.

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

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

Ещё мы показываем подсказку «здесь нет вашего любимого топлива». Люди чаще всего заправляются одним видом и расстраиваются, когда приезжают на заправку, а его там нет. Например, бензин АИ-100 мало где есть даже в Москве. Поэтому лучше предупредить, чтобы человек не тратил время на заезд.

Или ещё пример: дизайнер Даша Князева поехала в гости в Реутов и хотела посмотреть, есть ли заправка «Нефтьмагистрали» по дороге. Но сделать этого не удалось, потому что поиск в старом приложении искал заправки только по названию или точному адресу. «Полечить» этот момент можно только при доработке бэкенда, а пока мы спроектировали в дизайне, как должен работать такой сценарий.

Логика отработки поискового запроса, когда в запрашиваемой локации нет АЗС
Логика отработки поискового запроса, когда в запрашиваемой локации нет АЗС

Если на самой заправке что-то шло не так, пользователи приложения не всегда понимали, как быстрее всего решить проблему. И чаще всего писали отзывы о работе компании в целом в отзывах о приложении в App Store и Google Play. Это негативно влияло на рейтинг приложения, которое в ряде случаев было совсем ни при чём, и сообщение о проблеме не сразу доходило по адресу. Поэтому мы предложили переместить обратную связь о заправке из профиля пользователя прямо на экран АЗК — туда, где пользователи вероятнее всего будут её искать.

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

Кристина Максимова,

ex. менеджер проекта в Futura by red_mad_robot

Слева — точка входа в деталях АЗС, справа — форма обратной связи
Слева — точка входа в деталях АЗС, справа — форма обратной связи

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

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

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

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

Оля Сартакова, дизайн-директор red_mad_robot
Первая концепция в неоморфизме
Первая концепция в неоморфизме

Для нового стиля мы взяли логотип и фирменные цвета из брендбука «Нефтьмагистрали», а также повторили ломаные линии, которые используются в оформлении заправок.

Фирменные цвета и геометричные линии в конструкции АЗК
Фирменные цвета и геометричные линии в конструкции АЗК

Команда «Нефтьмагистрали» не раз подчеркивала, что заправки светятся в ночи и привлекают внимание, словно казино в Лас-Вегасе. Едешь по дороге ночью, и тут возникают яркие неоновые контуры. Поэтому мы решили добавить в дизайн приложения яркие акценты.

Даша Князева, старший дизайнер Futura by red_mad_robot
Смена статуса в программе лояльности и тёмная тема приложения

Тема Лас-Вегаса прослеживается и в акциях. Например, люди, получившие золотой статус в программе лояльности, могут раз в месяц покрутить «Колесо фортуны» и получить гарантированный приз. Эта акция пользовалась большой популярностью, поэтому в новом приложении она тоже есть, мы только перерисовали «Колесо» в новом стиле.

Даша Князева, старший дизайнер red_mad_robot
Акция Колесо фортуны. Слева — крутим барабан и испытываем удачу, справа — выпавший приз

Команда «Нефтьмагистрали» дала нам свободу в выборе шрифта. Мы поэкспериментировали и в итоге остановились на шрифте Futura PT. Линии букв «м», «и» и цифры «4» в нём отлично сочетаются с линиями в интерфейсе.

Было интересно поработать с шрифтом Futura, поскольку он не самый популярный для интерфейса. Чаще всего используют нативные шрифты платформ: Roboto для Android и San Francisco для iOS. Это позволяет сэкономить на покупке лицензии, но дизайн приложений теряет часть индивидуальности. Futura — это гротеск, созданный немецким дизайнером Паулем Реннером в 20-х годах 20-го века. В этом шрифте довольно длинные выносные элементы. Дело в том, что в немецком языке существительные пишутся с большой буквы, в словах часто встречаются буквы «t», «f», «l» и другие «высокие» символы, поэтому длинные выносные элементы позволяют людям быстрее считывать форму буквы и слова. Из-за длинных выносных элементов приходится делать довольно большой интерлиньяж — расстояние между строками. В русском языке слова, содержащие буквы с выносными элементами, встречаются намного реже, но интерлиньяж приходится сохранять довольно большим. Из-за этого кегль шрифта кажется мельче, чем он есть на самом деле. Стандартные платформенные шрифты хорошо смотрятся в интерфейсе в 13–14 кегле, в случае с Futura PT для основного текста мы использовали 17 кегль с межстрочным интервалом 20.

Оля Сартакова, дизайн-директор red_mad_robot
Слева направо: Object Sans, Futura PT, Geometria
Слева направо: Object Sans, Futura PT, Geometria

Ещё важный элемент визуального дизайна цифровых продуктов — иконки. Они должны подходить к шрифту, поскольку часто используются рядом с текстом. Мы отрисовали сет из иконок двух типов: первый используется рядом с текстом, набранным обычным начертанием Futura PT, второй — рядом с жирным. Мы сохранили характерные черты штриха шрифта в иконках: острые углы и прямоугольные окончания линий.

Типы иконок для текста с разной жирностью
Типы иконок для текста с разной жирностью

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

Оля Сартакова, дизайн-директор red_mad_robot
Варианты пинов. В итоге остановились на последнем.
Варианты пинов. В итоге остановились на последнем.

Дизайнеры проработали несколько вариантов иконки для приложения «Нефтьмагистрали» и остановились на тёмном. Он выгодно выделяется на фоне иконок конкурентов и популярных приложений.

Варианты иконок. Слева белая иконка теряется среди других приложений, справа чёрная, наоборот, выделяется
Варианты иконок. Слева белая иконка теряется среди других приложений, справа чёрная, наоборот, выделяется

Иллюстрации делают веселее даже самые скучные экраны с ошибками. Чтобы они аккуратно дополнили визуальный стиль приложения, мы решили ограничиться тремя цветами: чёрным, белым и красным. А сами иллюстрации собирать из простых геометрических форм.

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

Что в итоге

На основе исследования мы спроектировали новую структуру приложения, создали новый, современный дизайн, который учитывает планы развития приложения от программы лояльности к сервису «все в одном»: заправиться, помыться, поесть. Это поможет водителям экономить время, быстро и безопасно получать все услуги через приложение, а «Нефтьмагистрали» — реализовать стратегию развития компании.

Дизайн приложения «Нефтьмагистраль» был признан лучшим на премии Tagline Awards 2021 в категории «Лучшее приложение для услуги».

Благодарим команду «Нефтьмагистрали» за помощь и поддержку!

Приложение доступно на AppStore и GooglePlay.

AppStore
GooglePlay
6262
9 комментариев

Детальный, хороший кейс. Спасибо, приятно читать : )

7
Ответить

Реально крутой редизайн, побольше бы таких примеров

3
Ответить

Редко настолько заморачиваются с переработкой.

Добавлю пару моментов.

Открывать приложение лучше на одном экране. В движении вместо привычного главного экрана открывшаяся карта смутит человека, даже если карта и нужна была.

В описании заправки указывать, если съезжать к ней надо заранее. При том указать заметно, чтобы в дороге сразу увидел. Нужно на МКАДе, где заправка на дублёре, а съезд на него за несколько сотен метров до заправки (к примеру, газовая на юго-западе. Давно в Москве не был, но вроде там съезд на дублёр вне зоны видимости самой заправки).

2
Ответить

Спасибо!

1
Ответить

Классный кейс, с удовольствием прочитал

1
Ответить

Молодцы что так подошли к этому делу, сразу видно что хочет фирма и к чему стремится

1
Ответить

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

1
Ответить