Перезапуск личного кабинета MY.FESCO. Редизайн, обновление технологического стека и архитектуры

Заказчик:

FESCO

Руководитель проекта со стороны заказчика

Михаил Семин

Директор департамента информационных технологий

Поставщик

Ареал

Год завершения проекта

2022

Сроки выполнения проекта

Январь, 2020 - Ноябрь, 2022

Масштаб проекта

7000 человеко-часов

Цели

Упростить процессы заключения договора, получения ставок, оформления и оплаты заказов.
Информировать клиента о критичных точках перевозки и передвижения груза. Предоставить клиенту информацию о прогнозируемых сроках прибытия груза.
Упростить переписку между клиентом и менеджером и исключить из неё обсуждение шаблонных процессов.
Предоставить клиенту круглосуточный доступ к информации о его перевозках.
Снизить влияние человеческого фактора (как со стороны клиента, так и со стороны компании) на рабочие процессы.
Оптимизировать процессы.

Уникальность проекта

Личный кабинет FESCO — передовой e-com продукт в сфере контейнерных грузоперевозок. ЛК FESCO помогает клиенту заключить договор на перевозку сухих универсальных контейнеров, рассчитать ставку от пункта отправления до пункта назначения, разместить заявку онлайн и получить все закрывающие и транспортные документы после завершения перевозки.

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

Использованное ПО

Frontend:

— Vue.JS
— Node.JS (BFF)
— UI kit FESCO на базе библиотеки компонентов Vuetify

Backend:

— Node.JS (NestJS, TypeScript, JavaScript)
— PostgreSQL
— Elasticsearch
— RabbitMQ, Kafka, Redis
— Keycloak

DevOps:

— Kubernetes, Docker
— CI/CD, Git
— Graylog, Grafana
— Zabbix, Okmeter

Docs&Metrics:

— Swagger
— Vuepress
— SonarQube, Sentry
— PowerBI

Mobile:

— Swift 5.5
— Kotlin
— WebView

Сложность реализации

— Короткий срок разработки нового frontend-а — 6 месяцев, порядка 4000 часов. Параллельно разрабатывался дизайн новых интерфейсов.

— Поддержка старого и нового frontend-а вплоть до момента отключения старого функционала. Было важно обеспечить переход на новую систему без остановки и нарушения бизнес-процессов, с сохранностью работоспособности ЛК. Переключение проходило в несколько этапов, чтобы пользователи успели плавно ознакомиться и привыкнуть к новой рабочей среде. По этим причинам требовалась поддержка двух версий.

— Сложность редизайна и реализации из-за вариативности. Например, тип заявки может измениться на ходу. То есть поля в рамках одного шага зависят друг от друга и меняют структуру и суть дальнейшей формы.

Описание проекта

FESCO — крупнейшая частная транспортно-логистическая компания с активами в сфере портового, железнодорожного и интегрированного логистического бизнеса. FESCO эксплуатирует 10 тыс. единиц подвижного состава. В управлении Группы находится более 100 000 TEU.
Основой для перезагрузки личного кабинета MY.FESCO стал аудит текущего состояния системы и исследование мировых Best Practice.

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

Второй шаг — изменение архитектуры и технологий. MY FESCO работает по принципам модульности и микросервисов:

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

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

Третий шаг — наращивание функций и переработка старых. Сейчас личный кабинет MY FESCO позволяет клиентам:

Рассчитать, сравнить ставку. Калькулятор выдает все возможные конфигурации сегментов перевозки. Можно выбрать вариант door-to-door. Оформление транзитной декларации также учитывается при расчете. Авто плечо рассчитывается через интеграцию с TMS ФескоТранс.
Подать заявку. Сейчас реализованы разные типы заявок, включая экспорт, импорт, внутрироссийские перевозки, каботаж, с авто плечом или без, с выбором температурного режима или сухие контейнеры. Форма заявки разбита на шаги. Заказ услуг таможенного оформления (ТТ, ГТД) осуществляется в один клик. Расчет общей стоимости заявки обновляется динамически.
Отследить ход исполнения заявки. Страница детальной заявки стала центром взаимодействия клиента с FESCO. В ней отображается актуальное местонахождение груза и плановые сроки доставки, подтягиваются все перевозочные и бухгалтерские документы, подсвечиваются проблемные точки. Повторить предыдущую заявку можно в пару кликов.
Оформить таможенный транзит. Декларация формируется автоматически на основе загруженного пакета документов. Клиенту приходят уведомления о статусе прохождения процедуры.
Вернуть порожние контейнеры. Инструкция формируется автоматически. Клиент может сам выбрать доступный, не перегруженный терминал для возврата. Приходят уведомления о возврате контейнера.
Заключить договор. Достаточно указать ИНН и система сформирует договор, отправит на нужную цепочку согласования с учетом формата подписания (бумага, ЭДО).
Настроить уведомления. Клиент сам выбирает типы уведомлений и каналы доставки (Телеграм, push в мобильном приложении, e-mail и уведомление в ЛК).
Настроить права доступа. В личном кабинете реализована разветвленная структура ролей. Для каждого сотрудника можно определить свой уровень доступа, зоны ответственности. Управление списком сотрудников происходит непосредственно в кабинете с помощью мастер-учетки.

Система задокументирована с разных сторон: пользователя, администратора и разработчика. Собранная информация помогает найти ответы на вопросы (FESCO help доступно всем пользователям кабинета), а разработчику масштабировать команду.

Отдельно выделен блок со стандартизированным API для возможности общаться с платформой в формате АСУ-АСУ.

Четвертый шаг — запуск мобильного приложения. Клиент из приложения рассчитывает ставку и отправляет заявку, следит за дислокацией и процессом согласования договора. Приложение гибридное — часть реализована по технологии WebView, часть нативно (Swift 5.5, Kotlin).

Приложение MY.FESCO доступно для скачивания в App Store и Google Play.

Результаты перезапуска личного кабинета MY.FESCO:

Срок заключение типового договора сократился до трех дней.
61% договоров заключены через MY.FESCO за 2022 год.
Сотрудники FESCO существенно экономят время на рутинных процессах.
Приложение скачали более тысячи раз.
Универсальные компоненты UI Kit обеспечивают визуальное единство бренда FESCO.
Личный кабинет стал стержнем, обеспечивающим сквозной клиентский бизнес-процесс перевозки на всех сегментах.

География проекта

Россия, Казахстан, Беларусь, Узбекистан, Монголия, Китай, Корея, Япония, Юго - Восточная Азия, Европа.

Дополнительные презентации: