Светлана Першай · UX/UI
Проект 01 · RedFlag

Цифровая экосистема
безопасности грузоперевозок

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

Сроки · август 2018 – май 2021 Платформа · Mobile app + Web platform Домен · логистика, безопасность грузоперевозок
Инфографика supply chain: маршрут груза от владельца до получателя: 11 участников и 20 контрольных точек
Supply chain в реальности. Даже «простой» международный маршрут — это 11 участников и 20 контрольных точек: терминалы, порты, таможня, несколько логистических компаний.
01 · Контекст

Проверку делают люди
в поле и в офисе

RedFlag делает пломбы и замки, которые защищают груз в пути. Но работа разделена между полем и офисом. Водитель или инспектор проверяет транспорт и фиксирует доказательства, руководитель следит за пломбами, отправками и инцидентами.

Container Inspection App — отдельное мобильное приложение для регламентированных осмотров транспорта. Security Transit Management (STM) — отдельная web-платформа для управления пломбами, отправками, пользователями и событиями безопасности. У STM существует мобильная версия, но её макеты в этом кейсе не рассматриваются.

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

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

Полный цикл
на двух продуктах

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

Процессы и сценарииМоделирование процессов, пользовательские сценарии, информационная архитектура
ИнтерфейсыМобильные и веб-интерфейсы, интерактивные прототипы
Сложные состоянияФормы, таблицы, статусы, сценарии ошибок и отклонений
Визуальный языкИконографика, дизайн-система, макеты и сопровождение разработки

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

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

Об ограничениях кейса. Отдельного цикла интервью и юзабилити-тестов не было. Кейс показывает мобильный сценарий, архитектуру двух продуктов, работу с отклонениями и дизайн-систему; количественных выводов об удобстве здесь нет.
03 · Container Inspection App · Mobile

Цифровая инспекция
с обязательными доказательствами

Проблема

Водители и инспекторы на терминалах, складах и в портах осматривали транспорт по бумажным чек-листам. Пункт можно было пропустить, а по отметке на бумаге нельзя было проверить, как выглядел объект, кто нашёл повреждение и что произошло дальше.

Решение

Инспекцию собрала в последовательный мобильный сценарий:

Сущности мобильного приложения

Карта относится только к Container Inspection App. Пользователь выбирает шаблон, проходит обязательные шаги, фиксирует результат и при необходимости добавляет фото с комментарием. После завершения формируется отчёт, а данные синхронизируются.

Карта сущностей Container Inspection App: пользователь, локация, объект, шаблон, инспекция, шаг, результат, проблема, фото, комментарий, отчёт и синхронизация
Карта сущностей Container Inspection App

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

У каждой роли свой маршрут: водитель проверяет транспорт перед отправлением, инспектор фиксирует нарушения, приёмка подтверждает состояние при передаче, руководитель следит за незакрытыми проверками и отклонениями. Результаты собираются в общей истории инспекций.

После инспекции видно, кто её проходил, где это происходило, какие шаги были выполнены и какие проблемы нашли.
Пользовательский сценарий Container Inspection App: авторизация, выбор объекта и шаблона, прохождение шагов, фиксация проблемы, завершение и синхронизация
User Flow инспекции
Стартовый экран Container Inspection: выбор номера и типа объекта, синхронизация данных
Старт Inspection: выбор объекта и синхронизация
Шаг 1: инспекция ходовой части — схема вагона, чек-лист с кнопками OK / Problem
Шаг инспекции: схема + чек-лист
Шаг 2: наружные двери, фото объекта, отмеченная проблема с комментарием и вложениями
Зафиксированная проблема в шаге
Основной мобильный flow. Прогресс по обязательным шагам: каждый пункт сводится к однозначному выбору OK / Problem. Пропустить важный этап случайно нельзя.
Экран фиксации проблемы: заметка и добавление фотографий
Фиксация проблемы: заметка + фото
Экран фиксации проблемы с шестью прикреплёнными фотографиями дефекта
Фотодоказательства дефекта
Как фиксируется отклонение. В отчёт попадают описание, фотографии, место, время и исполнитель.
04 · Security Transit Management (STM) · Web

Сквозное управление
грузом и пломбами

