Creating a Large-Scale Information Portal and Optimizing Its Structure 8 Creating a Large-Scale Information Portal and Optimizing Its Structure 9 Creating a Large-Scale Information Portal and Optimizing Its Structure 10

Development of a Portal for the National Police of Ukraine

#Cases #UI/UX design

The Evergreen team has developed a new format for the information portal of the National Police of Ukraine. We’d already had experience of interaction with the state service of Ukraine and The European Union Advisory Mission. However, this project took a special place in our portfolio, since we had to take into account a number of difficult technical issues:

technical issues

Client & Customer

In addition to technical difficulties, there was an administrative implication in this project: the client isn’t the customer. Therefore, for getting approval, dozens of authorizing signatures from different instances of both parties were required.

Client: public service, National Police of Ukraine.
Requirements:  to create an appealing and intuitive website – the information portal of the National Police and all its regional offices.
Customer, and the sponsor at the same time: The European Union Advisory Mission (EUAM).
Main objective of EUAM: to support the improvement of the civil security sector as a whole, including National Police.
Source of funding: EUAM from the EU budget.

The Aim and Objectives of the Project

Project Goals

website security

Create a website of the National Police of Ukraine. Make it easy-to-use and consistent

Enhance the image and perception of the police

Tasks

1

Solve all technical problems and inconveniences represented on the old website:
migrate from Oracle to a more straightforward solution:

  • change the website administration software from an existing desktop client to a web platform (CMS);
  • provide the ability to add news quickly;
  • develop an adaptive version of the portal and all regional sites.
2

Configurate the website sections for

  • better search results;
  • convenient and clear navigation.

Creating a Large-Scale Information Portal and Optimizing Its Structure 11

Think over the new design according to the brand book of the New Police and its needs

Creating a Large-Scale Information Portal and Optimizing Its Structure 12

Provide the possibility of filling websites with the following types of media content:

  • youtube video;
  • visuals;
  • live broadcasts;
  • news feed;
  • blog with a significant number of articles.

Evergreen Solution: Creating a Website That Is Readable and Convenient for All Users

Functional and mobile website. 24 sites with one admin panel

For the convenience of employees of the National Police of Ukraine, we changed the site administration software to an easy-to-use CMS. It is great for websites with large masses of information. CMS connects regional sites to the main one (npu.gov.ua). Furthermore, we have replaced the Oracle database management system (DBMS) with MySQL, which is manageable to use.

npu website

We created a basic model of regional websites, from which each following regional site is inherited. Also, placed regional sites were replaced on subdomains, for example, hk.npu.gov.ua (Kharkiv region). Within the framework of the created system, the portal administrator can create a new site, select a regional administrator and content managers. The platform alters the scope of activities of local managers and regulates their rights. Each administrator sees and manages only own site and can adjust the content of the site of any area from a basic admin panel. The new website is created from the admin panel with a few mouse clicks.

All websites are available in Ukrainian, Russian, and English.

npu challenges

All regional versions of the National Police of Ukraine website have the same design and structure, but different content. For the operational content of the site from the scene of an accident, we created an autonomous mobile version. Employees of the press services of different areas have the opportunity to sign in the administrative panel from a mobile phone and quickly update the information. News can be exported promptly from word format and converted in the editor to HTML or text format.

All sites in the portal are adapted to any desktop and mobile devices. This website is accessible to every user (including people with visual disability).

adaptive design

User-friendly website, simplified structure, intuitive navigation, thoughtful UX design

The old website was extremely overloaded with unnecessary categories and menu items, which made navigation extremely difficult. We changed the site structure, clarified, prioritized categories. All necessary information is now accessible in a few clicks.

about npu

Outcomes:

  • 6 categories instead of 12;
  • 41 items instead of 63;
  • 3 seconds instead of 10 search time.

changes

Important

In the header of the main page you can find:
  • hotline;
  • quick application button;
  • regional websites’ navigation map.

npu main page

Extremely important

Application is the prime goal for many users:
  • The application button is duplicated four times;
  • Hotline – twice.

These components are repeated at the bottom of the site. Also in the footer:

  • Q&A;
  • Career;
  • Reforms.
  • detailed site map.

special components

The public image of the police and the trust of Ukrainians are achieved by consistent UI

The website, designed according to the Guideline of the new police, contains the same styles, colors, and font pairs that are represented on all special marks, boards, and documents.

colors and fonts


The basis of the aesthetics of the new design is simplicity and conciseness. To improve the perception of information is used micro animation. Essential text blocks are optimized and submitted as infographics.

infographics

The UI architectural solution allows users to ergonomically arrange a considerable number of articles, news, photo/video materials. It efficiently merges news from 24 regions onto a news feed on the main site.
Improved news feed:

  • news categories;
  • search by date;
  • tag tips;
  • icons which indicate the presence of photo/video materials in the article.

news feed

Tech Stack

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

Usability Audit - Approved UX by Society

The Evergreen team managed to create a convenient and simple website for three categories of users:user categories
Each menu item has been approved and examined for acceptability by the related department. The menu and the entire site navigation has been tested by users several times; and as a result, improved.

The main tests and their results:

Creating a Large-Scale Information Portal and Optimizing Its Structure 13 Is it easy to find a police website in another region?

Task: to find the website of the police in Vinnitsa Region. Click Search History:search historyAny of these options leads to the desired link.

Conclusion: problems in finding the site of another area were not detected.navigation test

Creating a Large-Scale Information Portal and Optimizing Its Structure 14 Is it clear how to make a complaint about a policeman service?

Task: “Do you want to complain of a policeman by writing a claim directly on the website. Your steps …”

The result: according to the number of clicks in the open menu, the “request” column was moved to the left side of the screen, since the menu items were replaced from left to right. This item is critical, therefore, it has priority in the location.complaint test

Creating a Large-Scale Information Portal and Optimizing Its Structure 15 How to return to the main police website?

Task: to go from the regional to the main police site.

Conclusion: no difficulty found.return to the main page

Is it possible to blow any progress UX developers achieved by clumsily adding content?

P.S. After the project was handed over, a member of the press service, who did not have the skill of working with the new website, posted the information in the form with the previous parameters. The result – the design of the site was disordered, and its functioning was hampered. The Evergreen team conducted briefings and training about the page content filling with the press staff. Nowadays, there are some open issues, but in general, the website looks almost like designers developed it.

We provide advisory support to the press service of NPU and are satisfied that our cooperation helps to maintain and develop the website.
In the next project, we have implemented a new version of NPU website for people with visual disability.

Do you need to create a large portal or site with complex architecture? Structure of a large number of sections? Or do you want to manage a mobile site right from your phone? Write, we can and more.

Contact Us 

29.12.2018
The images used in this article are taken from open sources and are used as illustrations.
Do you want to discuss your project or order development?
Send