Modular Data Table
Flexible, scalable and consistent data tables across all internal tooling products.
A bit of context
I initiated the development of a design system for B2B products by forming a guild called Internal Tools. The goal was to create a unified experience across the company’s B2B products. This case study focuses on a modular data table I curated for B2B needs.
Background
Previously, most B2B products relied on legacy libraries such as Material Design or Safron, which had not been updated for four years. The challenge was to replace these outdated systems with a new, cohesive design system and encourage B2B designers and devs to adapt the new design system.
Phase 1: Understanding Needs
On the first days we only had a few users relying on our design system which were willing to adopt internal tools library. The first phase involved setting up meetings with early users to understand their requirements. A data table seemed to be a good starting point as it was the most used component within all internal tools. I asked designers to audit their products and provide examples of the data tables they used, allowing us to identify use cases and potential edge cases. We had a data table in the core design system, which only covered 10 rows, with text and button cell types. With the audit, it became clear that an assembled data table leads the designer to break the table.
Gathering Requirements
Users needed more than just simple text cells or buttons. To meet these needs, I had to identify the potential cell types, I spoke to designers to identify what they require from a data table and why they break the existing table. I went through all the data table screenshots to take note of anything else currently missing in the conversations.
Development of MVP
I curated a MVP of the modular data table and shared it with designers to see if they could replicate their data tables using this new component.
Phase 2: Workshop and Feedback
As I progressed, more teams showed interest in adapting the new system and specifically this data table. The second phase focused on refining the MVP for a larger user group. I organized a workshop with all B2B designers to gain a deeper understanding of their data table needs. After a quick icebreaker, we put some time to gather screenshots designers of existing data tables, then I introduced the component, and gave some time to the attendees to explore the new component and play around. We noted what worked, new possible features and areas for improvement.
Feedback Analysis
After the workshop, I grouped, validated and prioritized the feedback, then discussed it with the design system designers to validate and decide which elements match the system and can be incorporated into the data table.
Finalization
With the feedback validated and prioritized, it was time to turn the MVP into a finished product. The result was a versatile, modular data table that addressed user needs and promoted a unified design experience across our B2B products.
I wrote a comprehensive documentation on how to use each module of the component, provided guidelines for different scenarios and use cases and made onboarding guidelines and real examples.
Conclusion
This project exemplified the importance of collaboration, understanding user needs, and iterative design. The modular data table not only met the immediate requirements but also paved the way for a more cohesive design system across the company's B2B products.