11 Июл 2022

Проектирование интерфейсов мобильного web-сервиса «Порт в кармане»

Заказчик
Владивостокский морской торговый порт входит в Транспортную группу FESCO — одну из крупнейших частных транспортно-логистических компаний России.
Задача
Спроектировать интерфейсы сервиса, позволяющего клиентам ВМТП выполнять основные задачи по перевозке грузов со своего мобильного телефона. Ранее они делали все с компьютера в «1С».

Как это было раньше

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

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

  

Что мы сделали

  1. Погружение: Мы окунулись в рабочий процесс экспедиторов и перевозчиков. Провели аудит уже существующих сценариев в «1С» и обозначили основные потребности клиентов.
  2. Аналитика: Определили pain points в сценариях. Вместе с командой заказчика спроектировали варианты решения и оптимизации проблемных мест.
  3. Дизайн: Собрали дизайн-систему для «Порт в кармане» и разработали новые иконки для всех сервисов. Сохранили единый визуальный стиль с сайтом ВМТП.
  4. Проверка: Провели опросы и исследования пользовательского опыта клиентов. Полученные данные помогли нам спроектировать взаимодействие системы и пользователя.

Mind Map

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

Алиса Васильева, UX/UI дизайнер, Escape Tech: 

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

«Порт в кармане»

#01 Автовизиты

Создание автовизита — это самый популярный сервис. Раньше перевозчику нужно было зайти в «1С» и заранее на компьютере создать автовизит. Сейчас это можно сделать на телефоне в несколько тапов.

#02 Закрытие склада

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

#03 Заявки на пропуск

Чтобы попасть на територию порта, нужно оформить пропуск. Он может быть пешеходным, когда необходимо забрать или подписать документы, и автомобильным, когда нужно забрать груз. Благодаря этому сервису клиенты легко создают заявки и отслеживают их статусы.

#04 Финансы

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

#05 Таможенные требования

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

#06 Подход флота

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

#07 Груз в порту (в разработке)

В программе «1С» есть раздел «История грузов», в нём клиенты смотрят текущий статус груза и всю сопутствующую информацию. Затем переходят в другие разделы для выполнения дальнейших операций с грузом, например, оформляют автовизит или создают заявку на закрытие склада.

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

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

Что сделано

  • 110+ экранов системы
  • 6 запущенных сервисов
  • 6+ сервисов в разработке

Николай Журченко, Руководитель группы разработки, ТГ FESCO: 

Я вижу перспективы развития проекта и вижу меняющиеся отношения самого бизнеса. Поступают разные предложения, интересуются успехами. Есть заинтересованность проектом не только в ВМТП, но и в других компаниях группы FESCO. Получаем положительную обратную связь от клиентов: им очень понравилось приложение и они желают увеличения набора сервисов, над чем сейчас и работаем.

Перспективы в текущей целевой аудитории — это привлечение новых пользователей, потенциал для роста есть: сейчас пользователей 40% от текущей целевой аудитории. При этом я рассматриваю расширение возможностей приложения для его использования не только на мобильных устройствах. Это позволит перевести все сервисы порта в веб, увеличив набор услуг и резко увеличив сегмент пользователей (сейчас текущая целевая аудитория, мобильные пользователи — это 13% от всех клиентов).

Итоги

«Порт в кармане» — продукт, который отлично иллюстрирует наш подход к работе. Мы всегда нацелены на долгосрочное партнерство с клиентом и стремимся работать так, как будто делаем наш личный продукт.

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


Исполнитель

Escape Tech — digital-продакшн полного продуктового цикла: от идеи и MVP до развития продукта в рыночных условиях. Обладаем специализированными компетенциями в создании коммуникационных платформ, высоконагруженных информационных систем, сложных аналитических решений, банковских продуктов.

Партнер

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

В карточку агентства

Письмо автору кейса

Пользуйтесь реальным опытом в IT и следите за успехами потенциальных подрядчиков и конкурентов
Подпишитесь на рассылку
Читайте также
Кейсы по теме#Транспорт, авиация, космос
Проекты компании Proactivity Group