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

О том, какие удачные дизайнерские ходы можно перенять у российских и зарубежных транспортных компаний

Дмитрий Баршев Дмитрий Баршев
UX/UI-дизайнер в компании «Ареал»




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

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

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

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

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

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

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

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

  • 1. Понять текущее состояние перевозок.

  • 2. Найти ставку для новой перевозки.

  • 3. Оформить заявку.

  • 4. Оплатить заявку.

  • 5. Отследить статусы.

  • 6. Оперативно получить помощь.

  • 7. Не пропустить уведомление.


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

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

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

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

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

Примеры статей, в которых объясняются принципы укладки грузов и вместимость контейнеров (увеличьте иллюстрацию по клику и рассмотрите детали)


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

Пример «калькулятора» по подбору контейнера, реализованный в «Личном кабинете» «ТрансКонтейнера» (увеличьте иллюстрацию по клику и рассмотрите детали)


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

Пошаговый калькулятор формирования контейнера от DP World (увеличьте иллюстрацию по клику и рассмотрите детали)


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

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

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

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

Пример дашборда из «Личного кабинета» ПГК (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

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

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

Пример заполнения заявки на перевозки в «Личном кабинете» DP World (увеличьте иллюстрацию по клику и рассмотрите детали)


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

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

Пример выбора адреса доставки в «Личном кабинете» «ТрансКонтейнера» (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

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


Пример ситуации, когда система DP World предлагает подписаться на изменения в стоимости выбранных рейсов (увеличьте иллюстрацию по клику и рассмотрите детали)

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

Пример реализации функции по рекомендации ближайших вариантов судов в «Личном кабинете» CMA CGM (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

Пример реализации функционала по предложению пользователю повторить условия ранее реализованной перевозки в сервисе CMA CGM (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

  • • «Простыня» информации на одной странице. Пользователь ее скролит, последовательно заполняет данные.

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

Пример одного из семи шагов заполнения заявки на перевозку в системе MSC (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

Пример визуализации контента в «Личном кабинете» DP World (увеличьте иллюстрацию по клику и рассмотрите детали)

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

Пример реализации функционала по выбору груза из прошлых заявок в «Личном кабинете» CMA CGM (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

Пример личных списков грузов компании в «Личном кабинете» DP World (увеличьте иллюстрацию по клику и рассмотрите детали)

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

Пример адресной книги в «Личном кабинете» «Деловых Линий» (увеличьте иллюстрацию по клику и рассмотрите детали)


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

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

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

Пример добавления нового участника букинга в «Личном кабинете» CMA CGM (увеличьте иллюстрацию по клику и рассмотрите детали)

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

Пример чек листа с основной информацией о заявке в «Личном кабинете» CMA CGM (увеличьте иллюстрацию по клику и рассмотрите детали)

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

Пример функционала оплаты заявки на перевозку через систему ВТБ в «Личном кабинете» «ТрансКонтейнера» (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

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

  • Фильтрация и сортировка. Организована внутри каждого столбца.

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

  • Единая кнопка действий. Операции, которые можно провести с одной или несколькими заявками, появляются выпадающим списком. Для активных действий по перевозке не нужно заходить внутрь заявок.

Пример выпадающего списка с операциями, которые можно провести с одной или несколькими заявками в «Личном кабинете» CMA CGM (увеличьте иллюстрацию по клику и рассмотрите детали)

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

  • Два вида сортировки информации внутри заявки. Один – по документам, второй – по контейнерам. Различные разрезы интересны разным сотрудникам. Кто-то смотрит где контейнер, кто-то отслеживает состояние всей партии.
Два вида сортировки информации внутри одной заявки в «Личном кабинете» CMA CGM (увеличьте иллюстрацию по клику и рассмотрите детали)

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

Пример организации данных заявки в кабинете Maersk (увеличьте иллюстрацию по клику и рассмотрите детали)

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

Пример отображения движения контейнера в «Личном кабинете» Maersk (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

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

Пример блока с ответами на часто задаваемые вопросы в «Личном кабинете» MSC (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

В системе CMA CGM клиента всегда сопровождает «ушко» с перечнем частых вопросов (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

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

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

«Личный кабинет» CMA CGM, объясняя значения нотификации, позволяет настроить индивидуальные уведомления (увеличьте иллюстрацию по клику и рассмотрите детали)

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

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

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

  • 2. Опыт из b2c. Адаптируйте знакомые пользователям паттерны. Например, система поиска в популярных агрегаторах может стать шаблоном для калькулятора ставок.

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

  • 4. Индивидуальный подход. Продумайте, на каких этапах стандартных полей может не хватить, и разрешите добавлять индивидуальные. Например, неочевидные роли в перевозке.

  • 5. Гибкая система. Оставьте за клиентом право выбрать сортировку таблиц, вид заявки или набор уведомлений.

  • 6. Цветовые акценты. Выделяйте проблемные ситуации, статусы, важные показатели, совершенные действия. Управляйте вниманием пользователя.

  • 7. Иконки, иллюстрации. Визуализируйте сложные процессы. Это поможет быстрее разобраться в ситуации и принять решение: подбор контейнера, выбор доставки, проверка букинга, движение контейнера.


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


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


Тэги: Ареал, личный кабинет, IT-сервисы, интерфейс, грузоперевозки
28.03.2022

Вам интересны самые значимые события отрасли, выставки и мероприятия, конфликты и сделки, интервью и невыдуманные истории коллег? Подпишитесь на рассылку* и будьте в курсе!
Ваше имя*
Ваш e-mail*
*Всего одно письмо в неделю с дайджестом лучших материалов

Вам важно быть в курсе ежедневно? Читайте и подписывайтесь на наш Telegram
Хотите больше юмора, видео, инфографики - станьте нашим другом в ВКонтакте

Разместите новостной информер и на вашем сайте всегда будут обновляемые отраслевые новости






Читайте также



Другие статьи по темам

Аналитика ВЭД Таможня Интервью Задача и решение Итоги года Итоги недели Колонка редактора Конкурс Личные трудности Лучшие люди Опыт в помощь Оценка Логизорро Раскопки Складская логистика Фоторепортаж

Возврат к списку

Вверх
Вверх