UX Design Internship

Kentik Data Tables

Kentik Data Tables
In an effort to bring consistency across the Kentik Network Monitoring platform, the UX team at Kentik was in the process of building a design system and aligning each of the product's offerings with the system.

Because a significant portion the platform utilized data tables, we wanted to tackle building a super table that would become a foundation for all tables in the product. Working on this redesign was my first project at this internship.
About Kentik
Kentik provides insight into network traffic so users can run their business efficiently
My Role
UX / UI Intern
Internship Duration
May 2022 - Oct. 2022
Technologies Used
Figma

The Beginnings

To begin this process, I audited more than 70 tables in the portal to take a look at where the discrepancies are, and taking note of key functions that need to be included in the super table. I took screen shots of each table and labeled functions by color.
Inconsistencies we noticed
• Different locations of filter panel
• Search bar functionality, styles, naming conventions and locations
• Drop down filter styles and locations
• Column and tab customizer button styles and locations
• Button styles
• Row styles and capabilities
Functions necessary for our super table
• Filter pane
• Search bar
• Grouping function
• Adding row
• Column customization
• Column sorting (ex. alphabetical)
• Pagination - including row count
• Action buttons (ex. Add labels, delete)

Learning Process

To get an idea of the platform I'm designing for, I resourced the company knowledge base and videos to better understand the purpose and its value.

I also began reading articles about data tables to learn about what makes a good table and standards and rules that help make tables easier to use.

I learned that a data table should allow users to achieve the following actions:
• Scan data easily
• Compare data
• Analyze data
• Derive insights
• Filter to see specific criteria
• Sort
• Manipulate information easily

Initial Ideas

I started with some simple sketches of a few ideas on how to organize each of these important functions in one table. I went on to creating multiple wireframe iterations week to week through on going critiques with my team. Below are some examples:

The Key Functions

Filter Pane

I began by placing the filter pane to the left side of the table as opposed to other locations, as the left side filter seems to be a familiar pattern for many users. It also allows you to stack multiple filter categories vertically, avoiding taking up space that the rows of data requires. We also made sure to allow the filter pane to collapse in order to allow users to view the table in wider form.
By default, filter pane is to the left of the table
Expanded table with collapsed filter
Each filter category is an accordion ex. "Time Range" below, and is collapsed by default so that users are not overwhelmed by numerous filter values. Users can open as many filter categories as they like at a time. Number indicators will appear to the right of each filter name where a value has been selected from that category.

Rows and Cells

Because of the massive amount of data presented in these Kentik tables, I needed to first make sure that the rows were easily scannable and that there was enough spacing surrouding each cell. The existing tables used at font size of 12px which made it difficult to read without straining the eye. I increased the font size to 14px. We decided to use 12px left/right and 16px top/bottom padding for a comfortable read to avoid being too compact and crowded.
It was also important that users can hover over each row in order to be able to see and compare the data within that row as well as know which row they are selecting.
Users can also select as many rows as necessary.

Bulk Action Buttons

Bulk action options that allow adding labels and deleting rows were also important functions that were used frequently. Our team had multiple conversations about the placement of these action buttons. In the existing tables, these buttons were outside of the table itself making them feel disconnected to the dataset. We wanted to have a more integrated experience so that the bulk action options felt like they were part of the table and easily noticed and accessed.

I came up with sketches and wireframes that showed the bulk action buttons in multiple different positions; ex. above the table, below the table, and right under the headers.
After having conversations with our product and engineering managers, we decided that it made sense for the bulk action row to display right over the column headers, replacing the header when rows are selected. The header titles were no longer needed to be referenced at this point and it would avoid taking up additional space and also avoid pushing the rest of the rows downwards.

We also liked that the full dedicated row for bulk actions will allow space for other action buttons to be added in the future if necessary.

Search Bar

Our team had multiple conversations about the search bar as it had many possible options. In the existing data tables, most search bars were placed within the filter pane but that limited the capability of allowing the search bar to hold multiple key word values. We wanted to allow users to type in different values as well as allow whatever value that was selected in the filter pane to appear in the search bar. Ultimately we decided to place the search bar at the top of the table in order to provide the space it may need for users to input many values.

Column Customization

In order for users to gain more control in comparing their data, we needed to allow column customization. We wanted users to be able to add or delete columns, resize columns, as well as drag and drop them in the order that they like. Users can then easily compare one column to another by setting them side by side. I added the column customization button to the right of the table in order for the customizer to slide in from the right side.
The customizer will have draggable titles so users can place columns in the order that they prefer. Columns can also be dragged by column headers within the table itself. Colums can be deleted by clicking the "X" to the right of each title in the customizer, and added by clicking on the "Add Column" button. Below is how a column can be added from left to right.

Number Tables

A vast number of tables in the Kentik Platform contained numerically heavy data. For numerals, we used a monospaced font so that users can easily notice the diffence between each number value.

Groupings

Another form of viewing data is grouping. We placed the grouping function outside of the filter pane because grouping is is slightly different from filtering out types of data; instead it is taking the data and sorting them by categories. When the grouping button is selected it should display with a background color to show that it is active and whatever option that is currently selected should be indicated by the primary color. Grouping sorts rows of data into specific categories. Users are able to collapse any of the grouped rows.

Helix Design System

As mentioned earlier, the Kentik UX team were in the process of building a design system as a necessary step to bring the level of consistency that Kentik required. We utilized design tokens to unify system colors, spacing and fonts which we implemented in our final mockups. The marketing team also recently updated system colors which we aligned our design system with.

System Colors

Primary action buttons, and selected rows and check boxes utilizes the primary blue.
Important action buttons that require attention such as the delete button in the bulk action row utilizes the bright primary orange.
Column and filter headers and hovered rows on default use the neutral gray shade.
Primaries
Secondaries
Neutrals

Typography

Data table font for all text:
Roboto Flex Regular 14px

For numerical data:
Roboto Mono weight 400 14px

Dark Mode

We used differing shades of the neutral black and grays to design our dark mode tables.

Final Process

Towards the end of my mockup process, I prepared these forms of the data table for my team and developers:

‍•Default
• Expanded view (filter collapsed)
• Active view (hover, selected, grouped rows)
• Numerical tables
• Column customizing and resizing options
• Dark mode view
Finally, I put together an initial documentation that explains how each of the function should work in detail so that the developer building this table will be able to understand the requirements.
let's connect!
email icon
linkedin icon