STM — облачная система учёта и контроля пломб, отправок и событий безопасности. Каждая пломба связана с уникальным серийным номером, а действия с ней образуют проверяемую историю. Продукт поддерживает и мобильные платформы, но в портфолио ниже показана именно web-версия.

Проблема

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

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

Web-панель для офиса

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

Страница пломбы: контейнер, компания, временная линия действий Produce → Transfer → Receive, карта и комментарий к проблеме
Где именно возникла проблема? Таймлайн помогает быстро соориентироваться: каждое действие (produce, transfer, receive) получает статус, место и исполнителя. Для повреждённой пломбы открывается контекст инцидента: комментарий, фотографии, точка на карте.
Страница трансфера: маршрут Милуоки — Сьюдад-Хуарес на карте, отправитель и получатель, сводка приёмки, таблица пломб со статусами Problem / Lost
Трансфер груза целиком на одном экране. Маршрут A→B, стороны сделки, сводка приёмки с фотодоказательствами и таблица позиций со статусами: получено, потеряно, проблема.
Модальное окно приёмки: пометить контейнеры как Received, Lost или Problem с комментариями
Приёмка: статус каждой позиции — Lost / Received / Problem
Просмотр фотодоказательства: палета с коробками, время съёмки и часовой пояс
Фотодоказательство с меткой времени съёмки
Модальное окно комментария к проблеме при приёмке
Описание проблемы — обязательная часть события
Диалог подтверждения смены статуса: комментарий будет удалён
Защита от потери данных при смене статуса
Сценарии отклонений. При проблеме во время приёмки сохраняются комментарий, фото и подтверждение действия.
В STM остаётся вся история работы с грузом и пломбами на маршруте: кто, что, где и когда сделал.
05 · Дизайн-система

Один набор компонентов
на два продукта

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

Палитра
Primary#EC1F35
Primary 60%#F47986
Text#232323
BG footer#353535
Link hover#656565
Link grey 2#858585
Link grey#CCCCCC
Border dark#DDDDDD
Border light#EEEEEE
Input BG#F4F4F4
Статусы
Received In production Problem Lost Draft
Один компонент-плашка на все состояния пломбы и груза. Те же статусы — в таблицах, на карте трансфера и в истории пломбы.
Токены цвета. Названия рабочие, из библиотеки: разработчик берёт из макета готовое имя.
Кнопки: состояния и семантика
Состояние «обычное / наведение» для трёх функций: основное действие, нейтральное, промежуточный статус.
Поля
NameYour password
NameYour password
NameGuadalajara City
Заголовок раздела
Permissions
Двойное подчёркивание разной толщины: фирменный приём заголовков, он же встречается в шапках экранов Seal и Transfer.
Навигация
Верхняя и нижняя панели повторяют друг друга: на длинных таблицах пользователь не возвращается наверх за навигацией.
Пустое состояние
New skid
Create new skid to continue
Сотосяние пустого экрана подсказывает пользователю, какое действие открывает следующий шаг.
Библиотека компонентов. Кнопки, поля, статусы, панели навигации и карточки собраны один раз и разошлись по обоим продуктам. Компоненты выше воссозданы по исходной библиотеке.
P.S. Что бы я поменяла сейчас

Сейчас я бы развела бренд и статус на два оттенка. #EC1F35 оставила бы фирменным, а для проблемы использовала бы более глухой #D41B2F. Тогда изменение брендового цвета не затрагивало бы семантику ошибок.

color-brand#EC1F35
color-danger#D41B2F
06 · Результат

Два продукта
с общей моделью событий

Container Inspection App стандартизирует осмотр и доказательства, а STM Web управляет пломбами, отправками, доступами и расследованием событий.

Результаты полевых проверок попадают в офис через общую модель событий. При этом Inspection и STM остаются отдельными продуктами со своей архитектурой и сценариями.

инспекция → результат и доказательства → событие → офисная проверка и история

Общими остались правила фиксации событий и визуальные компоненты.

По истории событий можно восстановить, кто, где, когда и что делал с грузом.
Сайт продукта STM ↗
← Все работы Следующий кейс БаРС 2.0 · Университет ИТМО