Личный кабинет клиента Первой Грузовой Компании

1. Вводная задача от заказчика, проблематика, цели

Первая грузовая компания (ПГК) — крупнейший частный оператор грузовых железнодорожных перевозок в России. Региональная сеть компании представлена филиалами в 14 городах России: от Санкт-Петербурга до Владивостока, международная – в Казахстане и совместным предприятием в Финляндии. Среди клиентов — флагманы отечественной промышленности и добывающей отрасли: Лукойл, НЛМК, Роснефть, Северсталь, СУЭК — представители малого и среднего бизнеса.

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

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

Что требовало изменений по мнению ПГК

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

На что обратили внимание мы

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

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

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

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

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

Мария Крюкова

менеджер проекта, Ареал

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

• какие из 50 параметров вагона приоритетны для клиента;
• какие отчеты клиенты запрашивают у менеджеров;
• как строится цикл жизни одной перевозки и в какой точке цикла «провалы»;
• за какими показателями клиенты следят и что считают на своей стороне;
• какой терминологией пользуется каждый менеджер со своим клиентом;
• насколько термины понятны клиенту.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

Хранение данных

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

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

Кэширование данных

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

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

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

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

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

Разгрузочные сервисы

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

Проблему нагрузки на базы мы решили двумя новыми сервисами:

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

Платформа и технологии

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

Новое решение: 1С-Битрикс, кэширующий сервер на Node.js с системой очередей и микросервисным подходом, база данных MongoDB, фреймфорк vue.js.

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

Работы по дизайну мы начали с выработки стилистики будущих макетов и подготовки мудбордов.

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

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

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

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

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

На основе выбранной стилистики появились первые, системообразующие макеты проекта.

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

Когда финальные макеты первого спринта были готовы, мы сделали остановку.

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

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

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

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

Дислокация

Раздел помогает клиенту ответить на вопросы «где мой вагон?» и «что с ним происходит?». Мы заново спроектировали раздел, добавили новую страницу «Погрузка\выгрузка», создали новые «фишки» и запустили в эксплуатацию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Информер количества вагонов по сохраненному фильтру позволяет клиенту оценить ситуацию без применения параметров поиска.

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

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

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

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

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

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

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

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

Кабинет начал расти в географии, стали активнее подключать клиентов из Сибири и Дальнего Востока.

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

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

Мы предложили ПГК превратить простой табличный трекинг в инструмент контроля перевозок с помощью графиков и показателей. Для этого разработали виджеты визуальной мини-аналитики для наиболее важных разделов.

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

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

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

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

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

• количество вагонов со сверхнормативным простоем;
• количество вагонов, у которых отсчет сверхнормативного простоя начнется завтра;
• количество вагонов, у которых лимит нормативного простоя еще не исчерпан.

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

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

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

Договоры

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

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

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

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

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

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

Справочники

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

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

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

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

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

Помощь

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

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

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

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

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

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

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

Павел Мелдажис

руководитель группы корпоративных решений, Ареал

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

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

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

Юрий Спиридонов

исполнительный директор, Ареал

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

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

Демо-просмотр личного кабинета без регистрации

Промо-сайт проекта