Case of development and publication of open access UI kit for websites of state administrations of Ukraine

The UI kit is a web interface kit. It contains interface components: icons, widgets, checkboxes, progress indicators, and navigation buttons. This is a ready-made set of layouts and components that can be used by a designer or layout designer to revise and re-use the ready-made material for their own needs and tasks.

We have a universal style in our country that is recommended by the Department of Digital Transformation. This means that it is possible to create universal templates that will fit almost any government agency. Moreover, the country's general course towards digitalization also implies a wise use of resources. We came up with the idea of creating universal templates that could be used by any government agency.

We were guided by the Mobile First approach - all pages were created initially for display on mobile gadgets.

(Mobile First and a set of design templates for display on mobile)

We have worked through such pages (for mobile and web display):

1. Home Page
2. Articles (news) feed
3. One article (news) page
4. Section with employees of the administration
5. Page with information about one employee
6. Page with contacts of administration
7. Worked out the GUI - that is, the active states of elements

(Set of ready-to-use design templates for web sites)

In addition, we worked through about 50 icons to use, as well as fixing a style guide (fonts, colors, buttons, margins) and basic components (quotes, accordion and breadcrumbs).

(Set of ready-made icons)

What is the value of an open UI kit?

1. Ready template. The city council or regional administration will not need to spend time and specialist resources to think through the structure and logic of the future site. It has already been developed by an experienced interface team and can simply be taken and implemented
2. The solutions in the UI kit are designed according to the requirements of the Ministry of Digital Transformation. This means that the unified style of the digital state is respected.
3. UI kit was designed by experts with 14 years of experience in website development. In addition, the creation was based on current trends in web design.
4. Ready UI-kit - a quick start on the project. Literate UX / UI closes the very first stage of development of the project, and allows you to quickly move on to the development. We've put together everything a webmaster might need: components, layouts, widgets, hover states, and a mobile version.
5. The solution can be obtained completely free of charge. Consequently, there is no need to spend budget money to develop an expensive website. Especially now is not the best time to invest hundreds of thousands of budget grivnas in the development of state portals.

Who can use the UI kit?

From the point of view of the state, the key users of the UI kit are the services that use the sites to inform citizens, as well as to collect feedback. Among them: press services, CTOs of public services, as well as specialized departments.

Recently, they have been targeting to upgrade their resource fleet. We believe that this is a great opportunity to update the websites of public administrations for free, or cut the budget tenfold. From the citizens' point of view UI kit users are all of us who receive information from the state bodies, use the services and give feedback, complaints or suggestions.

The key task is to increase the speed of modernization of state information resources. Make it a fast, efficient and free process.

Why was such a design decision made?

We have been working with government agencies for more than 10 years, so we have a fairly strong expertise in understanding what should be on such sites. We know that 90% of these resources solve the same problem - informing users about the news, as well as collecting feedback from residents. Some of the resources created by our team for city administrations were developed 7 years ago, but they are still relevant today.

In consultation with the Kharkiv City Council we decided to make publicly available the UI kit, built on the basis of the site of Kharkiv City Administration.

Speaking about the style of the site we proceeded from the logo and corporate identity of Kharkiv City Council, and also took as a basis the guidelines for the state structures from Dia.

The main objectives that guided us in the development of the design for the UI kit were:

• simplify the structure of the site and make a convenient menu;
• to ensure the availability of the news block, since it is the most popular section of the site;
• make quick access to contacts and feedback forms;
• see to it that the information is kept clean and organized;
• to ensure the flexibility of the structure for updating and scaling;
• compliance with the design system of state sites of Ukraine