С помощью CJM получилось найти важные разрывы в клиентском опыте. Например, люди отмечали, что нужное им топливо на заправке может закончиться, и тогда об этом оповещают, вешая табличку на заправке. Но не всегда её видно издалека, поэтому водитель теряет время, заезжая на АЗС. В новой версии приложения клиент сразу видит, есть ли его топливо на нужной заправке. Заезжать не нужно.
Дальше на совместном воркшопе с командой клиента обсудили результаты исследований и проблемы, которые возникают у людей при краткосрочных и длительных поездках. На второй части воркшопа разбились на две команды и сгенерировали идеи, как мы можем исправить существующие проблемы. Затем всё собрали в один список и отскорили с помощью модели RICE. Выделили фичи, которые делаем в первую очередь, а остальное оставили на следующие релизы.
После этого мы перепроектировали структуру приложения с учётом новых вводных и подготовили прототип из вайрфреймов, на основе которого разработали новый интерфейс приложения «Нефтьмагистрали».
По итогу аналитики стало понятно, что во время коротких и длинных поездок у людей разные запросы.
Для быстрого путешествия главное — заправиться и оплатить заправку без промедлений, а ещё при ежедневных поездках чаще пользуются бонусной системой.
А для долгих — построить маршрут до АЗК, посмотреть информацию по незнакомой заправке: какой есть бензин и ресторан. Всё это учли в новом приложении.
Первое изменение — главный экран. Раньше в приложении была карта области с заправками. Но исследование показало, что используют её только автомобилисты, которые едут далеко и по незнакомому маршруту, а также водители коммерческого транспорта.
Поэтому в новом интерфейсе экран подстраивается под пользователя: авторизован человек или нет, разрешил ли он доступ к геопозиции и насколько близко он находится к заправке.
Если пользователь зашёл в свой профиль и находится на заправке, он видит свои бонусы и информацию по конкретному АЗК.
Совсем карта из приложения не пропала: если водитель в дороге, то на стартовом экране он видит ближайшую заправку.
«На всех заправках разные акции и рестораны»
Мы изучили результаты исследования, которое проводила для «Нефтьмагистрали» компания LabBee. Они выяснили, что 84% водителей заправляются раз в неделю или чаще, причем чем чаще, тем важнее для клиентов наличие ресторана. Для нас это означало, что в приложении важно рассказать о типах ресторанов и их режиме работы, сроках действия и подробных условиях акций.
Изменения коснулись отображения условий программы лояльности и акций. В первой версии приложения из-за универсального отображения акций с разными условиями не все клиенты могли в них сориентироваться.
Я тоже водитель. Когда началась работа над «Нефтьмагистралью», я поставила себе приложение и стала заезжать на АЗК постоянно. В какой-то момент я накопила на хот-дог в подарок. Но на той заправке, куда мы приехали, их не было, там продавалась только пицца. Оказалось, что на разных АЗК работают разные рестораны, от этого и зависит представленное меню. Я на себе почувствовала, как могут расстроиться другие клиенты, но благодаря этому опыту поняла, как важно максимально прозрачно описать все условия акций для каждой заправки.
Даша Князева, старший дизайнер red_mad_robot
В обновленном приложении на главном экране отображаются только те предложения, которые действуют на той АЗК, на которой сейчас находится человек. Мы добавили информацию о сроке и времени действия предложения. А если водитель приезжает к окончанию акции, он узнает об этом по уведомлению «Осталось 5 минут». Все акции по-прежнему можно посмотреть в специальном разделе.
Вариантов предложений оказалось действительно много: фишки, накопления, подарки и т. д. Поскольку разработка приложения была на стороне «Нефтьмагистрали» и стартовала после того, как мы закончили работу над дизайном, мы составили подробный UI-kit для технической команды с описанием всех краевых состояний элементов.
Детально описали систему стилей, как работает конструктор акций, показали, как выбирать цвет для фона и готовить иллюстрации к публикации.
Мы сделали ставку на персонализацию пользовательского опыта, чтобы мобильное устройство и бэкенд «думали» за человека и показывали ему релевантную информацию. Следующим шагом должна стать персонализация контента и интерфейса. Для этого нужно собрать данные о предпочтениях пользователей и показывать каждому водителю именно те акции, которые ему понравятся. А после этого можно перейти к индивидуально спроектированным акциям. Наш интерфейс поддерживает такую возможность. Мы проработали конструктор акций, с помощью которого можно собрать практически любую комбинацию условий. Дело за накоплением данных о поведении и предпочтениях пользователей для разработки модели и обучения ИИ.
Оля Сартакова, дизайн-директор red_mad_robot
«Непонятно, как копить и тратить бонусы»
Водители не понимали, как долго хранятся бонусы, когда они сгорают и как происходит переход на следующий уровень в программе лояльности.
Пользователи расстраивались, когда бонусы сгорали. Чтобы решить это, в новом приложении добавили историю начисления и сгорания бонусов. За неделю до сгорания в приложении выводится баннер с сообщением о том, что скоро возможность исчезнет. Ещё добавили информацию о статусе в следующем месяце, ведь он зависел от суммы заправок в текущем, и подробно описали, как получить и на что потратить бонусы.
Даша Князева, старший дизайнер red_mad_robot
Еще один важный инструмент в приложении — 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
Ещё важный элемент визуального дизайна цифровых продуктов — иконки. Они должны подходить к шрифту, поскольку часто используются рядом с текстом. Мы отрисовали сет из иконок двух типов: первый используется рядом с текстом, набранным обычным начертанием Futura PT, второй — рядом с жирным. Мы сохранили характерные черты штриха шрифта в иконках: острые углы и прямоугольные окончания линий.
Может показаться странным, но чуть ли не дольше всего мы работали над пинами на карте — их утвердили только на последней встрече. Были варианты с классическими метками и стилизованными логотипами Нефтьмагистрали. В итоге остановились на компромиссном варианте: пин с логотипом.
Оля Сартакова, дизайн-директор red_mad_robot
Дизайнеры проработали несколько вариантов иконки для приложения «Нефтьмагистрали» и остановились на тёмном. Он выгодно выделяется на фоне иконок конкурентов и популярных приложений.
Иллюстрации делают веселее даже самые скучные экраны с ошибками. Чтобы они аккуратно дополнили визуальный стиль приложения, мы решили ограничиться тремя цветами: чёрным, белым и красным. А сами иллюстрации собирать из простых геометрических форм.
Загрузка...
