Раздел отгрузки для B2B-портала иностранных поставщиков
В DNS есть портал для иностранных поставщиков через который происходит взаимодействие между компанией и иностранными поставщиками. Спроектировал раздел конкретной отгрузки для данного портала. Интерфейс помогает быстрее находить проблемные документы, снижает количество обращений в поддержку и ускоряет исправление ошибок за счет прозрачных статусов, пояснений по причинам блокировки документов и явных следующих действий для поставщика
Проблемы пользователей
Международные поставки связаны с большим количеством документов (инвойсы, сертификаты, накладные) и сложной логистикой (таможня, транзитные склады, порты). Поставщики часто не понимают, на каком этапе находится груз и почему те или иные документы не проходят проверку, что приводит к задержкам на границе и штрафам
Ожидаемый результат
Снижение обращений в поддержку. Количество обращений по статусу отгрузки и документам
Увеличение скорости исправления ошибок. С момента появления ошибки до внесения необходимых изменений без помощи поддержки
Увеличение процента проблем, решенных без поддержки. Процент кейсов, где поставщик сам понял статус/ошибку и закрыл вопрос без саппорта
Дискавери
Этот проект был ограничен по срокам, поэтому глобально весь этап быстрого ресерча и бенчмарков был направлен не на поиск конкретных инсайтов, а на получение большей информации, понимания вообще что мы делаем, почему и для кого. Хотелось понять как вообще выглядят подобные системы, какие есть паттерны повторяющиеся и тд, так как ранее с подобным я не сталкивался.
Но, в любом случае, кое что удалось подчерпнуть:
Посмотреть в фигме
Но, в любом случае, кое что удалось подчерпнуть:
- Шаблоны документов, позволяющие пользователю скачать шаблон выбранного документа прямо в модалке с заполнением и далее заполнять его своей информацией
- Большая информативность для этапов: добавление локации этапа, а также таймингов поступления на этап и выхода с него
- Подвязка ошибки в документах сразу в этап, для большей информативности и понимания, что этап на стопе и почему он на стопе
- Скачивание документа после согласования для дальнейших манипуляций с ним
Посмотреть в фигме
Основные гипотезы после ресерча
Причины отклонения документов
Если покажем точную причину отклонения документа и способ исправления прямо в интерфейсе, то увеличим скорость исправления ошибок и снизим число обращений в поддержку
Ключевые этапы отгрузки
Если покажем ключевые этапы отгрузки с временем прибытия и отбытия, а также причиной блокировки этапа, то это сможет положительно повлиять на прозрачность процесса
Статусы на этапах отгрузки
Если мы добавим заметные статусы к каждой отгрузке, то это сможет положительно повлиять на скорость реагирования на ошибки, так как поставщик будет сразу видеть проблемные отгрузки без необходимости заходить в каждую карточку
Подсказки на каждом этапе с документами
Если добавим контекстные подсказки на каждом этапе работы с документом, то положительно повлияем на снижение числа ошибок и скорость прохождения сценария
Сортировка в таблице
Если мы дадим возможность пользователю сортировать таблицу по проблемным и блокирующим документам, то это сможет положительно повлиять на скорость исправления ошибок, так как поставщик будет сразу видеть, какие документы требуют первоочередного действия
Дизайн
Одним из ключевых ограничений при разработке дизайна данного раздела была необходимость разработки решения на Дизайн-системе. Я выбрал Finesse UI. Основные элементы были взяты из нее, такие как кнопки, стили, цвета, бейджи и тд. Также дополнительно были разработаны компоненты под нужны страницы, которые в дальнейшем были подробно описаны и подготовлены к разработке
Просмотр информации по конкретной отгрузке
Основная страница раздела в рамках которой поставщик видит всю основную информацию по своей отгрузке. Здесь необходимо было отразить краткую информацию по отгрузке в блоке с информацией, этапы отгрузки, а также таблицу с документами по отгрузке. Важно в этой истории то, что этапы напрямую завязаны с документами, так любой документ не прошедший по требованиям блокировал дальнейший переход груза через границу, при транспортировке и тд. Поэтому в рамках данного раздела акцент сделан на явные статусы этапа и документов, чтобы поставщик сразу же видел где груз, есть ли проблема, и если она есть, то в чем.
Добавление нового документа и исправление ошибок в существующем документе
Следующий ключевой сценарий в рамках данного раздела - это добавление документа, просмотр ошибок в документах, а также доработка их с помощью подсказок от нашей системы/проверяющих людей. Это реализовано за счет понятного и простого функционала - текстовое уведомление с пояснением причин отклонения и инструкцией по тому, что нужно делать далее. Плюс направляющие сообщения-подсказки на каждом этапе взаимодействия с документом.
Тестирование решения
Так как работа производилась в очень сжатые сроки — в качестве тестов выбрал коридорки, чтобы быстро отловить очевидные ошибки, проблемы и сложности, которые можно тут же быстро исправить. Тестировал дважды, тестирование — внесение изменений — тестирование повторное
Формат тестирования
Собрал интерактивный прототип в Figma с основным сценарием: поиск объекта, взаимодействие с ним, просмотр арендаторов, формирование отчёта и др. Провёл один этап UX тестов (модерируемые)
Что изменилось
- Упростил работу с документом в модалке, убрал поля, которые изначально предлагал заполнять человеку вручную, пользователи путались — пораскинув мозгами понял, что эти же поля можем собирать автоматически для таблицы
- Добавил полноценную фильтрацию в документах по типу и по статусу для быстрого ориентирования
- Доработал наименование кнопок и формулировки в подсказках — это то, с чем возникали основные проблемы и не понимания
Подготовка к разработке
Одной из ключевых задач в рамках работы было подготовить макет к handoff, описав все состояния, поведение объектов, которые выходят за пределы использованной дс. Также нужно было учесть адаптацию раздела под небольшие мониторы (до 1200px)
Результат
По итогам данного тестового и собеседования я дошел до финального этапа найма, но за период трудоустройства в продукт, его структура изменилась и в итоге потребовался сотрудник в офис во Владивостоке
Обратная связь от команды DNS
