SOLVO.TOS

Разработка веб-интерфейса комплексной автоматизированной системы управления контейнерными терминалами

#крупные внедрения
#сервисы
Задача

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

Солво.ТОС — справочная система для управления терминалами (ж/д, сухопутный, морской либо многопрофильный комплекс), которая доступна из коробки: работает из облака или устанавливается на серверах клиента.

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

Клиент

Solvo — один из лидеров российского рынка разработки программного обеспечения для автоматизации работы склада и порта. Компания существует более 20 лет и реализовала более 200 успешных внедрений.

Аналитика

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

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

После обучения команда посетила терминалы (КТСП, МПК ЮГ2, УЛКТ ) и проанализировала работу реальных пользователей с системой. Мы провели интервью и аналитику контекста, сравнили различные роли пользователей, продемонстрировали бизнес-процессы различных предприятий. В итоге комплексной аналитики мы смогли составить четкую картину о том, насколько гибкой должна быть система и сколько разнообразных настроек требуется конечным пользователям.

На основе полученных данных
1

Собраны входные и выходные данные: какие процессы происходят в системе, что отображается на экране у пользователя, что он делает вне программы.

2

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

3

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

Проектирование и дизайн

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

Авторизация и вход

Мы разработали экран входа в систему. Он представляет собой двухэтапную авторизацию с возможностью восстановления пароля. У сервиса есть возможность работать из облака, поэтому система доступна как для сотрудников терминалов, так и для их контрагентов (владельцев судов и экспедиторов), которые могут самостоятельно входить в систему под своим логином-паролем и заносить информацию о прибытии каждого определенного суда к терминалу.

Дашборд

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

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

Автовизиты

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

Был разработан интерфейс создания и обработки автовизита: когда транспортное средство заезжает на терминал, забирает или привозит контейнеры и уезжает обратно пустым или с грузом. Например, 1 тягач не может забрать 50 контейнеров. Он может забрать максимум 4 контейнера по 20 футов. ТЕУ (единица измерения контейнеров).

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

Табличный вид

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

В предыдущем интерфейсе на экран было выведено сразу 3 таблицы, каждая со своим набором действий. При среднем размере экрана пользователей 1280×1024, процент полезных данных на экране был крайне мал.

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

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

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

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

0

Мы оставили все привычные пользователям значения, доработали систему фильтрации и предложили 2 решения.

1

Значения фильтров прописываются прямо в строке, которая помогает и подставляет ответы постоянными всплывающими подсказками. Например, по запросу «дата» система предлагает различные варианты: «дата начала», «дата окончания» и т.д. Затем, пользователь выбирает нужный вариант и система автоматически предлагает логику фильтрации (больше, меньше, равно или неравно).

2

Значения фильтров прописываются прямо в строке, которая помогает и подставляет ответы постоянными всплывающими подсказками. Например, по запросу «дата» система предлагает различные варианты: «дата начала», «дата окончания» и т.д. Затем, пользователь выбирает нужный вариант и система автоматически предлагает логику фильтрации (больше, меньше, равно или неравно).

Данил Серебряков
UX-проектировщик
«Во время работы мы проводили коридорные тестирования. Например, в случае с фильтром было разработано несколько вариантов логики его работы. Чтобы можно было отработать сценарии, мы собрали интерактивные прототипы и сформировали выборку из 6-7 пользователей для их тестирования. После этого мы проанализировали полученные данные и выбрали лучший вариант, который не конфликтовал с системой и был удобен для пользователей»
Карточка

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

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

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

Дмитрий Манин
Менеджер проекта

«Мы разработали дизайн и передали его клиенту. Разрабатываем не мы, потому что не работаем с теми технологиями, которые подходят клиенту. На пресейле мы посчитали, что нарисовать весь дизайн со всеми вариантами отображения всех состояний элементов либо сверстать готовый вариант на html-шаблонах — это примерно одно и то же по трудозатратам и времени. Но результат в виде html-шаблонов клиенту не был нужен, потому что клиент использует технологию (шаблонизатор) jsf: верстку на java с фреймворком primefaces.

Создали интерактивный прототип с изображениями для invision. Интерактив сделан с помощью события и подмены изображений: мы отрисовали по несколько состояний и при клике или наведении показывалась картинка с этим состоянием. Это удобно на этапе тестирования, когда ты полностью прогоняешь весь процесс».

Результаты

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

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

Максим Максимов
Коммерческий директор Солво

«Компания ARTW является нашим хорошим давним партнером. После запуска проекта по обновлению корпоративного сайта компании «СОЛВО», мы заказали в ARTW проект по проектированию новых пользовательских интерфейсов системы управления контейнерными и грузовыми терминалами SOLVO.TOS.

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

Благодарю компанию ARTW за проделанную работу и желаю всей команде ARTW успехов в работе! Уверен, что в будущем нас ждут новые и интересные совместные проекты».


Координационный
совет SPECIA
Санкт-Петербург,
8-я Красноармейская ул., д.10