Все истории
Electrolux «Оптоклуб Ряды»
Корпоративный сайт

Личный кабинет оператора железнодорожных перевозок

Личный кабинет оператора железнодорожных перевозок
Задать вопрос по проекту

«Первая грузовая компания» (ПГК) — самая крупная частная организация в сфере железнодорожных перевозок в России.

Во время перемещения поезда из одной точки в другую клиент хочет знать:

  • Где находятся вагоны
  • Когда они приедут
  • Что происходит с грузом прямо сейчас

Ему важно получать информацию своевременно и в полном объеме.

Эти данные отображаются в личном кабинете пользователя в онлайн-системе ПГК.

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

Рассказываем, как «1С-Битрикс: Управление сайтом» помог обновить кабинет, оптимизировать его работу и расширить опции для пользователей.


О заказчике


Первая грузовая компания основана в 2007 году.

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

Региональная сеть представлена филиалами в 14 городах России: от Санкт-Петербурга до Владивостока, международная — в Казахстане и Финляндии.

Среди клиентов: крупные компании «Лукойл», НЛМК, «Роснефть», «Северсталь», СУЭК и представители малого и среднего бизнеса. В 2018 году грузооборот компании достиг 289 млрд тонно-километров. Чистая прибыль по МСФО составила 26,6 млрд рублей.


О ситуации


Раньше в компании были два личных кабинета.

  • Первый — СИОК (система информационного обслуживания клиентов) — разработка одного из филиалов ПГК, которой пользовался региональный пул грузовладельцев
  • Второй — дополненная версия первого, которая требовала существенных переработок

Обычно клиент имел доступ одновременно к двум площадкам — переключаться между ними было неудобно.

Недостатки старых личных кабинетов:

  • Несовременный дизайн: мелкий шрифт, нефункциональные фильтры, «скученные» элементы
  • Медленная работа — это признавали все: от технических специалистов ПГК до клиентов
  • Нестабильность и высокая нагрузка на внутренние ресурсы компании. Многочисленные запросы из личного кабинета обращались напрямую в базы. Бесконечные очереди снижали стабильность системы
  • Ограниченные данные по каждому вагону. В личный кабинет попадала только информация по дислокации и точкам отправления и назначения
  • Неполные сведения. Клиент видел лишь те перевозки, где сам выступал получателем или отправителем. Системы не учитывали новые роли: заказчика и плательщика, которые не участвуют непосредственно в перевозке.

Во время более подробного анализа ИТ-специалисты обнаружили неочевидные бреши:

  • Архитектура интеграции личного кабинета с внутренними системами ПГК
    Не было кэширующей базы данных, запросы дублировались в разных разделах
  • Аналитика использования личных кабинетов
    Отсутствовала статистика: что популярно у клиентов, что стоит развивать на основе интересов пользователей, где и что им непонятно в интерфейсах
  • Тяжелая и медленная адаптивная версия старого кабинета
    Клиент с трудом обрабатывал данные через браузер мобильного устройства. Встал вопрос об отдельном приложении для смартфонов

Руководство компании решило с нуля разработать современный сервис «Одно окно» для клиентов.



Задачи


Новый личный кабинет должен:

  • Быть легким, простым, лаконичным
  • Стать единым информационным пространством для клиентов и менеджеров компании
  • Содержать актуальные данные по всем перевозкам в режиме 24/7
  • Обладать высокой отзывчивостью и скоростью работы
  • Заменить менеджеров в вопросах об отчетах по дислокации вагонов, информации о финансах и тарифах

Выбор платформы


Старые личные кабинеты были на платформе «1С-Битрикс: Управление сайтом», фреймворк jQuery и работали с удаленным сервером по SOAP в синхронном режиме.

pgk1.png

Для нового личного кабинета оставили «1С-Битрикс».

Критерии выбора:

  • Надежность решения
  • Обширный функционал
  • Гибкое масштабирование

Разработчики добавили к платформе кэширующий сервер на Node.js с системой очередей и микросервисным подходом и использовали базу данных MongoDB, фреймфорк vue.js.


pgk2.png


Ход работ


Проектом занялась ИТ-компания «Ареал».

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

