Система мониторинга контейнеров по всему миру
(Web-сервисы)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
Статистика: грузы в пути
Таблица перевозок: столбцы и поиск
Профиль перевозки: контейнеры и документы
Обратная связь по завершённой перевозке
Инструкции для клиентов
