Design Harmony: Transforming Data Dashboards with a Unified System

At NTT Data Services, one of my goals as a full-stack developer was to be able to implement a theming solution within all of the various data dashboards we built. This way, we would be able to support light and dark modes easily. Theoretically, we could implement any other themes that we had wanted to, however, the design mockups at the time only required light and dark modes.

In order to accomplish this task, I wanted to implement tooling that would stretch our tech stack further than I could, as I was the sole developer for the first several months of the project. At the suggestion of one of my managers, I decided to look into Material UI (MUI). MUI provides many components right out of the box, which means you don't need to write new code for components or their styles unless you want to modify what they already have. Given that our design system was largely based on Material Design, this was an exciting move forward!

Not only did MUI help to provide a lot of the basis of the components we needed, but it also gave us the ability to create standardization across our components. With MUIs theming technology, we were able to define elements of the design system in code. Those design system elements (such as typography, colors, and spacing details), would stay consistent throughout the design comps. All we needed to do was set those values in the code, and make sure the components rendered correctly. This drastically sped-up development time, and helped make the project a huge success.

Once MUI was implemented and theming was set, future components could be imported and extended as needed. Since we were working with lots of data coming from APIs, a lot of the work was centered around tackling how the components would integrate with that data. Having most of the components and the front end handled with MUI allowed us to focus mostly on functionality and arrange components in the data dashboard applications.