Задача

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

Назначение

Интеллектуальная транспортная система Сбер ИТС позволяет:

• отслеживать дорожно-транспортную обстановку в городах и на автрострадах;
• мониторить нарушения правил дорожного движения;
• информировать участников дорожного движения;
• максимизировать показатели эффективности использования дорожных сетей;
• повысить безопасность и эффективность дорожного движения;
• ускорить реагирование на возникающие дорожно-транспортные происшествия;
• контролировать объем трафика и своевременно предпринимать необходимые меры для оптимизации использования дорог;
• собирать и анализировать статистику по происшествиям и предпринимать меры по улучшению обстановки в регионах;
• отслеживать качество дорожного покрытия и обеспечивать своевременный ремонт/постройку новых дорог;
• контролировать эффективность работы общественного транспорта и вносить корректировки в его работу.

Этапы работ

Проектирование системы Сбер ИТС

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

Структура будущего решения

Всего выделили 3 больших блока функций будущего решения:

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

После «Блокинга» определили общие стили системы и начали составлять UI Kit, содержащий в себе текстовые иерархические стили, основную палитру, все необходимые кнопки, поля, формы, иконки и другие элементы будущего интерфейса.

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

UI Kit

Разработка Сбер ИТС

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

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

Для реализации поставленной задачи разбили контентную зону на 3 части:

1. Интерактивная карта. Карта с функционалом отображения слоев и быстрой навигацией для оперативного принятия решений.
2. Развернутая информация. Зона для подробной информации по мониторингу, а также функциями поиска и расширенных настроек для детального анализа ситуации на карте на макро- и микро- уровнях.
3. Навигация. Навигационная зона дает возможность переходить к системе аналитики внутри ИТС, формировать отчеты и переходить в профиль пользователя.

Wireframe прототип дэшборда

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

Структура системы

Сложности и ограничения

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

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

Вложенность составляет 4 уровня, что не было предусмотрено изначально, особенно в свернутом виде сайдбара. Тем не мене эту проблему мы решили, не прибегая к глубокой переработке системы. Каких-то элегантных решений не потребовалось, мы просто аккуратно проработали вложенность. Решение было доступно, так как система не предусматривала разработку мобильной версии, что накладывало бы значительные ограничения на возможности использования вложенности.

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

Многоуровневое меню в системе

Результаты

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

Основные страницы проекта