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

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

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

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

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

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

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

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

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

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

1

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

2

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

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

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

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

Principles image 872b1b19ec7d1bea3fdc47067fa09d4fe455eafee562b966bbd52b12c4a6412d

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

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

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

Guide image 73bea2e1468934b55913f8d513eee19b769f471f13d51a2b4680559b0fb976c2

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

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

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

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

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

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

Prototype image 2e6f229a036a1c51dbde8d6451d127354ee1fac54bf856d739eb3f8e99c76971

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

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

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

Main image 1 57ba0ed7eb7b01e729d329268ea915b7f037a4b3a8be27c27ad8a83a2f6da8c9
Main image 2 9fd8b5ef99274b96ba1bf5e3845370e9879becd8b858c2b41b1a0122b85f3e56
Main image 3 4117662b32a9a91f32fbd683cf5c30f62b7075c72ea1d236cfedc397426bd602

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

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

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

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

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

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

Nav image 7550beb382e41ae566100dff3468075d2d54e984717eafcc685af5b8371a7778

Обращения

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

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

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

Документы

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

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

Docs image b742c83559dbb9f047fa211d367b93c2464e2247a126612e2385bcaab1f6927f

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

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

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

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

Adaptive image f959041eb0c31930e43a29c82c79ce609d290529ff7fb4f6e6f529c49d025c53

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

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

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

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

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

Share docs image eef40e180590d9107f10c7eef322c13c021080ed5cbce04789587cc01acb72c6
Iphone image 1901348ca2a32dfec6d35e10221e40acbcac9513088020bf207f5d0bbc5960b0
Makets image c129419c387aad06a5c652da8cd4a55cdd384ce506fece61bdf94695a19947b5

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

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

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

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