Назад к главному

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

«Непонятно, как копить и тратить бонусы»

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

Сперва мы решили попробовать неоморфизм, потому что во время предварительного обсуждения именно этот стиль больше всего понравился клиенту. Мы уточнили у разработчиков реализуемость и отрисовали несколько основных экранов. Однако в информационно нагруженном приложении с этим стилем было крайне нелегко работать — декоративные элементы создавали визуальный шум.
А ещё мы показали свои наработки дизайн-команде 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

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

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

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

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

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

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

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

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

Что в итоге

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

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

Прочитай на одном заряде

Новости, кейсы, немного аналитики — только самое важное. По пятницам. В конце месяца.