AI Clearing — How to improve data analysis in the ConTech industry?
See how we redesigned the Saas platform to monitor the progress of construction work. With a new visual layer, screens full of data have become readable and easy-to-navigate dashboards.
AI Cleaing is a sartup operating globally in the Construction Tech industry. It offers a SaaS platform for construction progress monitoring based on artificial intelligence technology.
Our task was to redesign the various modules of the web application to improve the readability of the overall interface, modernize it and emphasize the presentation of data conclusions.
As part of the collaboration, we designed new navigation and redesigned 2 modules - Progress tracking and Schedule, while developing a new visual style for the product.
We have developed and adapted to the needs of the customer a set of visual components, from which the platform interface is created. This will facilitate consistent product development in the future.
Navigation
UX & UI
Design systeem
Context of the project
At the end of 2023, AI Clearing decided to redesign the interface of its SaaS application to improve the user experience of the application.
At this stage we were invited to join the project. Our main task was to simplify the complicated and overloaded views so that the user could quickly find the information he needed. Given the nature of the product - a platform for monitoring the progress of construction work - we had a lot of data that we could display. However, it was necessary to select key information and present it in such a way as to make it easy for users to draw conclusions.
The second challenge was the visual refresh of the product - we had to propose a new, consistent visual system. Our client wanted modernity and readability. It was important for the new system to present data well, both on charts and maps, linking them to the real space.
Zima has successfully designed a new app layout that both improves the user experience and simplifies the use of the platform for customers.
The first module has already been implemented in production and is available to customers - it collects positive feedback.
Information Architecture and Navigation
At this stage, we were invited to the project. Our task was primarily to simplify complex and overloaded views so that the user can quickly find the information they need. Due to the nature of the product - a platform for monitoring the progress of construction works - we had a lot of data that we could display. However, key information had to be selected and presented in such a way as to make it easier for users to draw conclusions.
User 1
Owner/Investor
The owner or investor manages multiple projects at the same time, so they need quick access to key information such as work progress, budget and key alerts. As a person who is not usually on-site, he needs to be able to instantly view data from different locations. A key requirement is easy switching between projects, allowing you to effectively manage your investments remotely.
Navigation needs:
- Intuitive navigation for quick switching between projects.
- Display key information at a glance, without the need to go into details.
- Menu optimized for mobile devices, supporting remote management.
- Easy access to alerts and general project data from various locations.
User 2
Construction manager
The construction manager oversees the entire project, focusing on the details of its implementation. He is responsible for controlling many aspects, such as schedules, resources or technical details. Typically, he or she works on a single project or a smaller portion of it, which requires precise access to relevant data.
Navigation needs:
- Access to detailed reports and project data.
- Ability to easily switch between general information and implementation details.
- Intuitive access to sections on construction milestones, schedules, resources and technical details.
- Functionality to quickly switch between different levels of detail in the application.
View Management
The system allows you to adjust the width of the sidebar, data panel and map to the individual needs of the user. The feature of collapsing selected elements makes it easy to focus on key data for clarity.
Transparent access to projects
The system allows you to adjust the width of the sidebar, data panel and map to the individual needs of the user. The feature of collapsing selected elements makes it easy to focus on key data for clarity.
Design challenge
When designing the new AI Cleaning application interface, we completely refreshed the visual layer, replacing the outdated design with a modern and functional approach. The new style combines a minimalist aesthetic with a clear presentation of data, improving both the aesthetics and usability of the system
Key visual features and functional:
Rounded corners:
Present in tabs, buttons and icons, giving the design a modern and friendly touch.Colours:
Selected based on the customer's brand, highlighting relevant information. Thanks to their economical use, the application retains its clarity and minimalist character.Sans serif typography:
The simple typeface supports readability and a modern look.
Text size contrast:
Larger headlines and smaller texts effectively give a hierarchy of information.
Spacing and Margins:
Large text spacing and carefully maintained margins provide clarity and visual order.Hierarchy of data:
The data section (e.g. work progress) is divided into hierarchical views, which supports the analysis of complex information.
Clear visualizations:
Simple chart lines and colored bars in progress charts make it easy to interpret the data.
Progress Tracking Module
The Progress tracking module is one of the most important modules. It allows you to track the progress of a construction project. The biggest challenge was to change the center of gravity from presenting data to showing partially interpreted information. Look at the solutions we have achieved this.
Data visualization that supports drawing conclusions:
Instead of raw tables and figures, the data was presented in the form of intuitive visualizations. We focused on showing the data in context, not dry numbers.Introduction of hierarchy in the information presented:
We have introduced a presentation structure where the user first sees a summary, and then can delve into the details, which eliminates the problem of overloading the screen with excess information.Clear and consistent visual style
:
Consistent use of visual solutions and a consistent color palette makes it easier to understand charts and navigate the dashboard, reducing the feeling of chaos.
Expanding System Design
Our project required an innovative approach to component design to move from screens crowded with data to readable and intuitive interfaces. We have taken on the challenge of expanding the existing design of the FlowBite system. Despite its seemingly complete nature, deeper analysis has shown that it does not fully meet our needs in terms of aesthetics and readability of data.
FlowBite component set expansion
We chose to leverage the existing FlowBite framework, focusing on developing current components and adding new features such as different component states and advanced interactive charting systems. Our goal was to preserve the core elements of FlowBite, expanding them with the more advanced capabilities that were necessary for our project.
Thanks to this approach, we avoided the need to create a completely new system design from scratch, which brought both time and financial savings to the client. The end result is a design system that is more responsive, functional and better suited to our requirements for readability and presentation of data.
Results
The app's new interface is designed to improve the user experience, offering intuitive navigation and view flexibility, which can promote a more efficient use of the platform on different devices.
With clear visualizations and a consistent information architecture, future users will be able to more easily analyze data and make better decisions. We expect the interface to meet the needs of investors and construction managers, providing a tool tailored to their requirements.