Euronavigator Web Development & Product Design

EXECUTIVE SUMMARY

A few years ago Ukraine started the way of democratic transformation. At this point, Ukraine is going through the process of economic integration and political association with the EU. The Association Agreement requires gradual implementation lots of the EU Normative legal acts in the Ukrainian legislation. Before the project execution, Ukrainian Centre for European Policy (UCEP) was monitoring the process of implementation in a manual mode, with very limited clarity. LaSoft offered UCEP a custom dashboard solution which automates the process of data collection and representation. Today our solution is saving time and efforts of UCEP employees, but also it provides 100% of visibility to anyone with access to the internet.

Ukrainian Centre for European Policy (UCEP) was monitoring the process of implementation in manual mode. We offered them a custom solution that helps to save time and money.

We started working on the Euronavigator dashboard system to track the process of implementation of legislative acts for Ukraine`s realization of commitment according to the Association Agreement. Euronavigator’s aim is to inform citizens about the execution requirements and develop the ability to keep an eye on the progress towards realizing these requirements.

ABOUT THE COMPANY/CLIENT

Ukrainian Centre for European Policy (UCEP) is an independent think-tank and advocacy group, founded in 2015.

The mission of the group is to promote reforms in Ukraine in order to ensure democratic development, sustainable economic growth and implementation of the EU-Ukraine Association Agreement, with a special focus on the free trade area.

ACTIVITIES:

• Preparing and dissemination of expert-analytical materials in order to promote reforms for implementation of the EU-Ukraine Association Agreement;
• Promoting European values in Ukrainian society;
• Informing a society about the opportunities and advantages of the partnership with the European Union;
• Facilitation to increase economic, political and trading partnership between Ukraine and the EU;
• Informing the international community about challenges and achievements in process of implementation of required reforms according to the Association Agreement.

Development tools

• Back-end: Ruby on Rails
• Front-end: HTML, CSS, JavaScript
• Hosting: DigitalOcean
• Database: PostgreSQL

THE CHALLENGE

The main customer’s need was to create a transparent tool in order to monitor the process of implementation of the EU-Ukraine Association Agreement. When we first started working on the project, the client wasn’t able to process the data easily. To create the Administrative panel, users had to write down required data in Excel tables. A CSV file was generated in order to be uploaded into the old version of the Infographic.

Our highly-qualified team offered a unique solution and the client received an easy-to-use interface with the ability to search, filter and sort the data. It was decided to create a bot service (Scrapper) that helps to automate the processing of the Eurolex website to gather keywords for the future search of appropriate legal acts on the website of The Verkhovna Rada of Ukraine (Supreme Council).

Every day Scrapper checks the availability of new euro integration legal acts on the Verkhovna Rada web page. When new acts are detected Scrapper offers to add them to the EU database for future implementation tracking.

THE SOLUTION

The project is composed of two applications: The Administrative Panel and Interactive Infographics.

1. The Administrative Panel is intended to fill and edit data about European acts, tasks which are accepted and accomplished by Ukraine to fulfill the requirements of the EU-Ukraine Association Agreement. A very important function of the Administrative panel is processing data that is gathered by Scrapper.
2. An interactive infographic is an online tool that represents the result of Ukraine’s implementation of the Association Agreement. The data updated in the Infographic is carried out after a change of legislation on both sides.

We started with planning and had to spend some time in the client’s office to understand better all tasks to be solved during the data processing. The next step was the design development, which meant a number of meetings with the client in order to find the most optimal design solution for the Administrative Panel and Interactive Infographic.

DESIGNER’S INSIGHT

“Backend application consists of 3 parts: a bot (a web crawler allows automatical monitoring the EU and Ukrainian online legislative base, tracking and saving all changes), internal API (used to fill and edit data in the manual mode) and public API (provides users with a real-time information about the status of implementation of the Ukraine–European Union Association Agreement in infographic).

Working with a big amount of data with a lot of relations was quite challenging. We faced performance issues, which were resolved by query optimizations of the database and caching. By using Elasticsearch, we have provided our clients with great experience of easy searching. Capybara library helped us to create the bot which automated the process of a data monitoring and analyzing.”

-Taras H., Back-end Developer

“In terms of design, we faced a challenge of visualizing very complex data in the simplest possible way. Our target audience is very busy people who are overloaded with information. So our goal was to provide them with absolutely useful information available at first glance. In our design process, we used Sketch for visualization, Zeplin for collaboration with developers and Marvel for prototyping.”

-Maryana S., UI/UX Designer