skip to Main Content

Інформаційний портал для Нацполіціі України

Створюємо портал з оптимальною структурою для великої кількості контенту, і 24 окремих регіональних сайти з об’єднаним управлінням

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

Complex architecture
Huge amount of content
Disigning 24 separate regional websites

Клієнт & Замовник

Крім складнощів технічного характеру, в цьому проекті був адміністративний нюанс: клієнт ≠ замовник. Тому для затвердження багатьох пунктів проекту були потрібні десятки дозвільних підписів різних інстанцій обох суб’єктів взаємодії.

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

Вимога клієнта: створити цікавий, інтуїтивно зрозумілий сайт – інформаційний портал національної поліції та всіх її регіональних відділень.

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

Мета EUAM в Україні: підтримати реформування сектора громадянської безпеки в цілому. Національної Поліції, в тому числі.

Джерело фінансування: КМЕС із бюджету ЄС.

Цілі й задачі проекту

Цілі проекта

Create a website
Police
Create a website

Створити сайт Національної поліції України. Зробити його зручним і зрозумілим

Police

Створити сайт Національної поліції України. Зробити його зручним і зрозумілим

Покращити імідж поліції, підвищити рівень довіри серед українців

Задачі

1
1

Вирішити всі технічні проблеми та незручності, які були притаманні старому веб-сайту:

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

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

a. більш швидкого пошуку;
b. зручної та зрозумілої навігації

3
3

Продумати новий дизайн згідно Брендбуку Нової Поліції та її потреб.

4
4

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

  • відео з youtube
  • фотографії
  • прямі трансляції
  • стрічка новин
  • блог під велику кількість статей.

Рішення від Evergreen: створення сайту, зрозумілого і зручного для всіх користувачів

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

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

NPU home page

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

Кожен із сайтів доступний українською, російською і англійською мовами.

NPU infographics

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

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

adaptive design
Зручний сайт, спрощена структура, зрозуміла навігація, продуманий ux дизайн

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

NPU Header

Результат:

  • меню з 6 категорій замість 12
  • 41 пункт замість 63
  • 3 секунди замість 10 для знаходження потрібного пункту
NPUI infographics results

Важно

В хедері головної сторінки

  • контактний телефон гарячої лінії
  • кнопка швидкої подачі заяви
  • карта для переходу на регіональний сайт.
NPU news

Дуже важливо

Мета більшості користувачів – подать заяву.

  • Кнопка подачі заяви дублюється чотири рази
  • Телефон гарячої лінії – двічі

Ці елементи дублюються в нижній частині сайту. Також у футері:

  • питання й відповіді
  • вакансії
  • інформація про реформи
  • докладка карта сайту
NPU footer
Імідж поліції та довіра українців: забезпечуємо приємним UI

Дизайн розроблено згідно Guideline нової поліції. Він містить ті ж стилі, кольори та шрифтові пари, які присутні на всіх знаках відмінності, бордах і документах.

NPU colors

Основа естетики нового дизайну – простота й лаконічність. Для покращення сприйняття інформації використовується мікроанімація. Важливі текстові блоки оптимізовані й подані у вигляді інфографіки.

NPU structure

Архітектурне рішення UI дозволяє ергономічно розташувати величезну кількість статей, новин, фото/відео матеріалів. Це легко консолідує новини з 24 регіонів у новинну стрічку головного сайту.

В стрічці новин у порівнянні з попередньою версією додані:

  • категорії новин
  • пошук по даті
  • підказки у вигляді тегів
  • іконки, які вказують на наявність фото/відео матеріалів у статті.
NPU news display

Тех-стек

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

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

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

1. Громадян України

Residents

2. Працівників поліції

Police

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

Press services

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

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

Чи легко знайти сайт поліції в іншій області

Завдання: знайти сайт поліції в Вінницькій області. Історія пошуку по клікам:

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

dotmdpi

Посилання “Обласні сайти” в правому кутку хедера

dotmdpi

Пункт меню “Контакти”

dotmdpi

Пошук

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

dotmdpi

Посилання “Обласні сайти” в правому кутку хедера

dotmdpi

Пункт меню “Контакти”

dotmdpi

Пошук

Будь-який із цих варіантів приводить до потрібного посилання.

Висновок: проблем зі знаходженням сайта іншої області не знайдено.

Test 1
two
two

Чи зрозуміло як написати скаргу на поліцейського

Завдання: “Ви хочете поскаржитися на поліцейського, написавши заяву просто на сайті. Ваші кроки…”

Результат: за результатами кліків у відкритому меню стовпчик “Звернення” було перенесено в ліву частину екрану, оскільки читати пункти меню починають зліва направо. Цей пункт дуже важливий, відповідно, він має пріоритетність у розташуванні.

Опитування дало нам розуміння, що назва розділу в попередній версії “Звернення громадян” сприймалась користувачами невірно. Вони припускали, що це – текстова сторінка з законами. Пункт було перейменовано на “Подати звернення”. Ця назва зрозуміла й містить у собі заклик до дії.

Test 2
3
3

Як повернутися на головний сайт поліції

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

Висновок: жодних ускладнень не виявлено

Test 3
Чи можна звести нанівець зусилля розробників UX некоректним внесенням контенту?

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

Ми надаємо консультативну підтримку прес-службі НПУ і раді, що наша співпраця допомагає підтримувати і розвивати сайт.

У наступному проекті ми реалізували для сайту Національної Поліції версію для слабозорих. Про це – в кейсі “Адаптація сайту для людей із вадами зору

Потрібно створити масштабний портал або сайт зі складною архітектурою? Структурувати велику кількість розділів? Або ви бажаєте мобільне управління сайтом прямо з телефону? Пишіть, ми можемо це, і багато іншого.

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