Designing a Robust Table Component
A brief case study detailing my mission to create a better tool for tabular-design.
The Problem
At Bowery, we design experiences for a very robust software application. This has translated into a design process in which we are building equally robust features with a fairly limiting component library. We use a modified version of Material UI, which is better suited for mobile applications and B2C desktop products. The primary issue myself and the other designers on my team struggled with was tabular design.
The Process
I spent about a week auditing all of the tables across the application in order to understand all of the different use cases this new component would have to address.
As you can see, even just among a fraction of the total amount of tables in our product, each one looked and functioned differently. Every single table that went into the application incurred some form of design debt, and as such a small team we rarely had the time or resources to address it.
The Solution
The application contains an array of display-only and editable tables used for confirmation of appraisal values, mathematical calculations, and the collection and display of building and comparable data. We often found that Material’s table component was not built in a way that allowed us to quickly manipulate the table at a cellular level, and the component itself was extremely limiting in terms of what types of tables it could feasibly be used to design. This resulted in a slower time to delivery of wireframes, the introduction of designs into the app that were inconsistent with our standards and best practices, and friction in the development cycle.
Once done cataloguing and categorizing each type of table, I began constructing a table component that would solve for the most complicated use case first, and then worked backwards into the simpler layouts. After establishing all of the formatting and layout rules, polishing up the prototype, and building the exported table designs in Microsoft Word, we had a working universal table component that was ready to use!
Want to see more?
This prototype includes several additional table types not detailed in this case study. If you have any more questions about this fun and useful side project, shoot me an email!