Дизайн интерфейса логистического ПО: аналитика, отслеживание грузов и личный кабинет

- Разработать UI-kit для системы.

- Создать локальные компоненты для MVP.

- Спроектировать окна мониторинга объектов и взаимодействие с картой объектов.

- Разработать окна для формирования и истории отчетов.

- Внедрить систему уведомлений, обеспечивающую точное отслеживание критических ситуаций.

- Продумать поведение виджетов в интерфейсе, чтобы исключить случайное скрытие важных элементов.

- Создать универсальные шаблоны отчетов с возможностью кастомизации.

- Проработать флоу настроек ПО, включая добавление транспорта с предварительным аудитом.

- Разработать флоу авторизации с учетом corner-кейсов восстановления пароля и потери доступа к аккаунту.

Дизайн интерфейса ПО: ретроспектива

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

1. Собрали референсы сервисов со схожим функционалом и тех, где пользователь может кастомизировать интерфейс для удобства работы. В этот список вошли как сервисы, близкие по теме, такие как Яндекс Карты и Flightradar, так и менее очевидные, например, TradingView и CoinGlass. Это помогло нам найти новые подходы к персонализации и улучшению пользовательского опыта.

2. Звонок Nice to meet you и старт работы с заказчиком. Уточнили ключевые требования проекта, определили, на чем нужно сделать акцент. Обсудили проблемы пользователей, которые работают с интерфейсом, узнали реальные сценарии использования сервиса и учли пожелания заказчика по дизайну интерфейса.

3. За сутки подготовили три концепта дизайн интерфейса. Один из них был сразу принят для детальной проработки и дальнейшего развития.

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

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

Разработка основного функционала

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

Для удобства использовали визуальные маркеры, которые помогают выявлять критические ситуации с грузом и отклонения метрик от нормы.

Добавили удобные инструменты для быстрого взаимодействия с таблицей. Теперь можно легко сортировать данные, искать нужный транспорт, составлять отчёты по выбранному транспорту, вызывать графики по метрикам и просматривать маршруты, которые уже были пройдены.

Также доступен функционал для построения графиков, отображения маршрута и создания отчета по выбранному объекту.

Мы детально проработали карту с отображением транспорта и добавили дополнительные возможности для взаимодействия. Добавили в карту функции измерения расстояния, смены виджета карты и создания геозон.

Внедрили шаблонизатор отчётов для предустановленных данных на новый транспорт. Также теперь можно создавать отчеты с индивидуальными параметрами.

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

Добавили функцию предварительного просмотра отчета.

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

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

Система уведомлений

Она позволяет не пропустить критические значения. Самые важные уведомления нельзя скрыть или проигнорировать — их можно только прочитать или удалить вручную. Это гарантирует, что оператор всегда обратит внимание на важные события и сможет вовремя принять необходимые меры.

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

Разработали авторизацию и и corner-кейсы восстановления пароля и потери доступа к аккаунту.

Подготовили дизайн интерфейса раньше срока и получили респект и классный отзыв заказчика.