A versatile library of visualization components with customization, documentation, and accompanying design files. This combination proved extremely valuable in providing consistency and reducing design and development time across product lines.
After working across products in our monitoring and troubleshooting space, I saw an opportunity to improve both the user experience and efficiency of supporting teams. I wrote a proposal to form a DesignOps team to create a library of Data Visualization components to be utilized by internal teams. Seeing the value, the effort was approved, the team was formed, and work got underway.
We formed a balanced team consisting of a product manager, a pair of developers, and a product designer. We set off interviewing teams to ensure needs were met and synthesized the results to prioritize our efforts and establish our backlog of work. The team researched open source options and we elected to use React-vis, as it was react based yet utilizes D3.js as well, giving us a lot of flexibility. We also identified Storybook as an efficient way to organize and review components as they were developed.
As a DesignOps team, we studied and implemented best practices to create opinionated defaults, while still allowing the ability to override when needed. We paired with teams to ensure a smooth implementation which also fostered a shared investment. We established clear channels that enabled fast feedback loops for ongoing communication.
Teams adopting and implementing the components quickly saw its value and made additional visualization and feature requests. We quickly grew the library to include 15 components and growing with many variations.
Teams had a dramatic reduction in code and effort in their products. Duplicated efforts were eliminated, and removing this area of concern allowed teams to move faster and focus more directly on the key value propositions of their products.
Increased visualization options improved how users interpret data, making signals more clear. Consistency in both presentation and interaction with data allows users to narrow in on the meaningful timeframe more quickly.
A great deal of detail went into selecting color series that were cohesive yet visually distinct. Options were tested across color deficiencies and contrast ratio targets set by the World Wide Web Consortium (W3C) in their web content accessibility guidelines (WCAG) 2.1. This ensures consumers of these components are meeting accessibility compliance by default.
The library was quickly adopted across teams and feedback was overwhelmingly positive.
A DesignOps approach was critical to the success of this project. The team was able to focus in a specific domain to learn and implement best practices, while maintaining a holistic view across projects. Pairing with teams consuming the library allowed teams to ramp up quickly, and ensured the integrity of the initial design was maintained in implementation. Seeing our effects directly aiding others throughout the process was highly motivating and we remained passionate through even the most challenging weeks.
My deepest thanks to all the amazing teammates who were a part of this process, it was an incredible project!
Please check out our Storybook to view and interact with DaVi components.
