Продуктовые
решения
Приложение B2C ЛУКОЙЛ
Как я улучшал сценарий удаленной заправки
Cтарый дизайн
Новый дизайн
Контекст
Польза для бизнеса
Оптимизация сценария удалённой заправки напрямую влияет на ключевые бизнес-показатели. Улучшение интерфейса и прозрачности процесса позволит снизить долю незавершённых заправок, увеличить количество повторных транзакций и среднюю частоту использования приложения. Удобный и понятный сценарий повышает доверие к цифровым сервисам ЛУКОЙЛ и снижает нагрузку на кассы АЗС.
Миссия для пользователя
Сделать процесс заправки без кассы максимально простым и предсказуемым: пользователь должен понимать, что происходит на каждом этапе — от выбора станции до завершения налива и начисления баллов. Никаких догадок, лишних действий или сомнений. Один сценарий — один чёткий поток.
Критерии успеха
Ключевые метрики, по которым можно оценить эффективность редизайна:
Снижение отказов на этапах сценария → меньше пользователей прерывают заправку до оплаты или во время ожидания.
Сокращение среднего времени прохождения сценария → интуитивная структура и ясные статусы уменьшают количество лишних действий.
Рост конверсии в успешную заправку → больше пользователей завершают процесс без кассы.
Увеличение доли повторных заправок через приложение → рост лояльности и привычки к цифровому сценарию.
Снижение нагрузки на кассы АЗС → меньше офлайн-оплат и очередей.
Вывод:
Основная причина проблем — отсутствие визуальной и процессной прозрачности. Пользователь не понимает, что происходит и на каком этапе он находится.
Выявление проблем
Продуктовая аналитика
Данные показали, что до 42% пользователей не доходили до оплаты, чаще всего — на шагах выбора АЗС и ввода параметров заправки. Среднее время сценария было в 1,7 раза дольше, чем у конкурентов. Это указывало на неочевидность и перегруженность процесса.
Обратная связь от пользователей и поддержки
Жалобы повторялись:
непонимание, когда начинается и заканчивается заправка;
ошибки при вводе номера колонки;
неясность, куда начисляются баллы;
трудности при выборе АЗС на карте.
Глубинные интервью и юзабилити-тесты
Интервью с пользователями и операторами АЗС подтвердили:
интерфейс вызывал недоверие и тревожность из-за переизбытка красного;
не хватало визуальной обратной связи и шагов сценария;
7 из 12 пользователей не заметили, что можно выбрать карту лояльности.
Анализ конкурентов
У Shell и BP процесс заправки выстроен пошагово с визуальными подсказками, у нас — статичная форма без ощущаемого прогресса.
Вывод:
Основная причина проблем — отсутствие визуальной и процессной прозрачности. Пользователь не понимает, что происходит и на каком этапе он находится.
Проблемы сценария, требующие решения
1
Устаревший
интерфейс
Недостаточная визуальная иерархия, ошибки в типографике делали экран перегруженным. Элементы конкурировали между собой, внимание рассеивалось, а навигация ощущалась запутанной
2
Непрозрачность
сценария
Приложение не показывало прогресс: пользователи не знали, сколько шагов осталось до завершения. Это снижало уверенность, и многие предпочитали идти на кассу
3
Ошибки при вводе номера колонки вручную
Пользователи часто ошибались при вводе, так как не было подсказок и валидации. В результате возникала путаница с колонками, приходилось перезапускать сценарий или обращаться к оператору
4
Разрывы
в UX
Логика действий между шагами не была последовательной: часть кнопок и подсказок вела к путанице. Пользователи сбивались с хода сценария и нередко покидали его, не завершив оплату
5
Неочевидность начисления баллов
После заправки пользователи не понимали, на какую карту лояльности будут начислены баллы. Отсутствие ясности вызывало сомнения в корректности работы программы и снижало мотивацию
6
Переизбыток
красного цвета
Интерфейс выглядел тревожным — доминирующий красный цвет воспринимался как сигнал об ошибке. Это снижало доверие и вызывало стресс даже при штатной работе сценария
7
Ошибки при выборе
АЗС на карте
Отсутствие изображений и визуальных маркеров делало выбор станции неинтуитивным. Пользователи путались в списке, выбирали не ту АЗС и часто отказывались от сценария, опасаясь ошибиться
8
Отсутствие опции «Полный бак»
Пользователю приходилось вручную вводить сумму или литры, что требовало расчётов и отвлекало от процесса. Это создавало неудобства и провоцировало очереди на АЗС
Примеры флоу до редизайна
Проблема ввода данных
В существующем сценарии удалённой заправки выбор номера колонки был реализован через обычное поле ввода. Пользователь должен был вручную вводить цифры, что создавало высокий риск ошибок, особенно в условиях ограниченного времени и внешних факторов — когда водитель уже стоит на АЗС. При этом система не проверяла актуальность колонок и не сообщала, если какая-то из них не работает. Это вызывало путаницу, перезапуски сценария и недоверие к цифровому процессу.
На основе анализа обращений в поддержку и поведения пользователей я понял, что взаимодействие с колонками требует визуального и контекстного упрощения. Более логичным решением стало бы заменить ручной ввод на компактные интерактивные кнопки с номерами колонок, которые динамически обновляются на основе данных от АЗС. Такой подход устраняет ошибки, сокращает время выбора и делает сценарий интуитивным, повышая доверие к цифровому процессу заправки и стимулируя пользователей чаще использовать приложение вместо кассы.
Топливный калькулятор
В существующем сценарии удалённой заправки был реализован только топливный калькулятор, основанный на ручном вводе числовых значений. Пользователь должен был самостоятельно пересчитывать литры в рубли или наоборот, что требовало внимания и создавало риск ошибок. Для большинства водителей, которые просто хотят быстро заправить свой легковой автомобиль, это выглядело избыточно и неудобно.
Более интуитивным решением стало бы добавить предустановленные объёмы — например, 10, 20, 30, 40, 50 или 60 литров — с возможностью выбрать «полный бак» одним касанием. Это позволило бы сократить сценарий, убрать необходимость расчётов и сделать процесс ближе к привычному поведению пользователя на АЗС. Дополнительно следовало улучшить читаемость подсказок о возврате средств, чтобы снять тревожность и повысить доверие к удалённой оплате.
UI, типографика и визуальные акценты
В старом дизайне сценария удалённой заправки пользователи сталкивались с нарушенной визуальной иерархией и слабой типографикой. Отсутствие чётких акцентов и последовательности в размерах шрифтов приводило к тому, что человек зависал на каждом экране, пытаясь понять, где основное действие, а где второстепенное. Контрастность текста не соответствовала базовым принципам accessibility — особенно на экране оплаты, где шрифты сливались с фоном и затрудняли чтение. В результате пользователи тратили больше времени на осмысление интерфейса, чем на саму заправку.
Дополнительные проблемы создавали мелкие и нечитаемые пины на карте АЗС, а также несогласованность в размере и стиле кнопок. Кнопки первичного и вторичного действия не имели чёткой визуальной разницы, из-за чего пользователь не понимал, где находится ключевая точка взаимодействия. Ситуацию усугубляло чрезмерное использование красного цвета — он визуально «перетягивал» внимание, создавая ощущение тревожности и мешая сфокусироваться на важных шагах сценария.
Бенчмаркинг
В рамках бенчмаркинга я проанализировал решения четырёх прямых конкурентов — Нефтьмагистраль, Татнефть и Газпромнефть. Основное внимание уделялось тому, как реализованы сценарии безналичной заправки, визуальная обратная связь и ощущение контроля у пользователя. На всех платформах прослеживался единый паттерн — пошаговый сценарий с чётко обозначенным прогрессом, визуальными подтверждениями и акцентом на безопасности транзакции. Цветовые схемы у конкурентов нейтральные, с акцентом на CTA-элементы и информативные статусы, что помогает пользователю чувствовать уверенность на каждом шаге.
Помимо прямых аналогов, я изучил и смежные цифровые сервисы — Яндекс Драйв, Ситимобил, Тинькофф и Сбербанк Онлайн. Из их решений были выделены паттерны, повышающие доверие и удобство: понятная визуальная иерархия, предсказуемая структура экранов и моментальная обратная связь при оплате. Эти находки легли в основу редизайна сценария удалённой заправки, где ключевой целью стало сокращение когнитивной нагрузки и повышение прозрачности процесса.
