Data Table Components

I redesigned the data table components in the Komprise platform to improve usability, accessibility, and navigation efficiency, which significantly reduced related support tickets.

Type

Design Systems

Tokenization

Governance

Role

UX Designer

Team

1 Product Manager

3 Software Developers

Duration

Oct 2023 - Dec 2024

(3 months)

INTRO

Core feature of Komprise, Data stores

Komprise has a core feature called Data Stores. Here, users explore enterprise-wide data, gain insights, and make critical decisions related to data. I led a complete redesign of the data table component, which is the most essential element in this UI. This project showcases how I updated the list item component through a full 0 to 1 design process.

BUSINESS PROBLEM

Clients raised issues with data exploration

Komprise is a fast-growing data management platform. With the rise of AI, the number of customers has increased significantly, and so have their support tickets. In particular, from Q1 to Q4 of 2024, a large number of support tickets related to data browsing experiences began to emerge. These accounted for about 24% of all UX issues, which was a substantial figure. Since data browsing directly leads to data-related actions and those actions drive revenue, this experience was critical for Komprise. To support continuous product growth, we set a goal to optimize the related UX experience and reduce data browsing support tickets to under 5 percent.

ROADMAP

Before formally kicking off the project, I created a roadmap. This was important to align the team on priorities, set clear expectations, and ensure that each phase had measurable deliverables. I divided the work into stages and documented in detail the specific tasks and outcomes required for each stage.

AUDIT

Document current issues

I began by examining the Data Store, which was the primary area where issues occurred. This is the core of the user’s browsing experience, where they navigate massive enterprise datasets and take related actions. Because it contained such a large amount of information, the UI had become complex, and since it was built without a design system in place, it was also being managed very inefficiently from a development standpoint.
The issues I identified were as follows:
  1. Excessive duplicate components: There were too many redundant components, each managed with separate code, which created inefficiencies in development costs.
  2. Design inconsistencies: Since the recent design system was not applied here, spacing and colors were used inconsistently. This also suggested that there were significant accessibility concerns.

  3. Accessibility issues: The font size was too small at 12px, contrast ratios between text and background often fell below WCAG standards, and interactive elements such as icons and checkboxes did not meet the minimum 24px touch target requirement. These problems made the interface harder to use, especially for users working with dense data over long periods.

USER INTERVIEW & INSIGHTS

"I'm overwhelmed."

Based on these findings, I set out to understand the specific problems customers were experiencing when browsing data in the Data Store. Our primary users are enterprise IT administrators, who are responsible for continuously exploring data and making related decisions. Through conversations with them, I discovered the following issues.

DESIGN PRINCIPLES

After consolidating these insights, I concluded that a complete systematic redesign of the data table was necessary. To guide this process, I defined three core design principles.
  1. Optimized readability: Users often complained about visual fatigue due to small font sizes and tight spacing. Reducing this burden became the most urgent issue to address.
  2. Clear navigation: Users frequently lost track of their location while browsing data. I aimed to provide clearer guidance so that users could always recognize their position and move directly to where they needed.
  3. Shortcuts and interactions: Users struggled to quickly find the right actions after browsing data, spending excessive time to complete their tasks. To reduce this friction, I added shortcuts and interactive elements directly within the table.

PLANNING

Before moving into the actual design work, I created a component building plan.

The update needed to cover the entire Data Table area, which I divided into three primary parts: List Items, Columns, and Action components. Within each of these, there were multiple sub-components that also required attention. The table as a whole functioned as one organic system, meaning that every detail had to be redesigned consistently. If even one piece was left out, the overall balance of the table would collapse.

SYSTEMATIC REDESIGN

Design from tokens to functional units

I began with the smallest building blocks of the design. This included icon buttons and informational icons that would be used within the data table. The key focus areas here were:

  1. Applying tokenized colors and spacing

  2. Defining appropriate sizes

According to the Material Design guidelines, the minimum target size for buttons is 24px, so I set this as the baseline and created variations from there.

Next, I moved on to a slightly larger component, the list item. Here I increased the font size from 12px to 14px and paid close attention to the balance between text size, spacing, and color contrast. I also applied auto layout so the component could adapt responsively.

INTERACTION DESIGN

List item supports multiple interactions

I not only improved the visual organization but also significantly enhanced user efficiency at the interaction level. The key highlights were introducing double-click for drill-down and right-click for context menus. These interactions allowed administrators to seamlessly transition from data exploration to immediate actions, reducing repetitive navigation time.

Adjustable columns

I designed each column area with the question in mind: How can we ensure a consistent and optimized layout across various sizes and content types within one system? To achieve this, I treated each column as an independent, modular box. Functionally, users could freely resize, add, or remove columns as needed. Inside each box, I aligned numeric values to the right and all other content to the left, making it easier for users to quickly scan and interpret any type of data.

VALIDATION

WCAG compliance

All designed elements were created to meet WCAG AA standards, ensuring appropriate accessibility across the system.

FINAL DESIGN

We prioritized a simple, familiar, and clean interface

DEVS HANDOFF

Figma, all in one

Ensuring that developers could implement the component correctly was also a critical part of my role. I added the newly created components into the existing Masters library and handed off the Figma file with all variants properly structured and ready for development. The file included detailed specifications, the design rules applied, and clear guidance on when and how each component should be used.

IMPACT

Data exploration became faster, clearer, and effective

The impact of this project was clear and measurable. Before the redesign, support tickets related to data browsing were growing rapidly, with year-over-year increases exceeding 100 percent. After introducing the new Data Table system, ticket growth stabilized at around 73 percent, showing a significant slowdown. Even more importantly, browsing-related tickets dropped from 24 percent of all UX issues to just 9 percent. This demonstrated that the redesign not only reduced user frustration but also directly lowered the burden on the support team.

Enter Password