UX/UI and frontend development
for the Autodesk Revit Contract Type Management service
About the project
The project is related to automating work with data from Autodesk Revit.
The customer needed a user—friendly interface to manage CFT (Contract Type), sets of rules that define how various Revit elements and parameters should be used when generating reports.
Initially, the data consisted of structured JSON objects with a large number of parameters and nested filters. The main task was to turn this technical structure into a clear interface that the user could work with without having to edit JSON manually.
Task
It was necessary to develop a UX/UI interface that allows:
- view existing Contract Types in tabular form;
- display the main parameters of each element;
- edit values;
- working with nested filters;
- use drop-down lists for parameters with fixed values;
- get the values of some fields dynamically via the API;
- to make the interface understandable despite the large number of technical parameters.
Separately, it was necessary to think of a way to display nested filters — through a subtable, a separate page, or another user-friendly interface.
The key difficulty
The main problem of the project was not in the amount of functionality, but in the presentation of a complex technical structure.
A single Contract Type contains several basic parameters and can additionally include a set of filters, each of which also has its own fields.:
- team;
- field;
- comparison condition;
- meaning;
- the type of value.
At the same time, some of the parameters have fixed options, and some must be loaded from the backend via the API, depending on the selected values.
Therefore, it was necessary to build an interface that would simultaneously remain compact and allow working with the entire data structure.
Decision
UX/UI
Based on the initial terms of reference, we have developed a Contract Types management interface in Figma.
The basic information was presented in the form of a table, and a separate interface was provided for working with nested filters.
The corresponding controls were used for different types of data.:
- text fields for free input;
- combobox for selecting the report type;
- combobox for Revit category selection;
- dynamic parameter lists;
- selection of comparison operators;
- selecting the type of value.
Thus, the user does not work with the JSON structure directly, but with a visual interface that reflects its logic.
Working with the API
For dynamic fields, the frontend interacts with the ready-made backend API.
In particular, values for categories and parameters are loaded via the API depending on the selected report type and category.
This made it possible not to sew all possible values directly into the interface and keep in touch with the current backend data.
Frontend
After the design was approved, the frontend was implemented in JavaScript and integrated with the existing backend.
We did not develop the backend from scratch — our area of responsibility included the UX/UI and the frontend part, including connecting to ready-made APIs.
Result
As a result, the customer received a ready-made interface for managing CFT structures without having to work directly with technical JSON.
We:
- developed the UX/UI interface;
- designed to work with the basic parameters of the Contract Type;
- implemented the display and editing of nested filters;
- we used dynamic data from the API;
- implemented frontend in JavaScript;
- integrated the interface with the existing backend.
The main result of the project is that the complex technical data structure of Autodesk Revit has been transformed into a clear working interface for the user.
At the same time, the customer’s existing backend was saved and used as the basis for frontend operation.