Contact

Financial Management System Restyling

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

Discuss an idea

All Technologies Used

HTML5
HTML5
CSS3
CSS3
Sass
Sass
Gulp
Gulp

Motivation

The goal was to update and redesign the existing UI of a municipal finance management system, which included fixing bugs, optimizing styles for mobile devices, and improving the user interface for both desktop and mobile. Azati’s objective was to provide an updated and user-friendly interface that would enhance the user experience and ensure that the system works seamlessly on all devices.

Main Challenges

Challenge 1
Access Control Policy

Due to strict access control policies, our team faced delays in deploying and testing the UI. Our engineers couldn’t preview the UI changes immediately, as they needed to go through project managers and the in-house team. This created a bottleneck, which was partially addressed by implementing continuous integration for CSS deployment.

Challenge 2
Lack of Accurate Task Description

The absence of detailed issue tracking made task management challenging. Tasks were assigned directly by project managers with no clear software tool for tracking progress. As the project expanded, the team introduced Trello Boards for clearer task definition and tracking.

Challenge 3
Fixed HTML Structure

The project was complicated by the fact that the initial HTML structure couldn’t be altered. Since the back-end automatically generated the HTML, making changes was difficult without complex JavaScript manipulations. Azati’s engineers worked closely with the back-end team to push desired HTML changes into production.

Key Features

  • UI Components: Created reusable components for Icons, Buttons, and Tables.
  • Optimized Styles: Optimized styles for both desktop and mobile layouts, ensuring cross-device compatibility.
  • Tables: Refined and redesigned five key tables displaying financial data, including budget estimates, bank details, and business trip records.

Our Approach

Continuous Integration Setup
To address deployment delays, Azati proposed setting up a Continuous Integration pipeline to automate code deployment, improving speed and workflow efficiency.
Optimized CSS Management
Azati implemented strategies to prevent CSS from interfering with other components. The team isolated CSS for each UI component and created guidelines for reusable and scalable stylesheets.
Mobile Optimization
Azati also optimized the mobile version of the interface, ensuring compatibility with older and newer devices. This involved optimizing front-end code to support both old PCs using Internet Explorer 10 and modern tablets using recent versions of Safari.

Project Impact

Azati successfully enhanced the front-end performance, fixed existing bugs, and created a bug-free product with an updated design.

The project included optimization for mobile devices and performance improvements, such as lazy loading and reduced page weight. These improvements contributed to better usability and a more efficient system overall.

Ready To Get Started

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.