Designing a more usable Data Table — Read on Behance
Introduction
Being a UX designer, I was assigned to work for a popular Re-Insurance company to redesign their existing pricing applications. Their legacy applications were made on top of Microsoft’s Excel. Since they were using a very old version of the Excel base, Microsoft had dropped its support for the same. Along with this, they were also planning to bring the modern user experience by migrating this into a web application.
With the help of a dedicated Business Analyst, I was able to quickly understand the applications and the user-flows. We had back-to-back meetings with the company actuaries and underwriters to understand the current scenario and the problems with the existing application. While analyzing the application and the user pain-points, the pronounced problem was with the data grid/table. Since the application was made on top of Excel, the interface was full of tables, or cells for that matter. I understood that this was a radical problem. The majority of the user interface the users deal with are the data tables. The mission was set to design a more usable data table for the users to work with.
The Problem
Since the users are having an excel sheet to work with, they do miss several features and functionalities which a simple HTML grid can offer.
Though the basic functionalities like sorting and filtering are there, it’s not that user-friendly. It always has that formula-driven flavor to it.
It was understood that they need a table design that can serve across all the applications and scenarios which can also be used by various user personas without any impediments.
The Beginning
Before starting with the Ideation, I wanted to look at how the user uses the table. What are his/her main activities on it? Understanding by studying the application and also with the help of the business analyst, I was able to narrow down the main uses of the data table as below.
1) Record large pieces of data and use this data to make calculations elsewhere.
2) See multiple data grids or associated data in the same viewport.
3) Perform quick actions on the rows and columns and see the changes instantly.
4) Bring more data in the form of tables so that it’s concise and easy to record.
The Design
To start with the design, I thought of splitting up the Table into its components to see what all features can be applied to each. Splitting up into something like below.
1) Rows
2) Columns
3) Headers
4) Icons
5) Selections
6) Action Buttons
7) Alerts
8) Pagination
9) Summary
I then decided to go through all the pain points again to see what all features can be added to each component and thereby create a minimum viable product. After a couple of days, I had provided them with a wireframe to collect the feedback. The product owners were really happy to see the outcome and there was plenty of notions put forward. I could see by the look on their face that they were happy to see this new experience which they were about to receive. Based on their suggestions and feedbacks more features were added to the design and I also consulted our development team to see if whatever I’m going with is technically feasible. They were able to check for the implementation status by doing some R&D and got back with a positive status within 2 days. A few iterations were happening like this back and forth with the users and the dev team while adding in more requirements on top of the MVP. Since I am a hybrid designer, there were no separate visual designers available in our team. I had to provide both the documentation and the lo/hi-fi wireframes. There was an existing design system available within the organization, so while going for the high fidelity designs I had to stick to the color palettes and typefaces they were using and I also referred to some popular design works to get some design inspiration.
The Process
Mind Mapping
The Output
To start with the design, I thought of splitting up the Table into its components to see what all features can be applied to each. Splitting up into something like below.
Table Size
Since the users are more into looking at additional data at once, the idea was to go with a compact design rather than a relaxed and cozy look.
Row Selection
The users mostly select a row and many rows are to perform some action on it. To make the selection more intuitive, I used a checkbox along with the row highlighting. The selection can also go as a radio button based on the data requirement.
Once when the user selects a row there will be associated actions displayed on top of the toolbar. This can be customized and set to the appropriate action buttons needed. Few examples are here. The users were not having a delete row feature previously, but now they have a delete action available which will delete a row.
Data Entry
Because the users were used to entering data in an excel style. I made the data entry in a cell to be activated upon a mouse click. Here we do not have row-wise editing, but an independent cell edit. In the Legacy application, the users were provided with editable cells in yellow color. This helped them to recognize the editable cells. To keep a similar experience I kept the data text in blue color to identify that it’s editable.
Row Expand/Collapse
Users always wanted an effective way to show the related data of something to be shown adjacent to it. In the previous version, they were only able to keep a separate table next to the main one. But the related data need not be a table all the time, it can also be an image, graph or even a data entry form. For that reason, I used the concept of nested tables and tree structure.
In the above example, you can see that the second row has been expanded to see the nested rows. This is a tree structure. The inside rows can again have child rows within and the hierarchy level should be set by the users.
To see how the nested tables or row expansion works, see the example below.
In this example, you can see that row three has been expanded to see the table residing inside of it. This can again have more levels of hierarchy. Here the table can be replaced with any other forms of data.
Misc Row Elements
Other than the input and calculated data, I have created several components like status indicators, Tags and inline buttons etc. The status indicators are nothing but a small circle/dot which represents the status using a color code. An example can be a green dot showing everything is fine or a red dot representing danger.
If you look at the above example, we can see the category column is having label tags and the Status column is having indicator dots next to the labels. Also, the Link column is having link buttons and the Action column is having an icon button for delete action. Providing these sort of miscellaneous components here will enhance the user experience while dealing with a large amount of data. These graphical elements can also help in reducing the cognitive load.
Table Toolbar
The table toolbar essentially acts as a control center for the table. all the required actions/buttons and information can be listed here. Since it’s attached to the table, it’s easy to work with. The toolbar can also be customized to keep various buttons, toggles etc. Also, the toolbar can be dynamic. Based on the selections of data, the toolbar can change and show the associated components for the selection made. In the below example you can see various action button kept on the toolbar which also contains the export button!
Column Filters
Filtering was one of the most notable pain points the users had. The excel medium they were using, since tables were spread across everywhere having a proper filtering mechanism was an impossible thing. For the new design, I took inspiration from the filtering mechanism offered by the Infragistics Angular grid library. It’s a great angular library and they offer pretty good components for development.
Column Filters varies based on the type of data the column is having. We can have a simple search filter as well as a condition-based filter. The below example will show both scenarios.
There’s also another feature suggested here for which the users all agreed. It’s to save filter criteria for a table. Here the user gets to save some filter preferences for a grid and can apply the same at a later point in time. This helps the users to save time while applying filters each time.
Column Customization
With the legacy application, users were coping with the unfortunate situation of non-customizability of the tables. The excel medium never allowed them to pin/anchor columns or even hide a few and show them on demand. These are however possible with excel, but since there are many tables spread across the worksheet it quite impossible to achieve this without disturbing other tables.
In the new design, I had added the column customization option where the user can easily show/hide columns. This will help them focus on the relevant data and also helps to avoid the horizontal scrolling in the table. Additionally, there is one more item added, that’s the column anchoring or the column pinning. This will help the users to make selected columns frozen so that they don’t have to leave the context while working on the other columns. Please see the examples below.
Data Sort
Sorting is always the basic feature we have in a data table and the same has been added here too. The user can click on the column header to activate sorting and a small arrow appears next to the header representing the type of sorting applied. Below is how it would look like.
Data Validation
Since the data, the user is dealing with is of high importance, there must be validations within the grid. The validation errors can be visualized like below.
Data Truncation
With this application, the contents of each cell can be very long. This might be some series of values, a long number or even can be an address. In this case, it’s wise that we truncate the data rather than wrapping it. Cell wrapping can make the table look a bit ugly also it will damage the structural harmony. The users were also not interested in having cell wrapping. With the truncation present, the partial data can be made visible with the help of a tooltip.
Pagination
Since our users are working under Insurance/Reinsurance domain, they will be dealing with a lot of data. These data various by their nature and also might be loaded from different parts of the world. To have a load-free experience, it was decided to get rid of the universal scroll feature and bring in the pagination. Pagination will make it visually rigid and there’s not much load on the user’s system and connection and hence data is always available at the time of need.
The pagination was designed in a way that users get to choose how much of the data needs to show in a single page and in addition to browsing through the pages, there’s also an option to jump to a certain page!
Presentation and Feedback
The Lo-Fi wireframes were made in Miro and a few using Procreate sketches. The Hi-Fi designs were made using Adobe XD. All the colours used were from the existing design library. The final designs were first presented with a smaller group, the usual group where the feedback iteration used to happen. However, we used to have demo meetings including the stakeholders occasionally to keep them updated on the progress. Once the demo preparation was made, the same was presented to a wider audience. The stakeholders were really happy to see how the designs turned out. The Prototype was shared with the users for them to play around with. The users were given a few days to experiment on the prototype and they also shared this with their colleagues to collect more feedback.
Fortunately, the final feedbacks were positive ones with a few neutral items. There were no iterations needed and the design was provided with a sign-off to move for development.
View on Behance.net