Let’s start with a question…

How do you design a data table that is 1) responsive and customizable for a variety of users and 2) lightweight enough where performance issues aren’t a concern?

Short answer: You deliver the core needs first, then build from there.

Data tables (aka tables, data grids, spreadsheets) are key tools in modern software and digital solutions, from Google to Microsoft. They are robust tools for organizing thousands of data points into formats that are easy for users to read, manipulate, and pull valuable insights from. 

At Honeywell, this is no exception. It is one of the most commonly used components in diverse industrial product needs ranging from tracking multiple flight plans to optimizing a building’s energy performance.

When I joined the platform team that built this component (amongst others that comprised a UI library) I quickly familiarized myself with its useful features, but also the glaring user pain points that had slowly accumulated over time. Over the course of 3 months, I and another UX designer collaborated to design an MVO data table that would address this.

User research to drive the business value of our project

Because there was an existing data table solution (despite its pain points), we wanted to make a strong case to our design leadership on how a researched, user-validated, and strategically built data table would save product teams valuable time and resources.

We first conducted user interviews with multiple product designers and developers that used the existing data table component in their products to understand what features addressed their users’ needs and also identify pain points. We quickly understood that the existing data table component was built by cramming in features on top of features, creating a bloated component that created performance and usability issues.

A cross-domain 5-hour workshop that resulted in a solid MVP concept

We then led a workshop where we picked designers and developers from different product teams (Industrial Plant, Aerospace, Building, etc) who had varying experiences with the existing data table component, and paired them off to ideate on potential solutions with the identified pain points we accumulated from our previous user interviews. Pairing people with different roles helped to ensure designers considered technical constraints, and on the other end, developers considered the end-user experience from the designers.

In the end, we all aligned on an MVP data table that would have core feature needs built-in (searching, sorting, filtering), but be customizable and support more advanced needs depending on the product team.

For example, one product team may need to create a simple read-only table, while another team will need to implement cell editing or nested rows. The advanced needs would live above the main table body in a toolbar or “Ribbon”. We referenced Google Sheets and Microsoft Excel in how they organized their spreadsheet actions a similar manner.

This direction remedies the performance issues as each product team can customize a data table solution that met their specific users’ needs, reducing unnecessary bloat and development time.

Wireframes to flush out the interaction flows of our key features

I aggregated the workshop concepts into wireframe user flows of the prioritized feature needs. Examples include:

• Sorting or filtering the table so users can find a specific item or organize the table a certain way

• Resizing columns to view more data

• Searching within a table column to find a specific item

• Adjusting the row height to view more or fewer data (shown below ⤵️)

Usability testing to validate that we’re heading in the right direction

We created a clickable prototype with our wireframes and conducted four usability testing sessions with end-user participants to validate if our solution was truly valuable. Overall, these sessions proved successful in confirming our direction. A large part of this was thanks to the initial discovery research we did atthe beginning to clearly define the problem areas and address them first.

Final UI designs organized and made accessible to our end-users

We delivered a responsive, flexible Data Table design library for product designers to build tables that fit their specific product needs. It is also available in a Light and Dark theme.

It is currently in use in key Honeywell Forge industrial product designs. A reusable React code version of the component is currently in development.

Takeaways and learnings that have stuck with me

We had multiple product designers start using our design library after we launched it internally, and it was encouraging to see how much valuable impact we were having!

After working on this project, I continued educating myself on design systems via articles, workshops, and conferences. One thing I learned from Dan Mall in his “Putting the ‘Design’ in Design Systems” talk was the value and effectiveness of building a design system out of a few “pilot” products in order to evaluate and iterate incrementally with each feature release.

That was a huge lightning bolt moment for me. ⚡️

After we had delivered the MVO designs, I spent too many months afterward designing add-on features that we did not validate with users. So if I could redo this entire project, I would have designed this and other components closely alongside 1-3 new products. That way, we could have had more opportunities to evaluate the efficacy of our components in real-world scenarios and iterate further.