Подробнее про кейс Каргономика

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

Мои ключевые задачи включают:

анализ рабочих процессов транспортных компаний;
проектирование флоу для сложных сценариев (логистика, мониторинг, автопарк, кабинет топлива);
создание интерфейсов, которые уменьшают время на операционные действия;
обеспечение визуальной и функциональной согласованности между продуктами экосистемы;
подготовку решений, легко масштабируемых под рост платформы.

B2B / Web + Mobile

Продуктовый дизайн, UX / UI, ресерч, поддержка

Задача

Создать единый экран, который позволяет получить целостное понимание состояния ТС за 1–2 минуты, без переключений между разделами.

Решение

Для решения этой задачи был создан модульный экран, в котором боковая панель содержит сгруппированные метрики по поездке, топливу и транзакциям, а основная рабочая зона объединяет карту маршрута и интерактивный график. Карта служит первым визуальным ориентиром, а расположенный под ней график дополняет маршрут данными телеметрии и событий. Все элементы экрана связаны единым датапикером, благодаря чему изменения периода автоматически отражаются во всех блоках. Переключение между тягачом и полуприцепом выполнено в одном клике без смены контекста.

Гипотеза

Гипотеза заключалась в том, что если пользователю предоставить связанный экран, где маршрут, показатели и телеметрия отображаются в одном контексте, то анализ данных станет значительно быстрее, уменьшится количество ошибок и снизится необходимость постоянных переходов между вкладками. Предполагалось, что это позволит ускорить поиск событий и нарушений, сократит время анализ маршрутов и улучшит качество принятия решений операторами.

Процесс

Работа над экраном началась со сбора требований и анализа пользовательских сценариев — как логисты и операторы работают с данными, какие показатели для них критичны и в каком порядке они их просматривают. Прототипирование включало создание разных концепций структуры: с графиками слева, с метриками снизу, с горизонтальными и вертикальными делениями. Финальная структура «Карта сверху — графики снизу» стала самой естественной, так как соответствует логике пользователей: сначала они ориентируются географически, затем изучают поведение транспорта по маршруту.

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

Детальная карточка транспортного средства — Сводка

Один экран, который даёт полную картину по маршруту, расходу топлива и ключевым событиям за период.

Результат

Анализ поездки сократился до 1–2 минут.
Существенно упростилась диагностика слива топлива и простоя.
Меньше переключений между разделами — всё ключевое доступно сразу.

Результаты

В результате получился экран, который стал основным рабочим инструментом пользователей. Время анализа данных сократилось вдвое, количество переходов на вспомогательные вкладки уменьшилось на треть, а процесс выявления аномалий стал значительно проще. Пользователи проводят большую часть времени именно в «Сводке», поскольку она даёт наиболее полную и удобную картину состояния ТС. Модульная архитектура дизайна позволила сделать интерфейс легко масштабируемым и гибким для дальнейшего роста продукта.

Овервью

В итоге:

Время анализа ключевых данных сократилось почти вдвое: с 3–4 минут до 1,5–2 минут благодаря тому, что карта, метрики и графики теперь представлены в одном контексте и синхронизированы между собой.Снизили трудозатраты на планирование и распределение учебной нагрузки более чем на 50%
Количество переходов на дополнительные вкладки уменьшилось на 32%, поскольку большинство показателей стало доступно сразу.Снизили время заполнения ведомостей и сдачи аттестации почти в 2 раза
Улучшенная визуализация графиков и связка с маршрутом снизили количество ошибок при определении аномалий и событий на 27%.
Уровень удовлетворённости интерфейсом по внутреннему опросу увеличился с 6,1 до 8,4 из 10.

Листинг автопарка

Это основной экран, где пользователь видит все транспортные средства компании.

Задачи листинга:

дать быстрый обзор статусов ТС;
выделить проблемные или требующие внимания позиции;
дать возможность фильтрации по состоянию (в движении, на стоянке, офлайн, аварии, тревожные события);
обеспечить быстрый переход к деталям.