«Фактически от нас требовалось стать технологами ж/д перевозок. За короткий срок мы должны были погрузиться в отрасль и выучить матчасть:

  • Какие из 50 параметров вагона приоритетны для клиента
  • Какие отчеты они запрашивают у менеджеров
  • Как строится жизненный цикл одной перевозки и в какой точке наблюдаются «провалы»
  • За какими показателями клиенты следят и что оставляют на своей стороне
  • Какой терминологией пользуется каждый менеджер при беседе с заказчиком
  • Насколько эти слова понятны клиенту»
МАРИЯ КРЮКОВА
МЕНЕДЖЕР ПРОЕКТОВ ИНТЕРАКТИВНОГО АГЕНТСТВА «АРЕАЛ»

Решения


Техническое оснащение

Хранение информации

Логика старой версии: один пользователь — один клиент.

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

При проектировании нового хранилища и сервера разработчики заложили хранение данных по компаниям. Теперь пользователь кабинета — именно клиент ПГК, юридическое лицо. И не важно – один, пять или десять человек от одной организации работают под учетной записью. Обращение к системе ПГК проходит один раз — показывает данные конкретной компании.

Кэширование

«Запрос обрабатывается» — первое, что видел пользователь после авторизации в старом личном кабинете. Любой переход в другой раздел сопровождался получением свежих данных. Иногда это занимало до 20 секунд для каждого запроса, пока не срабатывал таймаут. Экран в этот момент был заблокирован, пользователь долго ждал загрузки данных.

pgk3.png

Разработчики внедрили кэширование с настройкой срока жизни — сколько времени эту информацию считать актуальной.

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

Частота обновления

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

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

Раньше эта разница не учитывалась, и внутренние базы компании были перегружены без повода.

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

Разгрузочные сервисыСкорость ответа баз ПГК снижалась в пиковое рабочее время. За актуальными данными обращались не только клиенты из двух личных кабинетов, но и сотрудники грузовой компании. Информация была нужна всем и одновременно.

Проблему разработчики решили двумя способами:

  1. Сервис обновления по расписанию
    Снижает нагрузку на базы в пик активности. Система заранее, к предполагаемому моменту посещения, обновляет данные личного кабинета без участия пользователя.
    Для «утренних» клиентов сервис автоматически в 6:00 загружает баланс и дислокацию вагонов. В 9:00, когда рабочий день начинается, клиент видит свежие данные из кэширующей базы. Обновление по расписанию возможно несколько раз за день. Это удобно для филиалов ПГК из разных часовых поясов.
  2. Сервис очередей
    Избавляет от неуправляемой многопоточности запросов. Если первый способ назначит обновление одновременно 100+ компаниям, то объем операций может «повесить» системы. Сервис очередей делит массу запросов на «партии» и поочередно отправляет каждую партию.


Вид в окне

Поиск визуальной концепции

На старте команда «Ареал» определилась со стилистикой будущих макетов и подготовила мудборды.

Разработку дизайна разбили на этапы.

Первый — формирование портретов пользователей. Быстрая настройка Яндекс.Метрики и Google.Analytics помогла получить от прежних версий личных кабинетов стартовую аналитику.

Разработчики узнали демографию и характеристики клиентов. Ключевые показатели: 68% пользователей — мужчины, 81% – в возрасте до 44 лет.

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

Второй этап — библиотека из 190 референсов. Команда «Ареал» собрала и разделила их на группы по уровню сочности и стилю элементов.

На выходе команда представила три мудборда для пользователей с разным опытом и настроением. Брендбук ПГК положил в основу концепций уровни прожарки мяса: well-done, middle и rare.

Остановились на варианте rare — легкий, прозрачный, с небольшими цветовыми акцентами.

Выбранная стилистика легла в основу первых системообразующих макетов проекта.


pgk7.png

Атомарный дизайн

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

Для создания такой дизайн-системы команда «Ареал» применила принцип атомарного дизайна: первые макеты разобрали до атомов, самых маленьких единиц, а новые страницы строили по правилу «от меньшего к большему».


pgk8.png

Этот принцип применяется и в верстке. «Атомы» собраны в отдельной папке. Из них собирается в единый шаблон конкретный интерфейс. Таким образом достигается унифицированный вид и поведение одного и того же элемента, кнопки или иконки среди десятков страниц площадки.

Удобства и сервис

В первый этап проекта вошли два наиболее востребованных у клиентов функциональных раздела: «Дислокация» и «Договоры» Рестарт указанных блоков снимает нагрузку с менеджеров ПГК. На этом же этапе обновили вспомогательные — «Справочники» и «Помощь».

