Introduction
During the development of an application to manage and monitor manufacturing operations on the shop floor in real-time (MES or Manufacturing Execution System), the need arose to develop a robust data-grid component with some advanced functionalities, such as visualizing and manipulating large volumes of data. The data-grid also needed to include basic functionalities like sorting, filtering, and column grouping.
Challenge
The biggest challenge in designing the component was balancing functionality and usability. On one hand, the data-grid needed various functionalities integrated into the component, allowing for a high level of customization in data visualization and editing. On the other hand, it was essential to maintain an intuitive and accessible interface, even for users without advanced technical expertise. Additionally, we faced challenges regarding the component's performance and ensuring its reusability in new products, with plans for future integration into our design system.
Research and Benchmarking
The first step was conducting a workshop with stakeholders to define which functionalities and configurations would be implemented. We also needed to determine which features would be exclusive to the MES product and which would become part of the design system component. The board and organization of this workshop can be seen in this PDF.
During this structured discussion, some functionalities that hadn't come up in initial conversations were proposed, such as the ability to save configuration presets for the data-grid and the option to pin columns.
After this, we conducted benchmarking by analyzing existing data-grids in the market, such as Ag-Grid and Handsontable, examining their strengths and weaknesses. Among these, Ag-Grid was the primary reference for our initial version, particularly for filtering and grouping functionalities.
After completing these steps, we still needed to prioritize the functionalities, both for future development and to understand their importance in the context of our products. This prioritization stage overlapped with the prototyping process, leading to some unforeseen challenges.
Prototyping and Componentization
With the requirements defined, we distributed the functionalities and identified where they would be positioned within the data-grid. We then moved directly to prototyping, leveraging the existing design system, which already had well-defined basic components and patterns. This enabled us to create high-fidelity prototypes using the design system as a foundation.
We started by prototyping the most basic interactions for table cells, covering cell selection and row selection. We also defined potential interactions and functionalities for the table header and the table pagination modes.
After defining these basic table functionalities, we moved on to more complex features, such as filtering, sorting, and grouping. We decided to centralize these three functionalities in a configuration panel for the data-grid, alongside the pre-defined configurations.
Following the initial functionalities definition, we held another meeting with stakeholders. Adjustments were required, particularly for the filter functionality, which now needed to support logical filtering and be more comprehensive.
The component's final result and related functionalities can be viewed in this Figma link.
Results
After its development, the data-grid component was integrated into Plasma UI, the design system of Vetta in collaboration with SMS Digital. This integration allowed other teams to start using the component, leading to the standardization of many basic table-related interactions. Currently, about 70% of products using Plasma UI utilize the data-grid component.
We have also maintained open communication with designers and developers who use the data-grid, enabling the addition of new features and potential fixes.