Futura by red_mad_robot рассказывают, как работа в «полях» помогла улучшить пользовательский опыт в мобильном приложении, а также почему отказались от неоморфизма в дизайне и при чём тут Лас-Вегас.
«Нефтьмагистраль» — сеть мультисервисных заправок. Работает с 2001 года, всего по Москве и области 99 заправочных станций.
Ежедневно через станции «Нефтьмагистрали» проезжает более ста тысяч человек, а приложение использует около шестисот тысяч водителей. В 2020 году настало время глобальных изменений — компания решила трансформировать свои АЗС в АЗК (автозаправочные комплексы).
Главное отличие в том, что на АЗС можно только заправиться и выпить кофе, а вот АЗК — полноценный пункт отдыха для водителей, где можно основательно поесть, помыть машину, зайти в аптеку и купить продукты, как в магазинах у дома.
Поддержать изменения нужно было везде, в том числе и в мобильном приложении. Но в ранее заложенную структуру было сложно внедрять новые пользовательские сценарии и простые описания механик новых акций.
Приложению нужен был редизайн.
Наши заправки предоставляли всё больше и больше услуг, и мы не могли уместить новую информацию в старое приложение. Также нужно было обновить дизайн приложения, сделать его современным и стильным. Нам хотелось перенять лучший мировой опыт.
Работа над новым приложением «Нефтьмагистрали» заняла полгода. И вот как это было.
Исследуем, анализируем и «ходим в поля»
За время исследования мы провели аудит старого приложения, изучили конкурентов, тренды и пообщались с автомобилистами на заправках.
Вся работа шла практически параллельно, но для плавности истории начнём с аудита — во время него мы нашли четыре проблемы, которые мешали пользователю.
№1 Запутанное описание условий программы лояльности
Бонусная программа Нефтьмагистрали работает следующим образом: чем больше клиент тратит на топливо в текущем месяце, тем выше станет его уровень в программе лояльности, и тем быстрее у него будут копиться бонусы в следующем месяце. Ещё можно регулярно покупать, например, сендвичи или бургеры и получать каждый девятый в подарок. В первой версии приложения эти правила были описаны в личном кабинете пользователя.
Также на заправках «Нефтьмагистрали» действуют десятки специальных предложений: скидки на товары в магазине, комбо-обеды и розыгрыши призов. А ещё можно собирать фишки, чтобы получить скидку на посуду или шестой кофе в подарок. Но не на всех АЗК всё одинаково: в одном месте это может быть бургер по выгодной цене до десяти утра, в другом — бесплатный круассан при покупке кофе с середины дня. В первой версии приложения все акции отображались в специальном разделе, однако подробную информацию об их условиях можно было прочитать только на внутреннем экране. В отзывах в сторах и интервью люди отмечали, что условий акций слишком много, их трудно запомнить, и поэтому они не пользуются всеми акциями. Мы предположили, что если упростить подачу условий акций в приложении, это положительно скажется на лояльности клиентов и среднем чеке покупок на заправках.
№2 Неинформативный стартовый экран с картой заправок и ценами на топливо. У нас была гипотеза, что картой пользуются нечасто, поскольку большинство клиентов Нефтьмагистрали передвигаются по знакомым маршрутам.
В ходе исследования она подтвердилась: чаще всего люди заправляются на двух-трёх АЗК, которые им по пути.
Приложение открывают уже на заправке, чтобы накопить или списать бонусы. А другие АЗК ищут только тогда, когда отправляются в дальнюю поездку. Поэтому карта на главном экране могла быть полезной, в основном, водителям коммерческого транспорта, которые по работе много перемещаются по разным маршрутам и готовы поискать заправку ради экономии.
№3 Вопросы к UX-копирайту и юзабилити. Основной текст в приложении был набран мелким кеглем, а это неудобно даже для человека с хорошим зрением. В длинных текстах с описанием условий акций не хватало акцентов — заголовков и разделений на абзацы.
Были и другие моменты, например, трудности с навигацией — выбор любимого топлива был спрятан глубоко в разделе «Кабинет». Не все пользователи могли узнать о такой возможности.
№4 Много красного. Это цвет, который сильнее всего привлекает внимание. Если в интерфейсе много красных элементов, на их фоне сложно выделить ошибки и уведомления.
Анализируем конкурентов и тренды
Аудит — часть работы, которую нужно проделать перед тем, как «пересобрать» приложение. Ещё важный момент — учесть лучшие практики и мировые тенденции, а также ошибки в похожих сервисах.
Для этого мы изучили приложения популярных заправок и сервисов с похожими сценариями. Проанализировали мировые тренды, выделив интересные возможности, как, например, голосовой помощник для выбора колонки и количества литров для заправки (его добавили в бэклог на следующие релизы).
После всех исследований и аналитики собрали маст-хев возможности и интересные фичи, а также сформировали первичные гипотезы, которые затем проверяли на интервью с реальными пользователями заправок.
Поездки на заправки и интервью с клиентами
На заправках изучали и наблюдали за процессами: как работают сотрудники, какими услугами пользуются водители и с какими проблемами чаще всего сталкиваются.
Наблюдения помогли нам сделать общие выводы о сервисе, но нужно было конкретизировать. Для этого говорили с реальными людьми, узнавали что нравится в заправках, почему иногда выбирают другие АЗС, у каких компаний заправляются, участвуют ли в программе лояльности.
Сначала общались с друзьями-водителями и таксистами. Потом опубликовали пост в Facebook с просьбой ответить на несколько наших вопросов. Откликов пришло так много, что через пару дней пост даже пришлось удалить — у нас на тот момент не было ресурсов для обработки такого количества обратной связи.
С помощью интервью мы проверили гипотезы. Какие-то фичи отпали — общение показало, что у пользователей таких проблем нет. А всё, что подтвердилось, забрали в дальнейшую работу.
В ходе исследования мы выяснили, что люди по-разному используют заправки во время коротких и длительных поездок. В коротких поездках, например, из дома на работу, водителям важно как можно скорее заправиться. В длительных поездках на дачу или в другие города люди готовы больше времени проводить на заправке, так как хотят немного отдохнуть и размяться. По итогам исследования описали два утрированных собирательных образа: ИТ-специалист, который каждый день добирается на работу, и мама с двумя детьми, которая ездит на выходных на дачу.
Особенности коротких и длительных поездок разложили в виде Customer Journey Map — это помогло понять, чем отличаются запросы водителей, когда они едут по знакомому маршруту до работы и когда выезжают в соседние города.
С помощью CJM получилось найти важные разрывы в клиентском опыте. Например, люди отмечали, что нужное им топливо на заправке может закончиться, и тогда об этом оповещают, вешая табличку на заправке. Но не всегда её видно издалека, поэтому водитель теряет время, заезжая на АЗС. В новой версии приложения клиент сразу видит, есть ли его топливо на нужной заправке. Заезжать не нужно.
Дальше на совместном воркшопе с командой клиента обсудили результаты исследований и проблемы, которые возникают у людей при краткосрочных и длительных поездках. На второй части воркшопа разбились на две команды и сгенерировали идеи, как мы можем исправить существующие проблемы. Затем всё собрали в один список и отскорили с помощью модели RICE. Выделили фичи, которые делаем в первую очередь, а остальное оставили на следующие релизы.
После этого мы перепроектировали структуру приложения с учётом новых вводных и подготовили прототип из вайрфреймов, на основе которого разработали новый интерфейс приложения «Нефтьмагистрали».
Обновлённая «Нефтьмагистраль»: персонализированный главный экран, понятная система лояльности, дизайн-мэтч с заправками и новые возможности
По итогу аналитики стало понятно, что во время коротких и длинных поездок у людей разные запросы.
Для быстрого путешествия главное — заправиться и оплатить заправку без промедлений, а ещё при ежедневных поездках чаще пользуются бонусной системой.
А для долгих — построить маршрут до АЗК, посмотреть информацию по незнакомой заправке: какой есть бензин и ресторан. Всё это учли в новом приложении.
Первое изменение — главный экран. Раньше в приложении была карта области с заправками. Но исследование показало, что используют её только автомобилисты, которые едут далеко и по незнакомому маршруту, а также водители коммерческого транспорта.
Поэтому в новом интерфейсе экран подстраивается под пользователя: авторизован человек или нет, разрешил ли он доступ к геопозиции и насколько близко он находится к заправке.
Если пользователь зашёл в свой профиль и находится на заправке, он видит свои бонусы и информацию по конкретному АЗК.
Совсем карта из приложения не пропала: если водитель в дороге, то на стартовом экране он видит ближайшую заправку.
«На всех заправках разные акции и рестораны»
Мы изучили результаты исследования, которое проводила для «Нефтьмагистрали» компания LabBee. Они выяснили, что 84% водителей заправляются раз в неделю или чаще, причем чем чаще, тем важнее для клиентов наличие ресторана. Для нас это означало, что в приложении важно рассказать о типах ресторанов и их режиме работы, сроках действия и подробных условиях акций.
Изменения коснулись отображения условий программы лояльности и акций. В первой версии приложения из-за универсального отображения акций с разными условиями не все клиенты могли в них сориентироваться.
Я тоже водитель. Когда началась работа над «Нефтьмагистралью», я поставила себе приложение и стала заезжать на АЗК постоянно. В какой-то момент я накопила на хот-дог в подарок. Но на той заправке, куда мы приехали, их не было, там продавалась только пицца. Оказалось, что на разных АЗК работают разные рестораны, от этого и зависит представленное меню. Я на себе почувствовала, как могут расстроиться другие клиенты, но благодаря этому опыту поняла, как важно максимально прозрачно описать все условия акций для каждой заправки.
В обновленном приложении на главном экране отображаются только те предложения, которые действуют на той АЗК, на которой сейчас находится человек. Мы добавили информацию о сроке и времени действия предложения. А если водитель приезжает к окончанию акции, он узнает об этом по уведомлению «Осталось 5 минут». Все акции по-прежнему можно посмотреть в специальном разделе.
Вариантов предложений оказалось действительно много: фишки, накопления, подарки и т. д. Поскольку разработка приложения была на стороне «Нефтьмагистрали» и стартовала после того, как мы закончили работу над дизайном, мы составили подробный UI-kit для технической команды с описанием всех краевых состояний элементов.
Детально описали систему стилей, как работает конструктор акций, показали, как выбирать цвет для фона и готовить иллюстрации к публикации.
Мы сделали ставку на персонализацию пользовательского опыта, чтобы мобильное устройство и бэкенд «думали» за человека и показывали ему релевантную информацию. Следующим шагом должна стать персонализация контента и интерфейса. Для этого нужно собрать данные о предпочтениях пользователей и показывать каждому водителю именно те акции, которые ему понравятся. А после этого можно перейти к индивидуально спроектированным акциям. Наш интерфейс поддерживает такую возможность. Мы проработали конструктор акций, с помощью которого можно собрать практически любую комбинацию условий. Дело за накоплением данных о поведении и предпочтениях пользователей для разработки модели и обучения ИИ.
«Непонятно, как копить и тратить бонусы»
Водители не понимали, как долго хранятся бонусы, когда они сгорают и как происходит переход на следующий уровень в программе лояльности.
Пользователи расстраивались, когда бонусы сгорали. Чтобы решить это, в новом приложении добавили историю начисления и сгорания бонусов. За неделю до сгорания в приложении выводится баннер с сообщением о том, что скоро возможность исчезнет. Ещё добавили информацию о статусе в следующем месяце, ведь он зависел от суммы заправок в текущем, и подробно описали, как получить и на что потратить бонусы.
Еще один важный инструмент в приложении — QR-код. Если его отсканировать на кассе, система узнает водителя и начислит ему бонусные баллы.
При проектировании новой версии приложения мы исправили ещё ряд проблем с юзабилити. Например, выбор любимого топлива был спрятан в «личных данных» — там, где пользователи, скорее всего, ожидают увидеть ФИО, телефон и e-mail. Люди не так часто редактируют свои данные, поэтому вряд ли скоро дойдут до этого экрана.
В новой «Нефтьмагистрали» добавление топлива «вытащили» из личных данных и поставили на заметное место. Но почему важно, чтобы функция была на виду? В деталях по заправке любимое топливо всегда ставится на первое место, так можно понять, есть ли на этой АЗС то, что тебе нужно, или надо ехать на другую заправку.
Ещё мы показываем подсказку «здесь нет вашего любимого топлива». Люди чаще всего заправляются одним видом и расстраиваются, когда приезжают на заправку, а его там нет. Например, бензин АИ-100 мало где есть даже в Москве. Поэтому лучше предупредить, чтобы человек не тратил время на заезд.
Или ещё пример: дизайнер Даша Князева поехала в гости в Реутов и хотела посмотреть, есть ли заправка «Нефтьмагистрали» по дороге. Но сделать этого не удалось, потому что поиск в старом приложении искал заправки только по названию или точному адресу. «Полечить» этот момент можно только при доработке бэкенда, а пока мы спроектировали в дизайне, как должен работать такой сценарий.
Если на самой заправке что-то шло не так, пользователи приложения не всегда понимали, как быстрее всего решить проблему. И чаще всего писали отзывы о работе компании в целом в отзывах о приложении в App Store и Google Play. Это негативно влияло на рейтинг приложения, которое в ряде случаев было совсем ни при чём, и сообщение о проблеме не сразу доходило по адресу. Поэтому мы предложили переместить обратную связь о заправке из профиля пользователя прямо на экран АЗК — туда, где пользователи вероятнее всего будут её искать.
Такой рейтинг позволяет менеджерам «Нефтьмагистрали» оперативно реагировать на негативные комментарии и улучшать работу своих сервисов до того, как возмущенные пользователи поставят оценки в сторах.
До обновлений в интерфейсе было много красного цвета, который обычно используют для ошибок и уведомлений. Кроме этого, в длинных текстах внутри приложения не было заголовков и подзаголовков, что ухудшало читаемость. В новом интерфейсе минимум красного (только для самого важного), а в тексте появились акценты.
Что касается общего визуального стиля, команда клиента хотела сделать приложение современным и стильным, стать примером для подражания в своей сфере. Мы сделали два подхода к решению этой задачи.
Сперва мы решили попробовать неоморфизм, потому что во время предварительного обсуждения именно этот стиль больше всего понравился клиенту. Мы уточнили у разработчиков реализуемость и отрисовали несколько основных экранов. Однако в информационно нагруженном приложении с этим стилем было крайне нелегко работать — декоративные элементы создавали визуальный шум.
А ещё мы показали свои наработки дизайн-команде red_mad_robot на «Смотрине» — еженедельной внутренней встрече дизайнеров. И ребята подсказали, что это, хоть и выглядит интересно, но не ассоциируется с «Нефтьмагистралью». Мы решили взять тайм-аут на неделю и всё переделали. В работе над второй версией мы вдохновлялись тем, как выглядят заправки «Нефтьмагистрали» днём и ночью. Обновлённую концепцию утвердили с клиентом с первого раза.
Для нового стиля мы взяли логотип и фирменные цвета из брендбука «Нефтьмагистрали», а также повторили ломаные линии, которые используются в оформлении заправок.
Команда «Нефтьмагистрали» не раз подчеркивала, что заправки светятся в ночи и привлекают внимание, словно казино в Лас-Вегасе. Едешь по дороге ночью, и тут возникают яркие неоновые контуры. Поэтому мы решили добавить в дизайн приложения яркие акценты.
Тема Лас-Вегаса прослеживается и в акциях. Например, люди, получившие золотой статус в программе лояльности, могут раз в месяц покрутить «Колесо фортуны» и получить гарантированный приз. Эта акция пользовалась большой популярностью, поэтому в новом приложении она тоже есть, мы только перерисовали «Колесо» в новом стиле.
Команда «Нефтьмагистрали» дала нам свободу в выборе шрифта. Мы поэкспериментировали и в итоге остановились на шрифте Futura PT. Линии букв «м», «и» и цифры «4» в нём отлично сочетаются с линиями в интерфейсе.
Было интересно поработать с шрифтом Futura, поскольку он не самый популярный для интерфейса. Чаще всего используют нативные шрифты платформ: Roboto для Android и San Francisco для iOS. Это позволяет сэкономить на покупке лицензии, но дизайн приложений теряет часть индивидуальности. Futura — это гротеск, созданный немецким дизайнером Паулем Реннером в 20-х годах 20-го века. В этом шрифте довольно длинные выносные элементы. Дело в том, что в немецком языке существительные пишутся с большой буквы, в словах часто встречаются буквы «t», «f», «l» и другие «высокие» символы, поэтому длинные выносные элементы позволяют людям быстрее считывать форму буквы и слова. Из-за длинных выносных элементов приходится делать довольно большой интерлиньяж — расстояние между строками. В русском языке слова, содержащие буквы с выносными элементами, встречаются намного реже, но интерлиньяж приходится сохранять довольно большим. Из-за этого кегль шрифта кажется мельче, чем он есть на самом деле. Стандартные платформенные шрифты хорошо смотрятся в интерфейсе в 13–14 кегле, в случае с Futura PT для основного текста мы использовали 17 кегль с межстрочным интервалом 20.
Ещё важный элемент визуального дизайна цифровых продуктов — иконки. Они должны подходить к шрифту, поскольку часто используются рядом с текстом. Мы отрисовали сет из иконок двух типов: первый используется рядом с текстом, набранным обычным начертанием Futura PT, второй — рядом с жирным. Мы сохранили характерные черты штриха шрифта в иконках: острые углы и прямоугольные окончания линий.
Может показаться странным, но чуть ли не дольше всего мы работали над пинами на карте — их утвердили только на последней встрече. Были варианты с классическими метками и стилизованными логотипами Нефтьмагистрали. В итоге остановились на компромиссном варианте: пин с логотипом.
Дизайнеры проработали несколько вариантов иконки для приложения «Нефтьмагистрали» и остановились на тёмном. Он выгодно выделяется на фоне иконок конкурентов и популярных приложений.
Иллюстрации делают веселее даже самые скучные экраны с ошибками. Чтобы они аккуратно дополнили визуальный стиль приложения, мы решили ограничиться тремя цветами: чёрным, белым и красным. А сами иллюстрации собирать из простых геометрических форм.
Что в итоге
На основе исследования мы спроектировали новую структуру приложения, создали новый, современный дизайн, который учитывает планы развития приложения от программы лояльности к сервису «все в одном»: заправиться, помыться, поесть. Это поможет водителям экономить время, быстро и безопасно получать все услуги через приложение, а «Нефтьмагистрали» — реализовать стратегию развития компании.
Дизайн приложения «Нефтьмагистраль» был признан лучшим на премии Tagline Awards 2021 в категории «Лучшее приложение для услуги».
Благодарим команду «Нефтьмагистрали» за помощь и поддержку!
Приложение доступно на AppStore и GooglePlay.
Детальный, хороший кейс. Спасибо, приятно читать : )
Реально крутой редизайн, побольше бы таких примеров
Редко настолько заморачиваются с переработкой.
Добавлю пару моментов.
Открывать приложение лучше на одном экране. В движении вместо привычного главного экрана открывшаяся карта смутит человека, даже если карта и нужна была.
В описании заправки указывать, если съезжать к ней надо заранее. При том указать заметно, чтобы в дороге сразу увидел. Нужно на МКАДе, где заправка на дублёре, а съезд на него за несколько сотен метров до заправки (к примеру, газовая на юго-западе. Давно в Москве не был, но вроде там съезд на дублёр вне зоны видимости самой заправки).
Спасибо!
Классный кейс, с удовольствием прочитал
Молодцы что так подошли к этому делу, сразу видно что хочет фирма и к чему стремится
Только вчера заехал на заправку был подарочный кофе который действует 1 день, хотел его приобрести и вуаля на кассе сказали приложение не работает) а дизайн гуд.
Приложение вообще работает без нареканий , но разрабатывали его не Роботы конечно 🤷♂️
Да, мы только редизайном занимались. Нефтьмагистраль разрабатывали приложение потом без нас. К сожалению, команды разработки ещё не было, когда мы работали над макетами. Поэтому не все ограничения удалось выявить заранее. В идеале, конечно, дизайн и разработка должны идти параллельно, чтобы можно было учесть все подводные камни.