BI Table Redesign for testRTC
Summary
testRTC is a product that tests and monitors WebRTC based applications. WebRTC stands for Web Real Time Communication, which is an open source communication protocol and it enables chat, video streaming and audio across all kinds of devices and browsers without the need for plugins.
testRTC being a monitoring and testing tool, it holds a large amount of data and this is arranged in tables, charts and other aggregated data.
Essentially the tables are business intelligence tables that come with features to search for data, add and remove columns, filtering, pagination etc but some actions are not quite conventional and I was asked to improve the usability and I was given a list of requirements that the tables had to have.
Goal
The goal of this project was to:
1. Find a complete solution that encompassed the requirements list
2. Improve the usability of the current features and actions of the tables
Problem
testRTC is made of 6 products, and each of these products use tables in their layout. However the tables across all the products use 2 separate technologies. And with that there are inconsistencies with the functionality and the look of the tables. Some of the main problems are:
1. Pagination. One table has infinite scroll and one has pagination. With large data its important to have pagination to be able to link back and find your place.
2. Double scroll. There is a double scroll artefact, the table itself has its own scroll and the browser sidebar scrolls and this can be annoying when trying to scan through the rows of data.
3. Row icons. Icons in each row are only available on hover and are not placed in the same place in the products. Action icons in the row should be in a consistent place at the right of the table.
4. Grouping data. Grouping functionality was an unusual flow and not intuitive. A user has to drag a column header to bottom of the column menu. See image.
5. Column Selection. The position of the button was not prominent and not conventional.
6. Application buttons. Application and action buttons should be consistent on all tables. A look at the design and layout of the table header is needed.
Table header in one of the testRTC products
A different table header type in another of the testRTC products with a row of action buttons
Discovery Phase
Methods used: Interviews, heuristic evaluation, research of product design solutions, sketching concepts, wireframes.
The main stakeholder was the co-founder of testRTC Tsahi Levent-Levi and he already had documentation and a list of requirements for the table redesign. This was a great start and the fact that he had in-depth knowledge of the products and the users of the products, this really helped to progress the discovery phase.
Having studied the list of requirements, I evaluated the current design and work flows of the main tasks. I documented the flows and kept in mind Nielsen Norman heuristics such as -
1. Match between system and the real world - Follow real-world conventions, making information appear in a natural and logical order.
2. Consistency and standards - this was particularly true for the 2 different tables. The tables should be consistent throughout all the products of testRTC.
3. Flexibility and efficiency of use - actions such as Grouping should have an easier way to perform this action.
4. Aesthetic and minimalist design - keep this as a priority to make the data stand out to the user and actions are clear and as intuitive as possible.
From here, I made suggestions for conventions, and solutions for these conventions, such as grouping row icons and a more intuitive way of grouping columns of data.
I presented the document to Tsahi and once we agreed on solutions, I moved to the design stage. Tsahi also had product design solutions from other industry apps and platforms and I used these for inspiration.
Design Phase
Having a clear list of requirements and a solutions document I began the wireframes in Figma. I redesigned the filters in a previous project and I had to incorporate these into the new header area of the page.
The main actions that had to considered:
-
Calendar/Datepicker,
-
Filters with Saved View functionality
-
New Test CTA
-
Export/Import functionality
-
Search
-
Pagination to appear above and underneath the table
-
Normal and Compact view -row height
-
Refresh data
-
Add or remove columns
-
Grouping column data
Combining the actions of two different table technologies, I arranged the actions into different groups in the header so that there is plenty of white space between elements while making them clearer to the user.
I started with the Columns button. Before the add and remove columns button was a vertical button at the side of the table. It was not in a very prominent position.
Before - the Columns button was at the edge of the table and standing in a vertical position
I
I moved the Column button to the header and grouped it with other action buttons while also having the action buttons on the same row and not in different locations.
Pagination appears on top and bottom of the table. This is necessary when you have 500+ rows of data and are going between pages, this will anchor the user so they know which page they are on.
Date picker and filters with saved view are on the top row of the header. As these are global filters its important they are at the top.
CTA button and a kebab or options button on the top row to the right which will contain actions such as Download and Import.
After- A new header design with action buttons placed in 2 separate rows
Development and Conclusion
I worked with another UX/UI designer and a developer in building the new tables. It was decided to use MUI component library and try to re-use some components on AG grid library.
Some more requirements were needed such as a table name, both table filters and global filters and only 1 set of pagination - in which it was decided to have a sticky pagination at the bottom of the page. The issue was if the user had many rows, it was important to have pagination in view at all times.
With many discussions with my colleagues, decisions were finalised. The tables have more structured and can be modular if some tables require less actions and functions. They will follow rules and each row of the header will have specified action buttons. This will make the table design consistent across the entire product suite and make it easier for future development as there is now rules in place.
Final design of table with full list of actions
