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

Задача спроектировать интерфейсы профессионального b2b-сервиса морского торгового порта, который позволяет на мобильном телефоне решать основные задачи по работе с портом.

Figma, Airtable.

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

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

Команды разработчиков Владивостокского морского торгового порта и Escape Tech окунулись в рабочий процесс экспедиторов и перевозчиков. Провели аудит уже существующих сценариев в 1С и обозначили основные потребности пользователей. Также провели аналитику и определили pain points в сценариях. Вместе с командой заказчика спроектировали варианты решения и оптимизации проблемных мест. Собрали дизайн-систему и разработали новые иконки для всех сервисов, сохранив единый визуальный стиль с сайтом порта. Провели исследования и опросы пользователей, и на основании фидбека итеративно улучшаем продукт.

Подробнее о каждом сервисе.

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

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

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

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

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

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

#07 Груз в порту (в разработке). В программе «1С» есть раздел «История грузов», в нём клиенты смотрят текущий статус груза и всю сопутствующую информацию. Затем переходят в другие разделы для выполнения дальнейших операций с грузом, например, оформляют автовизит или создают заявку на закрытие склада. Мы выяснили, что такое переключение между сервисами требует от пользователя много времени и постоянной концентрации на задаче. Это может быть проблемой, когда клиент хочет в короткие сроки провести все необходимые операции с грузом. Мы решили облегчить жизнь пользователя. Так появился сервис «Груз в порту», в котором клиенты смогут не только работать с историей груза, но и планировать любые возможные операции с грузами в одном месте.