Редизайн
Лукойл B2C App

Редизайн
Лукойл B2C App

Редизайн
Лукойл B2C App

Редизайн
Лукойл B2C App

Редизайн мобильного приложения B2C Лукойл

UX-метрики и выявленные проблемы

UX-метрики и выявленные проблемы

Конверсия сценария удалённой заправки составляла 27%, при этом 40% пользователей всё равно переходили к оплате на кассе. Среднее время выполнения — 2 минуты 45 секунд против 1:10 у конкурентов. Почти половина пользователей (47%) зависали на выборе АЗС и колонки, ещё 32% путались при выборе карты или способа оплаты. По отзывам, навигация была неочевидной, интерфейс перегружен, раздел «Акции» вызывал непонимание и имел низкий CTR — менее 3%.

Конверсия сценария удалённой заправки составляла 27%, при этом 40% пользователей всё равно переходили к оплате на кассе. Среднее время выполнения — 2 минуты 45 секунд против 1:10 у конкурентов. Почти половина пользователей (47%) зависали на выборе АЗС и колонки, ещё 32% путались при выборе карты или способа оплаты. По отзывам, навигация была неочевидной, интерфейс перегружен, раздел «Акции» вызывал непонимание и имел низкий CTR — менее 3%.

Конверсия сценария удалённой заправки составляла 27%, при этом 40% пользователей всё равно переходили к оплате на кассе. Среднее время выполнения — 2 минуты 45 секунд против 1:10 у конкурентов. Почти половина пользователей (47%) зависали на выборе АЗС и колонки, ещё 32% путались при выборе карты или способа оплаты. По отзывам, навигация была неочевидной, интерфейс перегружен, раздел «Акции» вызывал непонимание и имел низкий CTR — менее 3%.

Problem analysis

UXResearch

UX optimization

ProductDesign

Prototyping

Architecture

UI

UX

UX Copywriting

3D

Motion

Project management

Timings

Сontractors

UI-kit

User flow

Metrics

Android

IOS

Widgets

Design system

Lottie

JSON

Redesign

Цель

Повышение конверсии и сокращение
UX-разрывов

Повышение конверсии и сокращение UX-разрывов

Повышение конверсии и сокращение UX-разрывов

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

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

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

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

В процессе редизайна мобильного приложения я осознал важность фреймворка Jobs to Be Done (JTBD). Этот подход сместил мой фокус с простой доработки функций на понимание реальных целей, которые пользователи хотят достичь с помощью приложения.

1. Удалённая заправка из авто
Когда я подъезжаю к АЗС, я хочу заправиться прямо из машины через приложение, чтобы не выходить из авто, не стоять в очереди и оплатить быстро и безопасно.

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

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

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

5. Покупка товаров и сервисов ЛУКОЙЛ
Когда я нахожусь рядом с АЗС или в дороге, я хочу быстро найти и купить нужные товары или услуги — моторное масло, автохимию, ремонт или мойку — чтобы решить вопрос с обслуживанием машины в одном месте без лишних звонков и ожидания.

В процессе редизайна мобильного приложения я осознал важность фреймворка Jobs to Be Done (JTBD). Этот подход сместил мой фокус с простой доработки функций на понимание реальных целей, которые пользователи хотят достичь с помощью приложения.

1. Удалённая заправка из авто
Когда я подъезжаю к АЗС, я хочу заправиться прямо из машины через приложение, чтобы не выходить из авто, не стоять в очереди и оплатить быстро и безопасно.

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

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

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

5. Покупка товаров и сервисов ЛУКОЙЛ
Когда я нахожусь рядом с АЗС или в дороге, я хочу быстро найти и купить нужные товары или услуги — моторное масло, автохимию, ремонт или мойку — чтобы решить вопрос с обслуживанием машины в одном месте без лишних звонков и ожидания.

В процессе редизайна мобильного приложения я осознал важность фреймворка Jobs to Be Done (JTBD). Этот подход сместил мой фокус с простой доработки функций на понимание реальных целей, которые пользователи хотят достичь с помощью приложения.

