Система мониторинга контейнеров по всему миру

(Web-сервисы)
ОтрасльТРАНСПОРТ, ЛОГИСТИКА, КОНТЕЙНЕРНЫЕ ПЕРЕВОЗКИ
УслугаЛИЧНЫЙ КАБИНЕТ, REACT, FRONTEND, API
ПлощадьЛК клиента · мониторинг перевозок
Год2022

TFL

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

  • Сжатые сроки: сохранили существующий бэкенд, сфокусировались на дизайне и frontend; много интерактивных сценариев
  • Аналитика legacy-приложения сотрудника: функции, данные, приоритеты для клиентского приложения
  • Дизайн по корпоративному гайдбуку: прототипы → компоненты и макеты; ревью арт-директора на этапах
  • Интеграция с API бэкенда, масштабируемая архитектура, кэширование запросов к серверу
  • Централизованная дизайн-система под бренд; выкладки на тестовый стенд малыми итерациями
  • Интерактивная статистика, таблицы перевозок с поиском и настройкой столбцов
  • Карточка перевозки: контейнеры и документы; обратная связь по завершённым рейсам; раздел инструкций

Ключевые задачи:

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

Аналитика: функции, данные и приоритеты

CODE 1.618 проанализировали текущее приложение сотрудника TFL, выделили ключевые функции и отображаемые данные. Собрали требования к клиентскому приложению и расставили приоритеты. Работали гибко: при необходимости быстро переключали фокус задач. Раньше клиенты получали сведения о перевозках и контейнерах только через менеджеров — по телефону и мессенджерам, по электронной почте.

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

Разработка: API, кэширование, дизайн-система

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

После появления API существующего бэкенда сразу начали разработку frontend. Заложили масштабируемую архитектуру под будущие фичи относительно исходного дизайна — это ускорило внедрение новых возможностей. Добавили кэширование обращений к серверу для быстрой выдачи данных и загрузки страниц. Собрали централизованную дизайн-систему по гайдбуку заказчика. Изменения выкатывали небольшими порциями на тестовый стенд, затем — на боевой контур заказчика. Поэтапно переносим процессы в удобный личный кабинет. Реализовали интерактивную страницу статистики: клиент видит, сколько грузов сейчас в пути к нему, и может быстро перейти к нужным перевозкам. В таблице — кастомизация столбцов и поиск; в карточке перевозки — данные по каждому контейнеру и документы. Форма обратной связи отправляет оценку по завершённому рейсу руководству. Отдельно подготовили понятные инструкции для перехода на новый сервис.

Результаты

1 000

перевозок в месяц

350

пользователей

70

оценок работы за месяц

25 000

тонн грузов в месяц

×5

ускорение оформления заявки

60

часов в месяц сэкономили каждому менеджеру

Технологии

  • React
  • Redux
  • RTK
  • Yup

Статистика: грузы в пути

Таблица перевозок: столбцы и поиск

Профиль перевозки: контейнеры и документы

Обратная связь по завершённой перевозке

Инструкции для клиентов