DATA GRID PROJECT

Internal Saas Solution

Introduction

This data grid project is an exercise to design a complex search form with multiple results collected in a data grid in which numerous actions can be performed. The need for this project was to get a new Saas platform to cover internal data procedures with a large amount of data. Previous designs were inconsistent, they did not provide solutions for handling all the information, they had slow processes and they had a long curve of learning.

Then, after analysing the old tools, making user interviews, reviewing the functionality required by product management and following UX principles, we made several attempts to improve the experience of our internal users.

Finally, we come up with a solution that is intuitive, fast, easy to learn and combines some of the features demanded by our clients in just one tool. The user testing interviews were great and we are getting excited to see the result in real-time once developed.

Loaded data grid

Once you performed a search, the search box will be shrunk and the data grid will expand to its maximum in order to get all the possible information on the screen. Now, the actions are available, and once selected one cell or the entire line.

mockup of a loaded data grid

Create inline

You are able to add new data inline the inside of the table. Every cell is editable and suitable to add information and it can be added with the loaded results. There is, as well, an option of adding through a model.

mockup of creating inline mockup of a creation through modal

Nested tables

If the page has multiple data grids, depending on whether there is a main table with children or all autonomous, there are many ways to display the layout in order to get the better interaction possible.

mockup of the different variants of nested tables

Main actions

Here you can see some of the possible actions on the top menu unfold. All the menu options can be reached through shortcuts and they get activated only when available.

mockup of the main actions menu opened

Column actions

These are all the actions that can be done on a column, in addition to being able to move and organize by dragging them. All the column options can be reached through shortcuts and they get activated only when available.

mockup of the main actions of the columns opened