skip to Main Content

Информационный портал для Нацполиции Украины

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

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

ia-example
WallOfStickies_v2
map

Клиент & Заказчик

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

Клиент проекта: государственная служба, Национальная Полиция Украины.

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

Заказчик проекта, он же спонсор: Консультационная миссия Европейского Союза, EUAM (The European Union Advisory Mission).

Цель EUAM в Украине: поддержать реформирование сектора гражданской безопасности в целои. Национальной Полиции, в том числе.

Источник финансирования: КМЕС из бюджета ЕС.

Цель и задачи проекта

Цели проекта

Create a website
security (1)
Create a website

Создать сайт Национальной полиции Украины. Сделать его удобным и понятным

security (1)

Создать сайт Национальной полиции Украины. Сделать его удобным и понятным

Улучшить имидж полиции, повысить уровень доверия среди украинцев

Задачи проекта

11
11

Решить все технические проблемы и неудобства, которые были присущи старому веб-сайту:

  • перейти с СУБД Oracle на более простое решение;
  • изменить программное обеспечение администрирования сайта с существующего десктоп-клиента на веб-платформу (CMS);
  • обеспечить возможность легко и быстро добавлять новости;
  • разработать адаптивную версию портала и всех региональных сайтов.
22
22

Реструктурировать разделы сайтов для

  • более быстрого поиска
  • удобной и понятной навигации
33
33

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

44
44

Обеспечить возможность наполнения сайтов слудующими видами медиаконтента:

  • видео с youtube
  • фотографии
  • прямые трансляции
  • новостная лента
  • блог под большое количество статей

Решение от Evergreen: создание сайта, понятного и удобного для всех пользователей

Функциональный и мобильный сайт. 24 сайта - одна админка

Для удобства сотрудников НПУ мы изменили ПО администрирования сайта на простую в использовании CMS. Она отлично подходит под сайты с большими объемами информации и объединяет региональные сайты с главным (npu.gov.ua). Систему управления базами данных (СУБД) Oracle мы заменили на MySQL, которая значительно проще в использовании.

npu3-min

Была создана базовая модель региональных сайтов, от которой наследуется каждый последующий региональный сайт. Областные сайты мы разместили на поддоменах, к примеру: hk.npu.gov.ua (Харьковская область). В рамках созданной системы администратор портала может создать новый сайт, назначить регионального администратора и контент-менеджеров. Платформа разграничивает сферу деятельности региональных менеджеров и регламентирует их права. Каждый из них видит и правит только свой сайт и может управлять контентом сайта любой области из общей админпанели. Новый сайт создается из админ-панели в несколько кликов мышки.

Каждый из сайтов доступен на украинском, русском, и английском языках.

npu_en_1

Все региональные версии сайта НПУ имеют идентичный дизайн и структуру, но различный контент. Для оперативного наполнения сайта с места происшествия мы создали автономную мобильную версию. Сотрудники пресс-служб разных областей имеют возможность заходить в административную панель с мобильного телефона и оперативно обновлять информацию. Новости можно быстро экспортировать из word и преобразовывать в редакторе в html или text формат.

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

npu-be-sm
Удобный сайт, упрощенная структура, понятная навигация, продуманный ux дизайн

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

Screenshot_3

Результат:

  • меню из 6 категорий вместо 12
  • 41 пункт вместо 63
  • 3 секунды вместо 10 для нахождения нужного пункта
Screenshot_42

Важно

В хедере главной страницы

  • контактный телефон горячей линии
  • кнопка быстрой подачи заявления
  • карта для перехода на региональный сайт.
Screenshot_43

Очень важно

Цель большинства пользователей — подать заявление.

  • Кнопка подачи заявления дублируется четырежды.
  • Телефон горячей линии — дважды

Эти элементы дублируются в нижней части сайта. Также в футере:

  • вопросы и советы
  • вакансии
  • информация о реформах
  • подробная карта сайта
Screenshot_6
Имидж полиции и доверие украинцев: обеспечиваем приятным UI

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

colors

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

Screenshot_28

Архитектурное решение UI позволяет эргономично расположить огромное количество статей, новостей, фото/видео материалов. Это легко консолидирует новости из 24 регионов на новостную ленту главного сайта.

В новостной ленте по сравнению с предыдущей версией добавлены:

  • категории новостей
  • поиск по дате
  • подсказки в виде тегов
  • иконки, которые указывают на наличие фото/видео материалов в статье.
Screenshot_9

Тех-стек

  • Open source CMS + multidomain modules
  • MySQL
  • NodeJS
  • Gulp

Юзабилити аудит - UX, проверенный людьми

Команде Evergreen удалось создать простой и удобный сайт для 3-х категорий пользователей

1. Граждан Украины

group (1)

2. Работников полиции

security (1)

3. Пресс-службы

journalist

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

Основные тесты и их результаты:
11

Легко ли найти сайт полиции в другой области

Задание: найти сайт полиции в Винницкой области. История поиска по кликам:

Карта Украины

dotmdpi

Ссылка «обласні сайти» в правом углу хедера

dotmdpi

Пункт меню «контакти»

dotmdpi

Поиск

Любой из этих вариантов приводит к нужной ссылке.

Вывод: проблемы в нахождении сайта другой области не обнаружены.

fa7b94bc42
two

Понятно ли, как написать жалобу на полицейского

Задание: «Вы хотите пожаловаться на полицейского, написав заявление прямо на сайте. Ваши шаги…»

Итог: по результатам кликов в открытом меню столбец «звернення» был перенесен в левую часть экрана, поскольку читать пункты меню начинают слева направо. Этот пункт очень важен, следовательно, у него приоритет в расположении

26c769c408
33

Как вернуться на главный сайт полиции

Задание: вернуться с регионального на главный сайт полиции.

Итог: затруднений не обнаружено

b38a1dae1f
Можно ли свести на нет усилия разработчиков UX некорректным внесением контента?

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

Мы оказываем консультативную поддержку пресс-службе НПУ и рады, что наше сотрудничество помогает поддерживать и развивать сайт.  

В следующем проекте мы реализовали для сайта Национальной Полиции версию для слабовидящих. Об этом — в кейсе Адаптация сайта для слабовидящих

Нужно создать масштабный портал или сайт со сложной архитектурой? Структурировать большое количество разделов? Или вы хотите мобильное управление сайтом прямо с телефона?  Пишите, мы можем это и многое другое.

21.12.2018
Рейтинг: 5 / 5 (1)
Цей сайт є українською мовою. Ви можете переключити мову у меню, або зробити це зараз.