Как мы обновили сайт «МОИ ДОКУМЕНТЫ» для МФЦ Нижегородской области

Приветствую! Меня зовут Владислав Банников, я руководитель студии «Банникон». Расскажу, как в рамках государственного контракта мы создали сайт «МОИ ДОКУМЕНТЫ» для МФЦ Нижегородской области, с какими трудностями столкнулись и к чему пришли в финале.

Каждый, кто хоть раз оформлял документы, знает, как это сложно: очереди, время, вечная неразбериха. 

И наша цель была — упростить эту задачу и облегчить людям жизнь.

ЗАДАЧИ

 •  Сделать сайт таким удобным, чтобы легко разобраться, где и что находится.

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

 •  Адаптировать портал под все разрешения: ПК, планшеты, мобильные устройства, — чтобы пользоваться им в любое время и в любом месте.

 •  Организовать доступность сервиса для всех граждан, в том числе с ограниченными возможностями.  

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

Прежний сайт работал, НО:

 •  Устаревший отталкивающий дизайн.

 •  Половина функций не действовала, либо просто не существовала.

 •  Было трудно найти нужную информацию или услугу.

 •  Отсутствовала адаптация для слабовидящих.

 •  Не было PWA-приложения, которое можно установить из браузера и запустить на устройстве.

ЧТО СДЕЛАЛИ:

 • Проанализировали 50+ сайтов МФЦ, собрали всё самое полезное и привлекательное в одном месте;

 • Потратили 1200+ часов на разработку сайта;

 • Спроектировали 20+ дизайн-макетов и выбрали самый топовый.

Далее рассказываю, как мы создавали дизайн, почему сдвинули сроки и какой урок извлекли.  

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

Поэтому приняли решение собирать дизайн с 0.

МИНУСЫ: 

 •  Задержали готовность на 10+ дней.

ПЛЮСЫ:

 •  Дизайн — огонь: правильные интервалы, контрастные блоки, гармоничные шрифты. Всё логично, чисто и по полочкам. Так, как мы задумали.

 •  А главное — клиент доволен и пользователям нравится.

Мораль следующая: качество всегда должно быть важнее сроков.

Граммотная структура кода — необходимое условие для удобной поддержки сайта, лёгкого добавления функционала и читаемости.

В случае проекта «МОИ ДОКУМЕНТЫ» такой структуры не было.

Навели порядок и реализовали сервис с помощью компонентного подхода. Так мы поймали двух зайцев:

 •  Поддержка и развитие системы проще.

 •  Заказчик потратит меньше на техподдержку и добавление новых фишек в будущем.

О разработке:

 •  Создали портал на системе «1С-Битрикс: управление сайтом», редакция «Бизнес»

 •  Язык программирования — PHP 8.2.

 •  Оптимизировали скорость загрузки. 

 •  Протестировали на Google Pagespeed: работает быстро и стабильно.

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

 • Рассортировали каталог услуг по сегментам.

 • Разделили списки для бизнеса и для граждан.

 • Добавили фильтры: кому нужна услуга, уровень, категории жизненной ситуации, ответственные организации.

Умный алгоритм считывает популярные запросы, например, «Паспорт» / «Снилс». Показывает их рядом со строкой поиска. Три самых частых отображаются на главной странице.

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

 • Режим работы

 • Контакты

 • Адрес

 • Загруженность по часам

 • Как пройти к пункту

Теперь жители Нижегородской области знают о местоположении отделений МФЦ поблизости и часах их наибольшей загруженности. И, как следствие, могут посещать их заранее без очередей.

Сервис должен быть доступен и удобен для всех. И мы подошли к делу со всей ответственностью: 

 • Адаптировали скринридеры — программы, озвучивающие текст на экране — чтобы все элементы интерфейса, навигации и контента были озвучены правильно.

 • Соответствие стандартам W3C (WAI-ARIA): добавили специальные aria-атрибуты в код, чтобы скринридер мог верно определить, где курсор, и какие действия на странице можно совершить.

 • Тестирование работы сайта: 100% людей с нарушением зрения смогли справиться с заданиями.

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

 • Записываться на приём в МФЦ и управлять записями

 • Отслеживать статус обращения в режиме онлайн

 • Оценивать качество услуг

Не надо звонить или приходить в отделение, чтобы затем вернуться вновь. Всё есть в телефоне или на ПК.

Мы разработали PWA-приложение, которое можно скачать из браузера и запустить на любом устройстве: ПК, планшете, телефоне. С его помощью пользователи получают уведомления о новых услугах или об изменении статуса заявки.

Адаптировали сайт под мобильную версию:

 • Учли все особенности мобильной навигации

 • Сохранили удобство интерфейса

 • Обеспечили быструю загрузку страниц

Результат — сайт одинаково хорошо выглядит и работает на любых экранах.

Перед выпуском проекта в свет мы проверили каждую кнопку и функцию на сайте — всё на месте и работает.

 • Сервис красив и удобен.

 • Портал легко развивать, и поддерживать. Его масштабирование требует минимальных затрат на техподдержку.

 • Работает быстро и плавно на всех устройствах, адаптирован под все существующие экраны.

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

 • Люди с нарушением зрения свободно могут пользоваться сайтом.

Чтобы найти необходимую услугу, нужно проделать в 3 раза меньше шагов, чем раньше. Обновлённый портал успешно справляется с задачей.

Это ещё раз доказывает: продуманные функции, интерфейс и дизайн влияют, будет ли разработка полезной и окупятся ли затраты на её создание. Студия «Банникон» точно знает ответ!

P.S. При создании сайта ни один заяц не пострадал.