Richard Kramer
Thumbnail.png

Data Grid Design

My team successfully designed and delivered a flexible, customizable, and scaleable Data Grid component for Bill Product teams. The Data Grid is the most used pattern in all of Bill products and services. Giving users the ability to sort large sets of complex data to help them make decisions easily.

Impact

The Design System Team Delivered a powerful Data Grid solution to teams in a short time frame. Providing a set of tools that teams can use to build the most used pattern across all Bill services. The new Data Grid was robust enough to replace the expensive 3rd party tool in use accross Bill, which gave us a potential saving and ROI of almost $1,000,00 per month. The new solution was flexible, scaleable, highly customizable, and easy to use.

 

Overview

Problem

The current Data Grid implementation in Bill was built using a 3rd party solution from AG Grid. The 3rd party solution was not very flexible, could not be scaled easily across different products at Bill, and was not easy to customize. AG Grid Updates would often break implementations, or cause bugs that required development hours to fix. The current solution was also costing Bill increasing licensing fees.

Task

Build a Data Grid solution that replaces the current 3rd party implementation. The new component be highly customizable to work across multiple Bill services, and platform frameworks.

Stakeholders

  • Design

  • Engineering

  • Product Platform

Team

  • Product Designer 

  • 2 developers

  • ~4 months

My role

Run the design process from end to end to deliver an improved Data Grid solution to product teams.

Process

This project used the Design System teams 5 step process.

 

Discover

What we already know

  • Most used pattern across all of Bill products and services.

  • Should be scaleable across multiple products.

  • Designers want more flexible options.

  • Needs to be responsive and work on mobile web.

  • Accessibility is a top priority.

Discovery Workshops

Ran various Data Grid discovery workshops to help get teams aligned.

Data Table comparative analysis workshop

Helped us to identify common solutions around managing data and inputting information using Data Grids. Gave us insight into how other companies have solved similar problems related to managing large sets of Data.

Design inventory workshop

Identified design needs for Data Grids in various products across multiple brands. The inventory showed us where we needed to be aligned but also many of the variants needed. Revealed a lot about how design thinks about tables, and how our users are using tables to manage data.

Data Grid pattern workshop

This workshop helped us Identify patterns and interactions that are structured around Data Grids. Examples might be filtering, or functions that would be used to change the views of the information in the Data Grid by users.

 

Requirements gathering

Collected a comprehensive Google Sheet to track requirements by various teams. The scope and complexity of the Data Grid component was enormous. Tracking requirements helped our team to make data driven decisions about what our users needed vs. what they wanted allowing us to roadmap the work, and informing what features to focus on first.

 

Design

Explorations

Working closely with a small team we explored various design ideas. Common workflows in Bill involve both inputting and managing large sets of data. Design ideas were reviewed by stakeholders giving us timely feedback, and giving us a good sense of which design approaches were working.

Initial proposal

We initially proposed a Data Grid design that allowed click to edit functionality, similar to a spreadsheet application. Click to edit would allow each cell to be editable individually.

Changing direction

The initial proposal presented a number of code and accessibility challenges, and a change in direction was decided after careful review. The new direction more simplified, and was a more atomic approach to building Data Grids focused on using “task specific” cell types in various flexible configurations.

Collaboration with design teams

Worked collaboratively with design teams to gut check the design to ensure the strategy shift would meet the needs of designers, and uncover details we may have missed or not considered. Collaboration in with design teams on real projects really helped to solidify our confidence in the solution.

 

Build

Building the parts

I worked with designers to identify cell types for various use cases and built a comprehensive Data Grid component that could be used to build unlimited variations of Data Grids.

Creating the Data Grid specs

I defined all the interactions and states for Data Grids using the visual language tokens. I also created detailed design specs that were used to guide developers during component builds.

Collaboration with developers

Worked closely with developers on guiding the component builds. Regular QA of component builds ensured that code matched design intent.

 

Document

Data Grid documentation in ZeroHeight

Created detailed documentation for all aspects of the Data Grid component, giving users detailed information on using Data Grids in both design and code.

 

Support

Releasing the new component

Supported our users as we released updated version of the Data Grid in code and Figma.