UI/UX Application Modernization for a Construction Management with Webix [Case Study]

UI/UX Modernization for a Construction Management Web App

A comprehensive web application for a construction company that works with vast amounts of data from different sources. The app provides rich data table configuration, reporting, and analysis functionality.

UI/UX Modernization for a Construction Management Web App

Business Challenge

Our client’s application is a construction project management solution with full collaboration capability. It manages activities related to construction projects from the initial idea to completion. Project partners can access the toolset that the app provides. It includes customers, stakeholders that may have a financial influence on the application itself, contractors, subcontractors, etc. The system ensures the right person has the correct information at the right time. The application has been developed to be data-driven, so the content can be generated properly, turning on and off the functionality for different users.

The system provides the following:

  • Many collaborative project management features, including different communication methods for project participants;
  • Document flow management (route, approve, review, and update project documents);
  • Document and file management (with the possibility to integrate with cloud storage);
  • Alerts;
  • Project budget management, cash flow management, and forecasting.

The application has been on the market for almost 20 years. During this period, multiple new functionalities were added, often by different software development companies. As a result, the application received an impressive set of features. However, all developers used their unique approaches resulting in a lack of unified UI/UX design across different system parts. The app didn’t follow the UX trends considered a must-have nowadays.

The client asked us to modernize the application’s UI/UX. All app parts should comply with the same design principles according to the requirements. It was essential to ensure users won’t feel like they work with different apps when switching between various pages. Also, users would like to have complete control over table and form configuration. It includes changing the displayed data, creating roles for specific project participants, flexibly configuring access rights, etc. Another requirement was to ensure a smooth transition between the old and new versions of the application. It was important for users who were generally satisfied with the old app and did not want drastic changes.


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.

Implemented Components

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.

Similar Project Idea?

Send your requirements and get an assessment

Project in Figures


Applied Technologies



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.

Fill the form to get a no obligation consultation from our experts
Your questions and requests are always welcome