Новый сайт «Роскадастра»

• О клиенте

• Задача

• План работ

• Предпроектная аналитика

• Проектирование

• Дизайн

• Интерфейсные решения

• Взаимодействие с клиентом

• Результат

#1

Разработали корпоративный сайт для ППК «Роскадастр», который стал единой площадкой взаимодействия с государством для широкой аудитории — от частных клиентов до бизнеса и госорганов.

#2

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

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

Кроме разработки сайта нам предстояло:

• создать новую дизайн-концепцию для сайта Роскадастра, хорошо интегрируемую в уже существующий брендбук головной компании — Росреестра;
• сделать сайт простым и доступным для широкой аудитории (всё население РФ), подчеркнуть дружелюбность компании по отношению к своим клиентам;
• соблюсти все требования, предъявляемые к государственным сайтам и регламентированные законом.

Учитывая сжатые сроки и большой объём контента, требующего переработки, приходилось искать оптимальные решения, которые позволят запустить сайт в срок, не жертвуя при этом его удобством для пользователей. Поэтому план работ получился следующим:

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

О ключевых моментах проекта расскажем ниже.

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

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

На ней отразили те разделы и страницы, которые берём в первый релиз.

Начали с самой насыщенной по количеству блоков страницы — карточки услуги. Как и в проектах для е-кома, в подобных случаях придерживаемся правила «от большего к меньшему». Это позволяет переиспользовать спроектированные блоки на других страницах и удачно организовать мини-карточки в каталоге или в модулях перелинковки (например, блок с услугами или новостями на главной).

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

Концепцию начали разрабатывать параллельно с прототипами, чтобы ускорить процесс разработки.

Сделать дружелюбный дизайн для всего населения РФ — задача не самая лёгкая. На этапе разработки мудборда основными референсами выступали ГИС Торги и Госуслуги.

Изюминкой в задаче стал брендбук Росреестра, который по ТЗ нам нужно было использовать. Правда, было одно но: он не был адаптирован для веба — из него мало что можно было использовать. Начали искать свежие решения по дизайну, которые могут подойти.

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

Галерею популярных услуг думали оформить карточками по примеру того, как Apple оформляет презентации своих продуктов. Предложили использовать нестандартную сетку, для каждой услуги — своё оформление: крупный текст, графика или их комбинация. Альтернативный вариант — использование линейной графики.

Вариантов было много. Искали что-то свежее, интересное и понятное всем аудиториям. Пробовали разные стили и приёмы.

Через несколько итераций согласований в финале осталось два варианта: с градиентом и видеорядом на первом экране. Для каждого видео приводили свои аргументы, которые подкрепляли изображение в кадре: пины, изогипсы. Описывали, как это соотносится с философией компании, как поддерживает ton of voice.

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

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

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

После подготовки макетов для ПК приступили к проработке деталей:

— новые вебные иконки;
— подбор и обработка изображений, которые должны рифмоваться с концепцией;
— подбор комбинаций рисунков градиента;
— ресайз и обработка фотоконтента;
— адаптация под планшет и мобайл;
— сборка UI-кита.

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

Это сократило время на разработку и дало возможность менеджеру со стороны клиента заполнять страницы из админки без обращения к программистам.

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

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

Раздел является разводящим для переходов к внутренней информации об организации. Так как контента на странице много, она получилась довольно длинной. Поэтому предусмотрели функции «липкой» навигации. Это строка с разделами страницы, которая закрепляется под шапкой при скролле и позволяет быстро перемещаться по разделам.

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

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

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

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

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

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

Работа с госзаказчиком всегда сильно отличается количеством согласователей и ограничений, с которыми приходится работать. Например, в этом проекте у нас был рабочий чат с коллегами из 6 государственных компаний, в котором одновременно было 20 заинтересованных заказчиков. Каждый присутствующий отвечал за отдельные участки работы, чтобы объединить все задачи в едином сайте, приходилось выстраивать чёткие правила коммуникации с каждым заказчиком на каждом этапе работ.

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

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

Это позволяло нам во время общих созвонов оперировать только фактами и принимать правильные, аргументированные решения.

#1

Новый сайт ППК «Роскадастр» станет для пользователей ресурсом, которого не нужно бояться. Дружелюбные интерфейсы и tone of voice (стиль общения бренда с клиентами) располагают к изучению информации, дают возможность в одном месте получить услуги, которые ранее были распределены по разным сайтам и не предполагали онлайн-взаимодействия с клиентом.

#2

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

#3

Сотрудники компании рассчитывают дополнить данные о недвижимости, в том числе за счёт появления обновленного сайта и программы «Национальная система пространственных данных». Например, на конец 2021 года в ЕГРН не было внесено 59% границ населённых пунктов и не хватало информации о собственности 48 миллионов объектов.