«Новая нефть»: как мы переработали логику приложения и провели редизайн для «Нефтьмагистрали»
Futura by red_mad_robot рассказывают, как работа в «полях» помогла улучшить пользовательский опыт в мобильном приложении, а также почему отказались от неоморфизма в дизайне и при чём тут Лас-Вегас.
«Нефтьмагистраль» — сеть мультисервисных заправок. Работает с 2001 года, всего по Москве и области 99 заправочных станций.
Ежедневно через станции «Нефтьмагистрали» проезжает более ста тысяч человек, а приложение использует около шестисот тысяч водителей. В 2020 году настало время глобальных изменений — компания решила трансформировать свои АЗС в АЗК (автозаправочные комплексы).
Главное отличие в том, что на АЗС можно только заправиться и выпить кофе, а вот АЗК — полноценный пункт отдыха для водителей, где можно основательно поесть, помыть машину, зайти в аптеку и купить продукты, как в магазинах у дома.
Поддержать изменения нужно было везде, в том числе и в мобильном приложении. Но в ранее заложенную структуру было сложно внедрять новые пользовательские сценарии и простые описания механик новых акций.
Приложению нужен был редизайн.
Наши заправки предоставляли всё больше и больше услуг, и мы не могли уместить новую информацию в старое приложение. Также нужно было обновить дизайн приложения, сделать его современным и стильным. Нам хотелось перенять лучший мировой опыт.
Владислав Устинович, Руководитель направления мобильной разработки «Нефтьмагистраль».
Работа над новым приложением «Нефтьмагистрали» заняла полгода. И вот как это было.
Исследуем, анализируем и «ходим в поля»
За время исследования мы провели аудит старого приложения, изучили конкурентов, тренды и пообщались с автомобилистами на заправках.
Вся работа шла практически параллельно, но для плавности истории начнём с аудита — во время него мы нашли четыре проблемы, которые мешали пользователю.
№1 Запутанное описание условий программы лояльности
Бонусная программа Нефтьмагистрали работает следующим образом: чем больше клиент тратит на топливо в текущем месяце, тем выше станет его уровень в программе лояльности, и тем быстрее у него будут копиться бонусы в следующем месяце. Ещё можно регулярно покупать, например, сендвичи или бургеры и получать каждый девятый в подарок. В первой версии приложения эти правила были описаны в личном кабинете пользователя.
Также на заправках «Нефтьмагистрали» действуют десятки специальных предложений: скидки на товары в магазине, комбо-обеды и розыгрыши призов. А ещё можно собирать фишки, чтобы получить скидку на посуду или шестой кофе в подарок. Но не на всех АЗК всё одинаково: в одном месте это может быть бургер по выгодной цене до десяти утра, в другом — бесплатный круассан при покупке кофе с середины дня. В первой версии приложения все акции отображались в специальном разделе, однако подробную информацию об их условиях можно было прочитать только на внутреннем экране. В отзывах в сторах и интервью люди отмечали, что условий акций слишком много, их трудно запомнить, и поэтому они не пользуются всеми акциями. Мы предположили, что если упростить подачу условий акций в приложении, это положительно скажется на лояльности клиентов и среднем чеке покупок на заправках.
Слева — профиль, справа — раздел с акциями в первой версии приложения
№2 Неинформативный стартовый экран с картой заправок и ценами на топливо. У нас была гипотеза, что картой пользуются нечасто, поскольку большинство клиентов Нефтьмагистрали передвигаются по знакомым маршрутам.
В ходе исследования она подтвердилась: чаще всего люди заправляются на двух-трёх АЗК, которые им по пути.
Приложение открывают уже на заправке, чтобы накопить или списать бонусы. А другие АЗК ищут только тогда, когда отправляются в дальнюю поездку. Поэтому карта на главном экране могла быть полезной, в основном, водителям коммерческого транспорта, которые по работе много перемещаются по разным маршрутам и готовы поискать заправку ради экономии.
Стартовый экран в первой версии приложения
№3 Вопросы к UX-копирайту и юзабилити. Основной текст в приложении был набран мелким кеглем, а это неудобно даже для человека с хорошим зрением. В длинных текстах с описанием условий акций не хватало акцентов — заголовков и разделений на абзацы.
Текст в приложении
Были и другие моменты, например, трудности с навигацией — выбор любимого топлива был спрятан глубоко в разделе «Кабинет». Не все пользователи могли узнать о такой возможности.
№4 Много красного. Это цвет, который сильнее всего привлекает внимание. Если в интерфейсе много красных элементов, на их фоне сложно выделить ошибки и уведомления.
Красный в интерфейсе на иконках и уведомлениях
Анализируем конкурентов и тренды
Аудит — часть работы, которую нужно проделать перед тем, как «пересобрать» приложение. Ещё важный момент — учесть лучшие практики и мировые тенденции, а также ошибки в похожих сервисах.
Для этого мы изучили приложения популярных заправок и сервисов с похожими сценариями. Проанализировали мировые тренды, выделив интересные возможности, как, например, голосовой помощник для выбора колонки и количества литров для заправки (его добавили в бэклог на следующие релизы).
Карта из Miro: основные сценарии других заправок собрали на одной доске. Для каждого конкурента выписали ключевые функции, принципы работы программы лояльности, а также посмотрели, о чём говорят пользователи в сторах, и учли положительные и отрицательные отзывы, которые часто повторяются.
После всех исследований и аналитики собрали маст-хев возможности и интересные фичи, а также сформировали первичные гипотезы, которые затем проверяли на интервью с реальными пользователями заправок.
Поездки на заправки и интервью с клиентами
На заправках изучали и наблюдали за процессами: как работают сотрудники, какими услугами пользуются водители и с какими проблемами чаще всего сталкиваются.
Бизнес-аналитик Вова Румянцев составил список, где собрал все офлайн-сервисы на АЗК: рестораны, магазины, мойки, аптеки и т. д. Это помогло отделить общие принципы от особенностей отдельных точек
Наблюдения помогли нам сделать общие выводы о сервисе, но нужно было конкретизировать. Для этого говорили с реальными людьми, узнавали что нравится в заправках, почему иногда выбирают другие АЗС, у каких компаний заправляются, участвуют ли в программе лояльности.
Сначала общались с друзьями-водителями и таксистами. Потом опубликовали пост в Facebook с просьбой ответить на несколько наших вопросов. Откликов пришло так много, что через пару дней пост даже пришлось удалить — у нас на тот момент не было ресурсов для обработки такого количества обратной связи.
Даша Князева, старший дизайнер red_mad_robot
С помощью интервью мы проверили гипотезы. Какие-то фичи отпали — общение показало, что у пользователей таких проблем нет. А всё, что подтвердилось, забрали в дальнейшую работу.
В ходе исследования мы выяснили, что люди по-разному используют заправки во время коротких и длительных поездок. В коротких поездках, например, из дома на работу, водителям важно как можно скорее заправиться. В длительных поездках на дачу или в другие города люди готовы больше времени проводить на заправке, так как хотят немного отдохнуть и размяться. По итогам исследования описали два утрированных собирательных образа: ИТ-специалист, который каждый день добирается на работу, и мама с двумя детьми, которая ездит на выходных на дачу.
Оля Сартакова, дизайн-директор red_mad_robot
Особенности коротких и длительных поездок разложили в виде Customer Journey Map — это помогло понять, чем отличаются запросы водителей, когда они едут по знакомому маршруту до работы и когда выезжают в соседние города.
CJM короткой и длительной поездки
С помощью 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. менеджер проекта в Futura by red_mad_robot
Слева — точка входа в деталях АЗС, справа — форма обратной связи
До обновлений в интерфейсе было много красного цвета, который обычно используют для ошибок и уведомлений. Кроме этого, в длинных текстах внутри приложения не было заголовков и подзаголовков, что ухудшало читаемость. В новом интерфейсе минимум красного (только для самого важного), а в тексте появились акценты.
Что касается общего визуального стиля, команда клиента хотела сделать приложение современным и стильным, стать примером для подражания в своей сфере. Мы сделали два подхода к решению этой задачи.
Сперва мы решили попробовать неоморфизм, потому что во время предварительного обсуждения именно этот стиль больше всего понравился клиенту. Мы уточнили у разработчиков реализуемость и отрисовали несколько основных экранов. Однако в информационно нагруженном приложении с этим стилем было крайне нелегко работать — декоративные элементы создавали визуальный шум.
А ещё мы показали свои наработки дизайн-команде red_mad_robot на «Смотрине» — еженедельной внутренней встрече дизайнеров. И ребята подсказали, что это, хоть и выглядит интересно, но не ассоциируется с «Нефтьмагистралью». Мы решили взять тайм-аут на неделю и всё переделали. В работе над второй версией мы вдохновлялись тем, как выглядят заправки «Нефтьмагистрали» днём и ночью. Обновлённую концепцию утвердили с клиентом с первого раза.
Оля Сартакова, дизайн-директор red_mad_robot
Первая концепция в неоморфизме
Для нового стиля мы взяли логотип и фирменные цвета из брендбука «Нефтьмагистрали», а также повторили ломаные линии, которые используются в оформлении заправок.
Фирменные цвета и геометричные линии в конструкции АЗК
Команда «Нефтьмагистрали» не раз подчеркивала, что заправки светятся в ночи и привлекают внимание, словно казино в Лас-Вегасе. Едешь по дороге ночью, и тут возникают яркие неоновые контуры. Поэтому мы решили добавить в дизайн приложения яркие акценты.
Даша Князева, старший дизайнер Futura by red_mad_robot
Тема Лас-Вегаса прослеживается и в акциях. Например, люди, получившие золотой статус в программе лояльности, могут раз в месяц покрутить «Колесо фортуны» и получить гарантированный приз. Эта акция пользовалась большой популярностью, поэтому в новом приложении она тоже есть, мы только перерисовали «Колесо» в новом стиле.
Даша Князева, старший дизайнер red_mad_robot
Акция Колесо фортуны. Слева — крутим барабан и испытываем удачу, справа — выпавший приз
Embedded content: Колесо Фортуны
Команда «Нефтьмагистрали» дала нам свободу в выборе шрифта. Мы поэкспериментировали и в итоге остановились на шрифте 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
Варианты пинов. В итоге остановились на последнем.
Дизайнеры проработали несколько вариантов иконки для приложения «Нефтьмагистрали» и остановились на тёмном. Он выгодно выделяется на фоне иконок конкурентов и популярных приложений.
Варианты иконок. Слева белая иконка теряется среди других приложений, справа чёрная, наоборот, выделяется
Иллюстрации делают веселее даже самые скучные экраны с ошибками. Чтобы они аккуратно дополнили визуальный стиль приложения, мы решили ограничиться тремя цветами: чёрным, белым и красным. А сами иллюстрации собирать из простых геометрических форм.
Иллюстрации использовали для оформления онбординга, зеро-экранов и экрана успеха
Что в итоге
На основе исследования мы спроектировали новую структуру приложения, создали новый, современный дизайн, который учитывает планы развития приложения от программы лояльности к сервису «все в одном»: заправиться, помыться, поесть. Это поможет водителям экономить время, быстро и безопасно получать все услуги через приложение, а «Нефтьмагистрали» — реализовать стратегию развития компании.
Дизайн приложения «Нефтьмагистраль» был признан лучшим на премии Tagline Awards 2021 в категории «Лучшее приложение для услуги».
Благодарим команду «Нефтьмагистрали» за помощь и поддержку!
Приложение доступно на AppStore и GooglePlay.
Embedded content: Смена статуса в программе лояльности и тёмная тема приложения