«Личный кабинет» для логиста, а не для галочки

«Приветствую, коллеги! Меня зовут Дмитрий Баршев. В агентстве «Ареал» я отвечаю за дизайн интерфейсов и комфорт их использования. Выражаясь профессиональным языком, я UX/UI-дизайнер.

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

Для сравнения взяты «Личные кабинеты» компаний Maersk, CMA CGM, DP World, «ТрансКонтейнер», MSC, ПГК, ТП РЖД, Credo Trans и «Деловые Линии». Некоторые из них сейчас приостановили свою деятельность на территории России, но идеи клиентских сервисов остаются актуальными. Поводом для проведения сравнительного анализа стал проект по редизайну «Личного кабинета» MY.FESCO. Однако выводы и рекомендации, приводимые в этом кейсе, универсальны и могут быть применимы на практике многими компаниями.

Метод и критерии сравнения

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

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

Отобрать, какие именно интерфейсы входят в этот список, помог опыт работы и общения ни с одной транспортной компанией, а также погруженность в отрасль.

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




Оценки выставлялись на основе возможностей и удобства интерфейса по шкале от 0 до 3. Ноль баллов выставлялось в том случае, если функций не было обнаружено. Один балл получал «Личный кабинет», в котором функция реализована, но плохо. Это означает, что при использовании встречаются барьеры, или функция не до конца решает задачу пользователя. Два балла присваивалось в том случае, если пользователь может решить проблему, не встречая препятствий. Три балла присваивалось лучшей практике среди исследуемых систем.

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

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

• Credo Trans получили 1 балл. Они решили задачу через подробные развернутые статьи с иллюстрациями. Это информативно и доступно. Но пользователь тратит много времени, чтобы принять решение, и система автоматически никак ему не подсказывает. Из существенных минусов: по отображенным размерам клиент не сможет понять, сколько контейнеров нужно.



• «ТрансКонтейнер» получил 2 балла. Компания предлагает подобрать контейнер по параметрам груза. Управляя «ползунками» на сайте, пользователь вносит в систему данные груза, и та автоматически подбирает необходимый контейнер. Этот простой «калькулятор» встроен в заявку. Клиенту не мешают переходы по ссылкам, в блог, в FAQ или звонки менеджеру.



• DP World за свое решение сервисе SeaRates получил 3 балла. Реализованный компанией пошаговый калькулятор формирования контейнера отвечает на все вопросы: как будет перевезен груз, во что упакован, будут ли паллеты, как груз будет уложен в контейнере и т.д. Таким образом, у клиента не остаётся сомнений в принятом решении. Калькулятор реализован как отдельное приложение, которое можно купить и подключить к своему порталу по API¹.



Далее я подробно разберу наиболее удачные примеры клиентских сервисов, которые реализованы в «Личных кабинетах» проанализированных транспортных компаний.

Все внимание на «приборную панель»

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

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


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

После того как клиент понял, как дела с текущими заказами, он переходит к следующему шагу – созданию заявки на перевозку.

Заявка с точностью геолокации

Во всех исследованных транспортных компаний заполнение заявки начинается с поиска ставки. Подобрать вариант нужно быстро, качественно и просто. Решение от DP World, по нашему мнению, реализовано наиболее удачно. Современный интерфейс с адаптированными b2c-элементами из популярных агрегаторов типа Aviasales. Так как отсылки к известным паттернам облегчают работу с «цифровым инструментом».



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

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


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

Индивидуальный котировочный подход

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



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

Повторите все, пожалуйста

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

Ставка на нюансы

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

• • «Простыня» информации на одной странице. Пользователь ее скролит, последовательно заполняет данные.
• 
  
• • «Степпер». Этот способ предполагает, что процесс заполнения заявки разбит на несколько шагов. Например, в системе MSC их выделено целых 7! С одной стороны, клиент концентрируется на каждом, с другой – большое количество этапов может отпугнуть пользователя.

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

Нюанс #1 Услуги. Заполнение начинается с выбора услуг. В «Личном кабинете» DP World разные формы доставки дополнены иллюстрацией. Забрать из порта и доставить в пункт назначения или перевезти груз из порта в порт. При выборе разных форм соответствующая часть дороги окрашивается. Такая визуализация позволит новому пользователю оперативно соориентироваться, а опытному логисту быстро проверить состав услуг.


Нюанс #2 Груз. CMA CGM реализовали выбор груза из прошлых заявок по аналогии с поиском ставок. Последние введенные данные находятся рядом с разделом поиска. Таким образом, в один клик клиент подставляет тот же груз в заявку и корректирует поля, если нужно. Это ускоряет заполнение формы.


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

Считаю, что подходы CMA CGM и DP World могут удачно дополнять друга друга.