Дислокация

Раздел помогает клиенту ответить на вопросы: «Где мой вагон?» и «Что с ним происходит?».

Разработчики заново спроектировали его:

  • Добавили страницу «Погрузка/выгрузка»
  • Создали новые «фишки»
  • И запустили в эксплуатацию

pgk9.png

Фильтрация в списке вагонов

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

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

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


pgk10.png

В новом решении появились фильтры для каждой колонки:

  • Для числовых значений можно задать диапазон
  • Для текстовых — искать по символам
  • Для списков — выбрать готовые варианты

Теперь клиент может сортировать, перемещать, расширять и сужать колонки. Система запомнит настройки пользователя на конкретной странице и в следующий раз воспроизведет в том же виде.

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

Новые типы фильтров сделали инструмент гибким. Теперь в списке можно «налету» строить выборки вагонов с множеством условий одновременно.

Группировка данных

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

Пользователю приходилось выгружать ее в файл и уже в Excel работать с данными.

Разработчики учли этот момент и добавили в новую таблицу группировку вагонов по поездам и станциям. Теперь достаточно нажать на кнопку «Сгруппировать» и выборка из тысячи элементов рассортируется по выбранному признаку.

Сохранение фильтров поиска

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

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

В новом личном кабинете раздел «Поиск и слежение» стал единым окном клиента — для поиска и для работы с сохраненными фильтрами.


pgk11.png

Механизм запоминает все 50+ настроек фильтрации. Пользователь не тратит времени на повторный выбор исчезнувших параметров.

Сохраненные фильтры находятся прямо на странице списка вагонов в отдельном виджете. Их можно удалять, копировать, перемещать по приоритетам.

Информер количества вагонов по сохраненному фильтру позволяет клиенту оценить ситуацию без применения параметров поиска. Раньше пользователь мог ежедневно обращаться к менеджеру за отчетом по данным, которых не было в старых кабинетах. Новый механизм позволяет ему сгенерировать любой отчет без помощи сотрудника ПГК даже для объема свыше 20 000 вагонов.


pgk12.png

Рассылки-оповещения

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

В старом кабинете рассылка имела ограничения:

  • Отчеты предоставлялись только один раз в день
  • Время доставки исключительно московское: 8:00, 12:00, 16:00 или 20:00
  • Генерация каждой отправки создавала отдельный запрос к базам ПГК

Разработчики изменили архитектуру сбора данных для рассылки и сняли ограничения:

  • Теперь пользователь сам задает удобное время и частоту получения писем в зависимости от часового пояса
  • Список вагонов для любого отчета формируется из кэширующей базы

Чтобы настройки и включение рассылки было в «шаговой» доступности – активировались в один клик, разработчики создали виджет сохраненных фильтров. Где пользователь ищет вагоны — там сохраняет фильтры и подключает по ним рассылку.

Благодаря этому личным кабинетом начали пользоваться клиенты из Сибири и Дальнего Востока.

Зарождение дашборда

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

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

Первый появился в «Ближнем подходе». Он показывает количество вагонов, прогноз их прибытия по дням. В виджете предусмотрен развернутый вид данных: порожние вагоны за день раскладываются по родам подвижного состава, а полные — по названию грузов в них.

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

  • Обеспечивает транспорт
  • Готовит груз, место на складе
  • Организует погрузо-разгрузочные работы у вагона

pgk13.png

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

Чтобы предостеречь клиента ПГК от подобных санкций, разработчики сделали новую страницу «Погрузка/выгрузка» — использовали графический виджет.

Вагоны делятся на три группы по критичности простоя:

  • Сверх установленной нормы
  • У которых отсчет начнется завтра
  • У которых лимит нормативного простоя еще не исчерпан

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


pgk14.png

Эксперты ПГК поддержали идею графического представления данных. Она нашла продолжение при проектировании новой главной страницы личного кабинета — единого дашборда. На нем разработчики собрали виджеты из самых важных для клиента показателей.

Договоры

Второй по значимости раздел личного кабинета. Здесь пользователь работает со списком активных и архивных договоров с ПГК.

Наиболее важная информация:

  • Баланс
  • Контакты куратора от ПГК
  • Даты действия договора
  • История платежей

Клиент должен понимать — есть ли финансовая гарантия подачи вагона и с кем связаться в спорной ситуации.


pgk15.png

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

