Создание масштабного информационного портала и оптимизация его структуры 8 Создание масштабного информационного портала и оптимизация его структуры 9 Создание масштабного информационного портала и оптимизация его структуры 10

Нац. Полиция Украины

#Кейсы #Отраслевые решения

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

 Технические моменты

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

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

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

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

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

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

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

 

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

ЦЕЛИ ПРОЕКТА

Сайт Имидж

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

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

ЗАДАЧИ ПРОЕКТА

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

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

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

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

Создание масштабного информационного портала и оптимизация его структуры 14

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

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

РЕШЕНИЕ ОТ EVERGREEN: СОЗДАНИЕ САЙТА, ПОНЯТНОГО И УДОБНОГО ДЛЯ ВСЕХ ПОЛЬЗОВАТЕЛЕЙ

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

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

Обзор сайта

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

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

Достижения

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

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

Адаптивный дизайн

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

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

Навигация сайта

Результат:

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

Результат

Важно

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

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

Хеддер сайта

Очень важно

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

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

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

  • вопросы и советы
  • вакансии
  • информация о реформах
  • подробная карта сайта

Футер сайта

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

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

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

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

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

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

Новости на сайте

ТЕХ-СТЕК

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

ЮЗАБИЛИТИ АУДИТ - UX, ПРОВЕРЕННЫЙ ЛЮДЬМИ

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

Категории пользователей

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

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

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

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

  1. Карта Украины    
  2. Ссылка «обласні сайти» в правом углу хедера
  3. Пункт меню «контакти»
  4. Поиск

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

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

Легкость поиска

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

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

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

 Пример навигации

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

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

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

 Главная сайта

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

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

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

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

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

21.12.2018
Используемые в статье картинки взяты из открытых источников и используются как иллюстрации.
Хотите обсудить ваш проект или заказать разработку?
Отправить
Цей сайт є українською мовою. Ви можете переключити мову у меню, або зробити це зараз.