Financial Management System Restyling

Azati helped the customer to complete the redesign of the financial management system. Our team created a reliable, bug-free and up-to-date user interface for both desktop and mobile.

CUSTOMER

The Customer is a well-known CIS-based company that develops software and provides consulting services for governmental and business sectors. Azati has been operating with the customer and its clients for several years, creating cutting-edge and reliable solutions for different institutions and verticals.

The product line covers critical areas of state and municipal management:

  • Procurement management
  • Property and asset management
  • Provision of state and municipal services
  • PostgreSQL and Postgres Pro database management systems
  • Docsvision electronic document management system
  • and etc.

Since 2010 the Customer successfully completed over 5000 projects in 79 regions. Today its’ solutions power more than 9,500 municipal facilities all across the CIS.

Objective

Websites and online systems have proved themselves as a helpful tool for doing business, and a lot of attention is paid to their improvement. Web solutions are constantly evolving, changing and adapting to new market requirements and technologies.

A redesign is usually planned when it becomes clear that a current version is outdated and does not satisfy business needs. Also, some technologies become obsolete and hard to support due to a lack of modern features.

The design of the customer’s existing solution was outdated and contained many annoying bugs that ruined the entire look and user experience. The customer turned to Azati’s to finalize the redesign process and fix all malfunctions and shortcomings on the admin panel of an automated municipal finance management system.

Our extra objective was to optimize the version’s styles for mobile devices alongside fixing and updating the desktop version.

Challenges

01. Challenge

The most crucial problem our team faced was the access control policy. At Azati, we respect data protection in all ways, as access control provides rational information use and ensures data security. But sometimes, extra measures significantly increase the amount of time needed to complete simple actions.

When a developer styles user interface, he wants to see the result as soon as possible to check how it looks and feels. However, there was no such possibility, as our engineers should contact the in-house team through the project manager for all deployments.

As the codebase was continually changing, it was hard to maintain the changes, sync local and remote stylesheets. This issue was partially solved when our team proposed to set up continuous integration for CSS deployment.

02. Challenge

The lack of accurate task description was yet another issue the team faced. Our engineers communicated directly with project managers, who assigned all tasks, but no additional software was used for issue tracking.

Such an approach created additional difficulties both for the development and management teams. Our team’s proactive standpoint helped to smooth things over, but as soon as the project grew, the manager decided to move task definition to Trello Boards.

03. Challenge

Unfortunately, the Customer involved Azati after the in-house team had already built page layouts. It means that it was impossible to change the initial HTML structure of the page.

As the back-end automatically generated HTML, it was hardly possible to edit it without complex JavaScript manipulations, which caused many difficulties. Soft skills helped Azati establish contact with the back-end team and push the desired HTML changes to production..

Process

The team worked with two project managers simultaneously. However, due to a lack of necessary access, inspecting the results, and the subsequent bug fixing process took much more time than expected.

Our engineers did not have direct access to the staging and production servers. It means that if the team wanted to push something to the staging server, they should pass the source code to the manager, who followed the request to the in-house DevOps team.

The team proposed setting up a Continuous Integration pipeline that automated code deployment and version delivery.

As several teams worked on the same project, it was a typical situation when some CSS was not isolated properly and affected other components’ display. To eliminate this issue, Azati accompanied all table fields to the same style, as initially, they were all done differently. The team also isolated CSS for all UI components and created guidelines for other developers on building scalable and manageable stylesheets.

Afterward, our developers optimized the mobile version’s front-end to provide convenient access from any devices: both old PCs that use Internet Explorer 10, and modern iPads powered by recent Safari versions.

Solution

The main objective of Azati was exclusively revision, style optimization, and bugfix of the new UI version.

Azati worked on a management system where admin are able to overview budget estimates, bank details and also transcription of records, which is represented in tables.

Such tables had outdated and “crooked” designs, so Azati helped the customer to adjust all field
styles for each of the five tables:

#1 Budget estimates

Number
Date
Status
Sum
Budget period

#2 Bank details divided into 2 subtables:

Budget estimates details

Number
Date
Department
Budget period
Estimate type

Responsible persons

Authorized person
Head of Planning and Finance Service
Performer

#3 Estimates

Section/subsection
Type of expenditure code
Expenditure title
Expenditure sum

#4 Additional details

Section/subsection
Type of expenditure code
Expenditure title
Planning figures
Expenditure sum

#5 Transcription of record (for business trips)

Business trip destination (country/city)
Business trip objective
The number of employees
Duration
Business trip expenditures

SCREENSHOTS

Technologies

 
 
 
 

Results

Azati managed to:

#1

Improved overall front-end performance

#2

Optimized page speed and canvas performance

#3

Implemented lazy loading and decreased page weight

#4

Created reusable components for Icons, Buttons, Tables

#5

Optimized styles for desktop and mobile layouts

#6

Cleaned up CSS from redundant code

#7

Fixed existing bugs

Finally, our engineers managed to create a bug-free product with an updated design and clean styles.

Now

Our cooperation with the Customer is going on for several years for a variety of projects. The Customer is satisfied by the cooperation outcomes and continues the partnership with Azati.