В новом кабинете разработчики развели договоры по вкладкам — по типам услуг: аренда или экспедирование. Модернизировали карточки: отобразили ключевые параметры и ввели цветовую индикацию состояния баланса.

Клиенты с большим количеством договоров теперь легко переключаются с карточек на табличный вид списка и выбирают удобное отображение.

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


pgk16.png

Справочники

В транспортных документах строгие требования к указанию названий и кодов станций, наименованию перевозимых грузов. Клиент ПГК обязан следовать этим правилам. Сориентироваться в терминах и определениях в личном кабинете ему помогают «Справочник станций» и «Справочник грузов».

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

В новом личном кабинете разработчики добавили несколько типов фильтрации по справочникам. К поисковому полю по трем символам добавили фильтр по дорогам и первой букве — когда пользователь помнит от названия станции только начальную «к». Для справочника грузов сделали фильтр по группам.


pgk17.png

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

Помощь

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

  • Раздел со статьями, инструкциями, контактами поддержки и возможностью оценить пользу

pgk18.png

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

pgk19.png

Мобильное приложение


Руководство ПГК хотело, чтобы клиенты видели и понимали ситуацию с грузами с любого устройства.

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

Поэтому вторым продуктом цифровой системы «ПГК Онлайн» стало мобильное приложение. Оно не перегружает пользователя лишними данными, не вынуждает работать со сложными таблицами и фильтрами с маленького экрана.

Осталось только самое нужное:

  • Значимые показатели грузовой работы
  • Поиск вагонов
  • Готовые фильтры-отчеты

Дополнительно клиент в смартфоне может запросить стоимость перевозки по конкретному маршруту.


pgk20.png

Приложение быстро стало популярным. За полгода с момента анонсирования в версиях на iOS и Android появились 464 активных пользователя.

«Команде нужно было выстроить с филиалами позитивное сотрудничество, учесть их наработки в новом проекте, а активных представителей сделать адвокатами новой системы. В нашем случае таким стал Ярославский филиал ПГК. Работа над обширной системой невозможна с отдельными контактными лицами. Требовалась рабочая группа из разных отделов компании, со своим взглядом на конкретный вопрос. У ПГК группа экспертов была подобрана. Это позволило оставаться проекту в динамике и находить новые идеи».

ПАВЕЛ МЕЛДАЖИС
РУКОВОДИТЕЛЬ ГРУППЫ КОРПОРАТИВНЫХ РЕШЕНИЙ ИНТЕРАКТИВНОГО АГЕНТСТВА «АРЕАЛ»

«Наличие предыдущих разработок имеет 2 особенности.

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

С другой стороны, это груз ответственности: твой проект должен стать успешнее и лучше, чем было ранее. И это надо доказывать. Дизайном, структурой кабинета, доступностью функционала, скоростью реакции системы. А в финале — положительными отзывами реальных пользователей».

ЮРИЙ СПИРИДОНОВ
ИСПОЛНИТЕЛЬНЫЙ ДИРЕКТОР ИНТЕРАКТИВНОГО АГЕНТСТВА «АРЕАЛ»

О разработчике


Интерактивное агентство «Ареал» основано в 2003 году.

Компания разрабатывает:

  • Сайты, порталы, магазины
  • Интранет, веб-интеграции, CRM
  • Приложения для Android и iOS

Занимается продвижением в интернете, поддержкой и развитием проектов.

Среди клиентов: Komatsu, Фонд развития Дальнего Востока, STADA, девелопер «Лидер-Инвест», Объединенная авиастроительная корпорация, РФПИ, страховая компания «Ренессанс Жизнь», Ортека», дилерский центр Hyundai, международный бренд KOTON и другие клиенты.

Входит в ключевые рейтинги отрасли: Tagline, CMS Magazine, Ruward, Рэйтинг Рунета, AdIndex, SEO News, Tadviser.


Результаты

Презентация нового личного кабинета сотрудникам ПГК стала первой проверкой системы. Через онлайн-тренинги прошли 130 менеджеров компании, разработчики получили более 100 комментариев и новых идей для развития кабинета.

Главным итогом тренингов стал вопрос — «Когда я могу подключить клиента к системе?»

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

Новой версией пользуются 646 клиентов — более 80% остались довольны.


pgk21.png

Запуск личного кабинета анонсировали на международной выставке TransRussia-2019.

Похожие решения