Building Terraformation’s Table Component
Role: Designer
Duration: Periodically for 1 year
Tools: Figma, Confluence
Problem
Our users and engineers voiced confusion and dislike for the lack of consistency across data tables in our software. As in many startup environments, we were still building out our design system.
Solution
Create a table component that scales well and caters to the user’s non-tech savviness.
Competitive Analysis
Most table designs had pretty standard features like sticky headers, search, bulk action, sorting, and pagination.
Some extra features included freeze columns, row density/height settings, and edit columns.
Design
Standard Table Design
We included very basic table features that are necessary for any database. Aside from these, I revisited 2 other features that needed updating based on user feedback.
Features
Search bar
Sticky headers
Bulk action
Sorting
Pagination
Row Actions
Originally, we decided on a kebab icon button for row actions because it scales well.
Feedback
However, we soon learned that our non-tech-savvy users didn’t respond well to the kebab icon. It wasn’t as universal as we believed the icon to be.
Updated Feature
As a result, I explored other options like adding tooltips or label buttons. In the end, I decided on a primary and secondary label button where the former is for the most important row action and the latter (“More” label) is for other row actions.
Filters
We were using a filter icon button that was placed next to the search bar because, once again, it scales well.
Feedback
Our users, however, mentioned being unaware of that filter icon and that other more non-tech-savvy users will definitely not think to interact with it.
Updated Feature
Consequently, I updated it so that there is a “more” label next to the filter icon button and the most important filter is featured outside of that button as a select menu to act as a breadcrumb.
Documentation
After having updated a couple table features, I documented the specifications of the component so that our engineering team can implement the changes across our software.
Impact
Updating the table component and establishing its design patterns helped our users interact with the software more easily and learn design behaviors more quickly (i.e. click this = result).
Additionally, it minimized manual coding and provided clearer expectations for our engineering team, saving them time and energy that would’ve otherwise been spent on unnecessary back and forth with the design team.