---
updateDate: 2026-02-10T00:00:00Z
publishDate: 2024-08-12
publishYear: 2019
name: Gormost
title: Дизайн интерфейсов для ГБУ «Гормост»
excerpt: Разработали дизайн системы, в которой менеджеры «Гормоста» согласуют с органами власти маршруты для крупногабаритных автомобилей.
context: Заказчик вместе с IT-интегратором разработал всю логику и интерфейс, а к нам пришел за дизайном. Только за UI, никакого UX.
logo:
src: ~/assets/images/portfolio/gormost/logo.svg
alt: Гормост logo
link: https://gormost.mos.ru/
image: ~/assets/images/portfolio/gormost/gormost.png
imageAlt: Дизайн интерфейсов для ГБУ «Гормост»
thumbnail:
src: ~/assets/images/portfolio/cards/gormost.svg
alt: Собака Павлова • Гормост • Разработали дизайн системы, в которой менеджеры согласуют с органами власти маршруты для крупногабаритных автомобилей
tags:
- gos
- log
- ui-redesign
- prof
tags2:
- Госсектор
- Сложные системы
- Система согласования маршрутов
- Дизайн интерфейсов
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн](/ux-design) и [продуктовые исследования](/ux-researches), независимо или [на аутсорсе](/ux-outstaff).
collection: services
page: ui-redesign
- text: |
### Наша экспертиза
368 интерфейсных проектов и более [120 проектных кейсов](https://sobakapav.ru/portfolio).
### Статьи об интерфейсах для транспорта
collection: post
page: city-transport-design
- collection: post
page: logistics-design
- collection: post
page: osago
- collection: post
page: rzd-consult
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: foodtrucks
- collection: portfolio
page: simetra
- collection: portfolio
page: loglab
- collection: portfolio
page: boracase
- collection: portfolio
page: trash
- collection: portfolio
page: pgk
- collection: portfolio
page: autotransinfo
- collection: portfolio
page: viking-line
result:
-
src: ~/assets/images/portfolio/figma.svg
text: Макеты интерфейса
link: https://www.figma.com/design/biHDIJq1YG7MKoBXseRevf17/%D0%93%D0%9E%D0%A0%D0%9C%D0%9E%D0%A1%D0%A2.-%D0%94%D0%BB%D1%8F-%D0%BF%D0%BE%D0%BA%D0%B0%D0%B7%D0%B0?node-id=0%3A1
budget: ~ 800 000 ₽
director: Упростили и ускорили работу пользователя средствами UI.
metadata:
canonical: https://sobakapav.ru/portfolio/gormost
title: Дизайн интерфейсов • Система согласования маршрутов грузового транспорта
description: "Разработали дизайн системы, в которой менеджеры государственного учреждения «Гормост» согласуют с органами власти маршруты для проезда крупногабаритных автомобилей."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/gormost/gormost.png'
width: 1280
height: 1530
---
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Заказчик](#anchor1) • [Бизнес-задача](#anchor2) • [Дизайн-задачи](#anchor3) • [Дизайн-процесс](#anchor4) • [Дизайн интерфейса](#anchor5) • [Заключение](#anchor6) • [Отзыв, цены, сроки](#anchor7)
</TOC>
## <a name="anchor1" />Заказчик
[«Гормост»](https://gormost.mos.ru/) — государственное бюджетное учреждение Москвы. Название у него намекает на что-то связанное с мостами, но на самом деле деятельность предприятия куда шире. Оно строит, содержит и ремонтирует дороги, тоннели, эстакады, набережные, путепроводы, лестничные сходы, коллекторы и много что еще. В том числе и мосты, куда уж без них. А еще разрабатывает проектные декларации, согласовывает проекты строительств, сдает в аренду пространства под мостами — всего не перечислишь.
Один из видов деятельности «Гормоста» — разработка маршрутов для пропуска крупногабаритных и тяжеловесных грузов. Это нужно, чтобы какой-нибудь водитель на фуре не заехал сдуру под низкий мост и не застрял там, образовав пробку.
Конечно, бегать с заявлениями по кабинетам «Гормоста» и рисовать маркером маршруты на бумажных картах никто не собирается. У всех давно есть телефоны. И электронная почта. Но все-таки удобнее, когда процесс согласования автоматизирован.
_Это схема не «Гормоста», но принцип работы системы примерно такой же. Источник — [«Авангард»](http://fvf-rbs.ru/produkt/vydacha-specialnyh-razresheniy.html)_
## <a name="anchor2" />Бизнес-задача
«Гормост» пришел к IT-интегратору и сказал: хотим разработать систему построения маршрутов для грузового транспорта по Москве. Тот согласился и все сделал, как надо.
Правда, пока что все это счастье только для чиновников. Компании-заявители эту систему не увидят и будут по старинке [обращаться с пакетом документов в одно окно](https://gormost.mos.ru/razreshenie-na-perevozku-gruzov-2/). Но потом и их пустят в счастливое цифровое будущее.
## <a name="anchor3" />Дизайн-задача
К нам IT-интегратор пришел за UI к уже готовым интерфейсам. Почему не сделал сам? Потому что заказывать дизайн у узкоспециализированных подрядчиков выгоднее, чем нанимать, обучать и содержать собственный штат специалистов. Мы уже рассказали об этом [в другом кейсе с этим же заказчиком](https://sobakapav.ru/portfolio/trash).
Работает система так.
1. Компания, которая отправляет большой и тяжелый транспорт по городу, должна согласовать маршрут с властями.
2. Она подает в «Гормост» обращение, в котором указывает, что, когда, откуда, куда и на каких автомобилях хочет перевезти.
3. Менеджер принимает это обращение, вбивает в систему и строит маршрут, учитывая ремонт дорог, ограничения по весу на мостах, митинги оппозиции и другие детали.
4. Затем менеджер отправляет заявления с маршрутом в разные организации и инстанции: РЖД, ГИБДД, балансодержателям и разным ГКУ, ГПУ и ГУП.
5. Менеджер видит, что компании согласовали или отказали маршрут, и передает решение заявителю.
Выглядит страшно, но на самом деле все проще. Система сохраняет информацию и маршруты по всем компаниям, поэтому каждый раз эту долгую процедуру внесения данных проходить не надо. Грубо говоря, все сводится к организационным формальностям. Условная «Пятерочка» спрашивает: «Можно мы все сделаем, как в прошлый раз?» Ей отвечают: «Можно». Если какая-то инстанция отказывает, менеджер строит альтернативный маршрут.
Мы во всем этом разобрались и пошли наводить красоту.
## <a name="anchor4" />Дизайн-процесс
В проекте была прибитая гвоздями логика. Нам ее менять не разрешили. Разработчики сами спроектировали весь интерфейс по требованиям заказчика, а к нам пришли за оформлением. И предлагать улучшения мы фактически не могли — до «Гормоста» они все равно бы не дошли. А если бы и дошли, то там нам, скорее всего, отказали бы. Потому что государство — не бизнес, и на ходу чиновники менять что-то не могут. Накажут.
Прежде, чем делать дизайн, нужно получить вводные. Заказчик скинул нам референсы, мы их обсудили и пошли делать три варианта оформления на выбор. За основу взяли цвета на сайте «Гормоста».
_«Гормост» использует в оформлении синий цвет — отлично, возьмем его за основу UI_
Нащупываем нужное решение. Здесь не нащупали.
_Первая версия дизайна. В ней навигацию дизайнер расположил с левой стороны экрана_
И снова промах.
_Вторая версия дизайна. Навигация все еще расположена слева_
А вот этот вариант заказчику понравился. Его мы и стали развивать.
_Этот вариант дизайна мы взяли в работу_
## <a name="anchor5" />Дизайн интерфейса
Хоть нам и доверили сделать только UI, это не значит, что пользовательский опыт нельзя улучшить. Тем более, если чешутся руки. А они у нас чесались.
Сравните экран выше и экран ниже. Это одна и та же страница.
Мы полностью переделали фильтр и сократили количество колонок в таблице. Так, дату подачи обращения приклеили к номеру обращения — нечего им отдельно стоять. Заодно освободили место для других колонок, в которых будет много текста.
_Реестр заявлений. Прототип заказчика_
Последняя колонка в таблице — действия.
Если у обращения стоит статус «Созданы заявления», кнопка в последней колонке позволяет копировать все данные из него в новое обращение.
Если у обращения другой статус, по клику на кнопку можно открыть заявление в отдельном окне, чтобы отредактировать его или дозаполнить.
_В последней колонке — кнопки. Мы их убрали_
В нашем дизайне колонка с кнопками пропала. Теперь можно выделить обращение по клику, затем нажать на отдельную кнопку «Операции» и выбрать, что с ним сделать.
_Заменили колонку с иконками действий на кнопку «Операции»_
Мы созванивались с интегратором по два раза в неделю. Показывали наработанное, обсуждали планы на следующие дни.
Интегратор забирал наш дизайн и уходил показывать их «Гормосту». Потом возвращался и присылал правки. Обычно — в текстовых документах со скриншотами. К слову, пока мы работали над проектом, заказчик перешел с [Axure](https://www.axure.com/) на [InDesign](https://www.adobe.com/ru/products/indesign.html).
_Чем отличаются обращения от заявлений? Обращения отправляет перевозчик в «Гормост», а заявления — «Гормост» в инстанции_
Правок было много. Иногда — изменений в работы системы. Да, мы говорили выше, что все уже давно утверждено и трогать ничего нельзя. Но это нам нельзя. А когда что-то хочет изменить «Гормост», как тут откажешь?
Так мы и работали. Дизайн — правки — дизайн. Ну и постепенно двигались к финалу.
_Страница оформления обращения. Прототип заказчика_
На странице оформления обращения мы развили левое меню, которое теперь выглядит как полоса прогресса со всеми этапами, включая «Маршрут» и «Перевозку». Если менеджер где-то случайно пропустит или неправильно заполнит поле, кружок в меню останется незакрашенным.
Из шапки убрали кнопки поиска и настроек, зато к другим добавили подписи. Считывать информацию с экрана стало легче.
_Страница оформления обращения в нашем дизайне_
Сделать UI — это тоже работа со смыслами. Даже в мелочах. Попробуйте определить, что не так с этой формой, если закрыть глаза на оформление?
_«V» значит «выпадающее меню»_
Нас смутила кнопка «Добавить». Интересно, что можно добавить, если нажать ее? Хотя нет, на самом деле не очень-то и интересно, когда целыми днями заполняешь одно обращение за другим.
А если это функция «Добавить условие»? И стоит она не рядом с другими кнопками, а под другими условиями? Тогда другое дело. Искать станет легче и быстрее.
Такими UI-мелочами можно по чуть-чуть улучшать пользовательский опыт.
_«Поиск заявлений» в дизайне_
На странице составления маршрутов была такая логика:
1. Менеджер выбирает пункт отправления и пункт прибытия.
2. Система показывает уже готовые маршруты, которые использовались до этого.
3. Менеджер выбирает в таблице под картой один из предложенных маршрутов.
4. Нажимает кнопку «Выбрать».
5. В серую форму ниже подтягиваются остальные данные по маршруту и транспортному средству.
Что не так?
_На этой странице менеджер прокладывает маршрут для перевозчика_
Первым делом мы убрали кнопку «Выбрать» — пусть все данные подтягиваются, когда менеджер кликает по маршруту в таблице. Лишние действия такие лишние, сами знаете.
Затем мы перенесли данные о ТС и маршруте в поле слева от карты. Бедный менеджер замучался бы скроллить экран вверх-вниз. Пусть все важное будет перед глазами.
Визуально карта уменьшилась из-за поля слева. Но, во-первых, мы предполагаем, что опытному менеджеру все дороги и разрешенные маршруты и так более-менее известны. А во-вторых, мы добавили возможность развернуть карту.
_Та же самая страница в дизайне_
И так — с каждым экраном в системе. Рассказывать, как мы двигали кнопки, смысла мало. К тому же, лучше один раз увидеть, чем сто раз услышать. Смотрите [макеты интерфейсов](https://www.figma.com/design/1oA0UvXjx3gFUBFjiW2fdm/%D0%93%D0%9E%D0%A0%D0%9C%D0%9E%D0%A1%D0%A2.-%D0%94%D0%BB%D1%8F-%D0%BF%D1%83%D0%B1%D0%BB%D0%B8%D1%87%D0%BD%D0%BE%D0%B3%D0%BE-%D0%BF%D0%BE%D0%BA%D0%B0%D0%B7%D0%B0?node-id=421%3A1527).
## <a name="anchor6" />Заключение
Дизайн для «Гормоста» — второй проект с заказчиком, который разрабатывает сложные IT-системы для государства. Первым был [дизайн интерфейса для Департамента природопользования Москвы](https://sobakapav.ru/portfolio/trash).
Оба раза мы создавали только UI — в принципе, это не очень типичная для нас задача. Мы привыкли улучшать пользовательское взаимодействие, начиная с самого начала — сперва делать аналитику, писать сценарии, брать интервью у пользователей. И, конечно, тщательно прорабатывать весь UX. То есть, самим вести за ручку пользователя туда, куда ему нужно.
В этих проектах провожатым выступила другая компания. А мы добавили указателей и упростили маршрут. И пусть путь останется тем же самым, двигаться по нему стало легче. В этом и заключается смысл любого UI — помочь пользователю разобраться в том, что происходит на экране и упростить его работу.
## <a name="anchor7" />