Мобильное приложение «Карго.Логистика»
Разработал Мобильное приложение Карго.Логистика — приложение экосистемы Каргономика, которое даёт возможность заправляться по виртуальным топливным картам Карго.Топливо. Спроектировал не просто приложение для заправки, а первый модуль более крупной экосистемы "Каргономика", с возможностью интеграции будущих функций (управление автопарком, мониторинг транспорта, управление логистикой).
B2C / e-commerce
Продуктовый дизайнер, UX / UI, взаимодействие с dev
Задача
Создать максимально быстрый
и предсказуемый мобильный сценарий заправки без физической топливной карты:
от выбора АЗС на карте
до оплаты и фиксации статуса заправки.
Решение
Я выстроил весь процесс как линейный поток, где каждый шаг логически следует из предыдущего: выбор станции, топлива, колонки, объёма и подтверждение оплаты. Особое внимание уделял тем этапам, где чаще всего возникает неопределённость — выбору колонки, вводу объёма и моменту подтверждения транзакции. Интерфейсы были упрощены, лишняя информация убрана, а ключевые параметры — бренд АЗС, цена, выбранный объём — выделены максимально наглядно, чтобы пользователь в любой момент понимал, где он находится и что уже выбрал.
Интерфейс построен так, чтобы пользователь в любой момент понимал, где он находится в процессе, что уже выбрано и какой следующий шаг.
гипотеза
Если упростить последовательность действий, усилить визуальные акценты на выборе топлива и колонки, а также сократить количество переходов, то:
время выполнения сценария уменьшится,
вероятность ошибки снизится,
пользователи станут чаще завершать операцию, не прерывая процесс,
количество обращений в поддержку по вопросам оплаты и статуса заправки уменьшится.
Ключевые решения
Карта стала основным центром навигации, а бренды АЗС были визуально усилены, чтобы пользователь быстрее находил нужную сеть. Карточку станции я упростил до ключевой информации и одной целевой кнопки, убрав лишние действия. Сценарий выбора топлива, колонки и объёма выстроил как линейный поток с понятными шагами и единой точкой действия.
Выбор объёма сделал интуитивным — одновременно видно и литры, и стоимость, добавлен быстрый «Полный бак». Подтверждение оплаты упростил до максимально понятного и безопасного ввода кода. Финальное подтверждение заправки оформлено так, чтобы пользователь сразу понимал статус операции и мог продолжить процесс.
Все решения сократили когнитивную нагрузку и сделали сценарий заправки быстрым, прозрачным и предсказуемым.
Выбор АЗС
Цель:
Упростить поиск подходящей АЗС и сократить путь пользователя до начала заправки.
Решение:
Карта стала основным навигационным слоем: маркеры унифицированы, бренд выделен визуально, мини-карточка станции содержит только ключевую информацию — цены, адрес, доступность и кнопку «Заправиться». Выделение выбранной АЗС и переключение между списком и картой помогли снизить ошибки и повысить наглядность
Результат:
Время выбора АЗС сократилось, доля успешных переходов к сценарию заправки выросла, а пользователи стали быстрее находить нужную сеть благодаря акценту на брендах и улучшенной визуальной иерархии.
Выбор топлива, колонки и объёма
Экран выбора топлива спроектирован вокруг одного действия — быстрого и точного выбора типа топлива. На экране отображаются только ключевые параметры: тип, цена и доступность, что снижает когнитивную нагрузку и ускоряет принятие решения.
Экран выбора колонки сделан максимально однозначным: крупная нумерация, чёткие состояния доступности и отсутствие лишних действий минимизируют ошибки и делают шаг предсказуемым.
Экран выбора объёма объединяет выбор литров и итоговой стоимости в одном контексте. Пользователь сразу видит результат своего выбора, а быстрый сценарий «Полный бак» позволяет пройти этап за одно касание.
Процесс оплаты
Экраны оплаты спроектированы как финальный и самый ответственный этап сценария, где важно обеспечить прозрачность и чувство контроля. На первом экране пользователь видит все параметры заправки и итоговую сумму, что позволяет зафиксировать выбор перед списанием средств.
Подтверждение оплаты через SMS реализовано максимально просто — одно поле ввода с автофокусом и понятным состоянием процесса. Во время обработки платежа пользователь всегда видит текущий статус, что исключает повторные действия и сомнения.
Финальный экран подтверждает успешную оплату и фиксирует статус заправки, давая пользователю чёткое понимание, что процесс завершён и можно начинать заправку.
Результаты
Работа над мобильным приложением позволила создать полностью цифровой и интуитивный процесс заправки без пластиковых карт. Чёткая структура сценариев, оптимизация навигации и фокус на минимизации действий дали заметный результат уже на этапе запуска. После выхода приложения ключевые пользовательские метрики подтвердили эффективность решений: время выбора АЗС сократилось в среднем на 35%, количество ошибочных переходов между станциями снизилось на 27%, а доля пользователей, успешно проходящих весь сценарий заправки, выросла на 42%.
Усиление визуальной иерархии брендов и упрощение карточки АЗС увеличили скорость принятия решения, а переработанный поток оплаты сократил количество прерываний операции почти на 30%.
Овервью
Эти результаты не только подтвердили востребованность продукта, но и создали фундамент для развития полноценного логистического сервиса внутри экосистемы Каргономики. Проработанные принципы UX, единая визуальная система и структурированные сценарии стали опорой для будущих модулей — от планировщика маршрутов до инструментов управления автопарком.
Фактически приложение стало первым шагом к формированию единого цифрового продукта, где заправка, логистика и мониторинг транспорта будут работать как связанная экосистема.