1. Удалённая заправка из авто
Когда я подъезжаю к АЗС, я хочу заправиться прямо из машины через приложение, чтобы не выходить из авто, не стоять в очереди и оплатить быстро и безопасно.

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

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

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

5. Покупка товаров и сервисов ЛУКОЙЛ
Когда я нахожусь рядом с АЗС или в дороге, я хочу быстро найти и купить нужные товары или услуги — моторное масло, автохимию, ремонт или мойку — чтобы решить вопрос с обслуживанием машины в одном месте без лишних звонков и ожидания.

Роль прототипов в UX-дизайне мобильного приложения

Проектирование пользовательских сценариев

Проектирование пользовательских сценариев

Пример: я визуализировал сценарий удаленной заправки на АЗС в формате информационной архитектуры.

Это позволило лучше понять логику экранов и определить возможные направления изменений.

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

После итераций и корректировок прототипы позволили выстроить линейные и логичные флоу без лишних шагов. Это ускорило сценарии, снизило количество ошибок и дало уверенность, что финальный дизайн решает реальные UX-проблемы, подтверждённые данными.

Пора снова влюбить пользователей в наше приложение

Пора снова влюбить пользователей в наше приложение

Обновление UI приложения

Обновление UI приложения

Обновление UI началось с полной ревизии визуального слоя: я проанализировал существующий интерфейс, выделил перегруженные элементы и несоответствия. Опирался на гайдлайны iOS Human Interface Guidelines и Material Design, чтобы интерфейс был нативным и предсказуемым на обеих платформах.

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

UI (widgets, Lottie Json, 3D, Navigation)

Authorization

Stock

Widgets

Main screen

Gas station detail

Refueling at a gas station

Menu

Favorites

Operation history

Settings

News

Onboarding

About company

About the application

About

Polls

Gas station assessment

Gas station

Partners offer

Help

Guide

Lukoil products

Donate points

Screenshots for stores

Screens for stores

Splash screen

Qr code

Улучшение UX/UI и развитие продукта

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

  • Оптимизировал ключевые сценарии: регистрация, покупка, навигация — сократил среднее время выполнения задач на 25% и увеличил конверсию в целевых действиях на 15%.

  • Создал и внедрил новые UX-паттерны и визуальные элементы, повысив удовлетворённость пользователей (NPS) на 12%.

  • Провёл A/B и UX-тесты для проверки гипотез по улучшению интерфейса и функций приложения.

  • Спланировал дальнейшее развитие мобильного приложения: расширение функционала, адаптивный дизайн для новых платформ, интеграция с аналитикой и дизайн-системой.

Улучшение UX/UI и развитие продукта

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

  • Оптимизировал ключевые сценарии: регистрация, покупка, навигация — сократил среднее время выполнения задач на 25% и увеличил конверсию в целевых действиях на 15%.

  • Создал и внедрил новые UX-паттерны и визуальные элементы, повысив удовлетворённость пользователей (NPS) на 12%.

  • Провёл A/B и UX-тесты для проверки гипотез по улучшению интерфейса и функций приложения.

  • Спланировал дальнейшее развитие мобильного приложения: расширение функционала, адаптивный дизайн для новых платформ, интеграция с аналитикой и дизайн-системой.

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

  • Оптимизировал ключевые сценарии: регистрация, покупка, навигация — сократил среднее время выполнения задач на 25% и увеличил конверсию в целевых действиях на 15%.

  • Создал и внедрил новые UX-паттерны и визуальные элементы, повысив удовлетворённость пользователей (NPS) на 12%.

  • Провёл A/B и UX-тесты для проверки гипотез по улучшению интерфейса и функций приложения.

  • Спланировал дальнейшее развитие мобильного приложения: расширение функционала, адаптивный дизайн для новых платформ, интеграция с аналитикой и дизайн-системой.

Обновление UI приложения

Улучшение UX/UI и развитие продукта

Буду рад сотрудничеству

Напишите мне сообщение

Буду рад сотрудничеству

Напишите мне сообщение

Буду рад сотрудничеству

Напишите мне сообщение

Буду рад сотрудничеству

Напишите мне сообщение

Inspire × Create × Improve