UI/UX Modernization for a Construction Management Web App

The lack of documented specifications, which is a usual thing for legacy software, was the first challenge to overcome. The business analyst could only rely on the user guide to prepare an SOW that allowed us to identify all possible app modernization options and consider all the customer requirements.

Our development team has entirely rebuilt the front-end using the Webix JavaScript UI library and improved the app’s UX. The application works with large amounts of data presented in tabular form. Therefore, our most significant task was implementing configurable dynamic tables and forms that can be adjusted according to the users’ needs with the fewest restrictions. It includes, for example, adding and removing columns to a table or fields to a form. In addition to a clearer look, our developers 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.

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, directly informing users what they are for. Lists of users related to a specific project were supplemented with photos, by clicking on which you can access additional information, such as the role on the project and contact details.

All changed settings can 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 have added the ability to switch between its old and familiar version and the new one.

To enable advanced reporting, our developers used the Webix Report Manager widget. It allows users to create and configure reports of any complexity, set various data sources and combine them, create and save filter queries, group, filter, and sort data by different criteria. Data can be visualized as configurable diagrams or heatmaps. Reports can be exported into various formats, including CSV, Excel, and PDF. Among other advantages provided by Report Manager, 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 allows searching files, viewing, editing, and adding tags, which helps 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, developers used the Webix User Manager widget. It allows quickly adding new users with specific access rights and permissions or adjusting them 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.

XB Software team has implemented a more user-friendly application interface and enhanced user experience. The new UI/UX design guarantees that users won’t get lost in many similarly-looking tables, forms, and controls. Webix allowed us to implement a more flexible configuration of data tables without sacrificing application performance. Replacing several separate modules with complex Webix widgets helped to follow a more straightforward development approach. It resulted in accelerated development time and reduced costs. It will also help simplify the application customization in the future.