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

Заказчик

В KOTELOV обратилась логистическая компания Telesense Technology с запросом разработать дизайн интерфейса телематической системы для отслеживания контейнеров.

Цель

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

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

Задачи

• Разработать UI-kit для системы.
• Создать локальные компоненты для MVP.
• Спроектировать окна мониторинга объектов и взаимодействие с картой объектов.
• Разработать окна для формирования и истории отчетов.
• Внедрить систему уведомлений, обеспечивающую точное отслеживание критических ситуаций.
• Продумать поведение виджетов в интерфейсе, чтобы исключить случайное скрытие важных элементов.
• Создать универсальные шаблоны отчетов с возможностью кастомизации.
• Проработать флоу настроек ПО, включая добавление транспорта с предварительным аудитом.
• Разработать флоу авторизации с учетом corner-кейсов восстановления пароля и потери доступа к аккаунту.

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

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

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

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

Через 24 часа — три готовых концепта

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

Первая задача — создание удобной кастомизации интерфейса под пользователя

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

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

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

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

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

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

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

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

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

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

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

Звонок с заказчиком: основной функционал и отчёты

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

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

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

Звонок с заказчиком: Обсуждение рендеринга отчета в физический мир

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

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

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

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

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

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

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

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

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

Можно изменять системные настройки и личного кабинета.

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

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