Оставьте заявку

Мы свяжемся с вами, чтобы обсудить детали

Сайт администрации Кемеровской области

Разработан по гайдлайнам дизайн-системы России

У региональных органов власти: администрации области, департаментов, муниципалитетов, учерждений — сотни сайтов. Они выглядят и работают по-разному. Это затрудняет общение граждан c государством в интернете

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

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

Дизайн-система

В самом начале проекта перед нами встал выбор: использовать опыт других — подобные задачи решаются во всех регионах — либо разработать самостоятельную дизайн-систему для Кемеровской области. Решили использовать гайдланы дизайн-системы России. Ее разрабатывает Минкомсвязи совместно с лидерами digital-рынка.

На старте это дало нам две очень важные вещи:

1

Правила и подходы, c помощью которых можно развивать и поддерживать ресурсы

2

Визуальный язык, готовые компоненты, которые позволили сфокусироваться на опыте пользователя, а не визуале

Принципы дизайн-системы

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

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

Principles image 5d6703203c3a1f6ac7f96c1df1d939231691cbfcc9cb89ab0ae04f5947ba8b68

Визуальный стиль, типографика, компоненты интерфейса

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

Все новые компоненты, цвета, иконки заботливо собраны в гайдлайне дизайн-системы Кемеровской области

Guide image b215df0c32409f35cef87050752a7f2554d3fa2eb20bc1dfa176850bc9a0be59

Информационная архитектура и прототипирование

За время существования старого сайта АКО его структура обросла множеством страниц и разветвлённых разделов. Вкупе с неочевидной навигацией и перегруженной главной страницей это делало сайт сложным и запутанным.

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

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

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

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

Prototype image c56b692a0f7900901c739584b04c72f2eed674c53f9ab17cc0e25d8ac054c6bf

Новый сайт администрации

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

На главной странице предыдущей версии сайта администрации было 119 кликабельных элементов, хаотично разбросанных по странице. Мы провели большую работу. Упростили и структурировали контент, в результате кликабельных элементов стало в полтора раза меньше

Main image 1 a0e42b3117f229d1041f813942de222489f083215c5c1d5fa4ecc8c2c1ae339e
Main image 2 e61ea6a50567483e97a804590a11ad4782a27fa1d3a739a5d13c9743882548e0
Main image 3 992bfb5d680a418147e71e85ea699e18f1b6115aa4d4bfc67d33e206c272d4cc

Навигация и поиск

Все государственные сайты объединены госбаром — панель сверху. Госбар — единая точка авторизации и персонализации: вход через ЕСИА, версия для слабовидящих, доступ к каталогу сайтов, уведомления от МЧС.

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

Навигация по внутренним разделам осуществляется при помощи наглядного бокового меню.

Поиск по сайту всегда доступен. На страницу поиска добавили частые поисковые запросы.

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

Nav image 6dd2eea4082c2c9d7de5225d159ee8d3f43b421a32e59abc010dc58eeb9df612

Обращения

Самый популярный сценарий использования сайта. Задать вопрос, пожаловаться, получить консультацию, предложить инициативу — всё это можно сделать на сайте.

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

Отследить статус обращения и узнать ответ можно будет в удобном личном кабинете. Запуск этой функции состоится позже

Документы

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

Также реализовали поиск по нескольким параметрам: просмотр документов на сайте, скачивание в нескольких форматах.

Docs image 949b6d821b9c8bb10105fa5f98770bd17bce26e80a6d34c6404d10b6125409a7

Внутренние страницы

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

Адаптивность

Сайт корректно отображается на любых устройствах, не теряя функциональности и удобства.

Adaptive image 65f263955150c03c263dd6666d4bc5dd8818b7aaa4146c638fc826097b03062b

Детали работы над сайтом

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

Любой страницей можно поделиться в социальных сетях одним кликом.

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

В общей сложности собрано порядка 50 дизайн-макетов. Для работы над этим проектом перешли на Sketch — масштаб сайта и необходимость повторного использования компонентов потребовали нового инструмента. Обратного пути в фотошоп больше нет

Share docs image bf3fbfa429eda86fb9ecaf7e34a27b583f4eefe8ab8e05e254017ada185b9b92
Iphone image 7f1a4043e6bdb70697524a96a87aa00c975b33c8c6123ed25fedb1d0b4b7e521
Makets image 936e7cae369af83f494da7e4feff59180b58b1971b09a3ac5299acb8842e7ab1

Результаты и перспективы

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

Теперь все новые сайты госорганов в области можно разворачивать в три раза быстрее и значительно дешевле. При этом все они будут говорить с пользователем на одном визуальном языке. Станут проще и удобнее.

Есть проект? Давайте обсудим!
Отправьте заявку на расчёт стоимости или свяжитесь с нами
любым удобным для вас способом
Сайт использует файлы cookies и сервис сбора технических данных его посетителей.
Продолжая использовать данный ресурс, вы автоматически соглашаетесь с использованием данных технологий.