Нюанс #3 Участники перевозки. Когда груз выбран, нужно указать конечного получателя и плательщика. Эти значения также часто повторятся от заявки к заявке. Решение – добавить «адресную книгу», как сделали «Деловые Линии». Она запоминает адреса контрагентов, которые пользователь прописал в заявке или добавил вручную.


Еще один отличный пример заботы о клиенте – дисклеймер «изменения в адресах не повлияют на заполненные заявки». Пользователю естественно испытывать страх перед неизвестностью (правки это или переход на следующий шаг), предвосхищать его – задача интерфейса.

К таким же клиентоориентированным и простым элементам относится прогресс заполнения букинга, который реализован в кабинете CMA CGM. Эта небольшая деталь подкрепляет уверенность пользователя в следующем шаге и в целом в заполнении заявки.

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


Нюанс #4 Проверка и оплата. Последний этап букинга – проверка на ошибки. Система CMA CGM выводит «чек лист» с основной информацией о заявке. Недостающие данные отмечены красным цветом, а клик по ссылке позволит вернуться к соответствующему полю.


Сформированная заявка требует подтверждения и оплаты. В b2b-секторе, чаще всего оплата производится по счетам и актам. Небольшим компаниям финансовая отчетность позволяет работать с картой, поэтому лучше предусмотреть такую возможность в «Личном кабинете». «ТрансКонтейнер», например, позаимствовал b2c-паттерны: оплата картой через систему ВТБ.

Повелитель заявок

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

В организации списка заявок наиболее удачной является решение CMA CGM. Их реестр подробно и удобно систематизирован в гибкой таблице:

• • Фильтрация и сортировка. Организована внутри каждого столбца.
• 
  
• • Большая строка поиска с выбором. Искать по всем заявкам или только по отправлениям текущего пользователя. Если к аккаунту компании в «Личном кабинете» привязаны несколько менеджеров-логистов, то такая небольшая функция облегчит поиски.
• 
  
• • Единая кнопка действий. Операции, которые можно провести с одной или несколькими заявками, появляются выпадающим списком. Для активных действий по перевозке не нужно заходить внутрь заявок.

• • Развернутая заявка. Внутри таблицы заявка раскрывается и доступна часть ее параметров: дислокация, статусы. Клиент быстро получает актуальную информацию о положении контейнеров и быстро принимает решение по изменениям.
• 
  
• • Два вида сортировки информации внутри заявки. Один – по документам, второй – по контейнерам. Различные разрезы интересны разным сотрудникам. Кто-то смотрит где контейнер, кто-то отслеживает состояние всей партии.

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


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

Клиентские подсказки

Бизнес-процессы в личном кабинете могут оказаться сложными для понимания, состоять из множества шагов, занимать много времени. Если взять за аксиому, что 90% времени пользователи проводят не в личном кабинете, то отдельные функции могут забываться. Здесь на помощь приходит система поддержки, которую можно реализовать одним из двух способов.

Способ №1 – FAQ. Отдельный раздел с ответами на часто задаваемые вопросы. Например, в MSC вопросы фильтруются по категории, есть поиск, но нет ни скринов, ни видео.


Способ №2 – Система онбординга. Подсказки в режиме реального времени знакомят с системой или дают алгоритм решения задачи. Небольшие всплывающие окна направляют пользователя: куда нажать, какие поля заполнить, что открыть и какие параметры выбрать. В системе CMA CGM клиента всегда сопровождает «ушко» с перечнем частых вопросов. При клике на вопрос кабинет буквально начинает «водить клиента за руку».

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

Провести заявку «за ручку»

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

• • Дефолтное состояние. По умолчанию будут приходить пуши по параметрам, которые внутри системы, считаются существенными: одобренные заявки, подтверждающие документы, статусы. Эти уведомления решат задачи большинства пользователей.
• 
  
• • Кастомные настройки. Например, менеджер, ответственный за конкретный участок пути, хочет получать только соответствующие оповещения. И CMA CGM, объясняя значения нотификации, позволяет настроить индивидуальные уведомления. По каждому типу документа есть широкий спектр событий.

Учиться у лучших

В качестве вывода предлагаю обобщить все описанные в статье решения, реализованные в «Личных кабинетах» транспортных компаний, и объединить их в топ-7 UX-практик.

Материал подготовлен компанией «Ареал»

---

¹API (от англ. Application Programming Interface) - это совокупность инструментов и функций в виде интерфейса для создания новых приложений, благодаря которому одна программа будет взаимодействовать с другой. Это позволяет разработчикам расширять функциональность своего продукта и связывать его с другими. Большинство крупных компаний разрабатывают API для клиентов или для внутреннего использования.