UI/UX Modernization for a Construction Management Web App

The lack of documentation, which is a usual thing for legacy software developed by multiple teams, was the first challenge to overcome. Our business analyst could only rely on the user guide to prepare a Scope of Work. However, in close cooperation with the client, we fully understood all the specifics of the system. And SOW allowed our team to identify all possible app modernization options and consider all the customer requirements.

It is vital to mention that the application had to work with large amounts of data presented in tabular form. Therefore, our most significant task was getting rid of those static forms and implementing configurable dynamic tables and forms that can be adjusted according to the users’ needs with the fewest restrictions.

The idea of implementing and using dynamic forms consisted of a simple plan: the complete configuration of the form elements (type, template, width of elements, etc.) comes from backend to frontend. Each component had a sequence, showing odd ones in the column on the left side and even ones in the right column.

The dynamic approach allowed an administrator to have control over the app’s appearance right from the backend. All the styles were saved on the frontend, while all the elements were loaded from the backend. The approach was simple to put into action, because our client’s developer knew the system’s backend side well and was able to make changes in API. Besides that, their backend was already able to send table configurations on the frontend. To improve the app’s UX and entirely rebuild the front-end with ease, our development team used Webix JavaScript UI library. It was possible for us to adapt Webix to this functionality and bring our plan to reality.

With the help of Webix, we were able to include, for example, adding and removing columns to a table or fields to a form. In addition to a clearer look, our developers also gave app users easy access to a set of useful functions, such as global search with highlighting of searched fields, complex filtering, multiple sorting, display data configuration, and others. To improve the overall workflow and improve how users operate with documents and other files, we added filter templates. They helped to make the process faster and easier and, if needed, a user is now able to save favorite templates to find documents with just one click.

Bulky icons of the old app did not always make the purpose of certain buttons clear. For a better user experience, our team has reworked all the old controls and added text buttons, which are now directly informing users what they are for. Besides that, we added two versions of the app (white and black) and the feature to set custom themes, choosing the desired colors and functionality.

Lists of users related to a specific project were supplemented with photos, by clicking on which you can now access additional information, such as the role on the project and contact details. We also added the possibility to set roles to users and configure their access rights. All changed settings can now be saved as user templates locally in a few clicks. If needed, users can roll back to the default settings received from the server. To ensure a gradual and painless transition to the new user interface, our developers also added the ability to switch between its old and familiar version and the new one.

Taking a closer look at the complex Webix components we used, we want to pay attention to the three key management tools.

Thus, to enable advanced reporting, our developers used the Webix Report Manager widget. Before the app modernization, reports were available only in the form of tables and can be configured only by administrator. We allowed all users to create and configure reports of any complexity as they want by implementing manager rights as default for all users. As a result, they now have a possibility to set various data sources and combine them, create and save filter queries, group, filter, and sort data by different criteria, etc. They are also able to visualize reporting data as configurable tables, diagrams, or heatmaps, and reports could be exported into various formats, including CSV, Excel, and PDF. Among other advantages that the Report Manager gave to our client, we can mention:

• Easy access via the web browser;
• Efficient work with large and complex datasets;
• An extensive set of data operations, including counting, comparing, and giving the average values.

Webix Document Manager was used to ensure comfortable work with cloud file storage. Its broad customization abilities allowed the development team to use it in two ways. First, as a separate widget for working with files. Second, as a separate block on the document page for attaching files to it. This widget also allowed searching files, viewing, editing, and adding tags, which now helps to organize files and folders. Users can comment on files and share them with their colleagues to improve teamwork. Additionally, Document Manager allows to:

• Switch between old and new layouts;
• Make quick on-the-fly changes in files;
• Play audio and video files;
• Use the preview panel for quick navigation.

To help admins efficiently manage user roles, our developers used the Webix User Manager widget. With its help, the administrator is now able to quickly add new users with specific access rights and permissions or adjust rights for existing users. Provided functionality also includes:

• Tracking all user actions and built-in security audit;
• Analyzing and summarizing user information;
• Automated identification and authorization.

It is also important to mention that our client’s backend developer added new API end-points to easily use our complex Webix widgets. We explained in detail which API end-points should be added and which URL we need to send requests to get the data for all three widgets. They added them, and we were able to successfully integrate all the updates to the application.