Transitioning away from third party tools like Tableau and Power BI, our product team set out to build reusable data viz components to fit a range of use cases. These React components built upon our McKinsey Design System to allow for teams of all disciplines to leverage as needed.

Within the healthcare practice of McKinsey, there was no standardized system for data visualization. Engagement teams created custom analytics dashboards for their clients, but would build from scratch every time. A pressing need arose for reusable data viz components that could adapt to a range of use cases.

We first conducted an investigation into the most commonly used charts across the firm to provide a north star for the MVP. A series of user interviews, surveys, and requests for submission (screenshots) helped identify visualizations with the greatest value. The final list was further segmented by data viz function to ensure we covered enough ground.

Telling the right data story requires flexibility within our components. In order to provide our engagement teams with the best tools to serve their client, we developed a deep understanding of multi-layered insights. Tooltips contain supplementary data for context, while not detracting from data hierarchy. Drill downs allow for filtering to the desired level of granularity. ‘Clear filters’ buttons serve two functions: to reset the data view and identify which cards have been filtered by an action. Pop ups, scroll, and drag interactivity can be used to reveal deeper insights.

We tested a number of card structures to find a responsive layout that can adapt to various screen sizes and visualization types. A consistent 24pt margin with flexible height allows for fluid layouts that adhere to a defined 8pt grid.

Maintaining an intuitive experience across device types is essential to achieving product readiness. Interactions like hover, click, press, and drag were carefully re-mapped to their appropriate device actions to enhance usability on smaller devices.

Our team built and deployed ten data viz components along with detailed documentation to the healthcare practice for their use. The components enabled solution teams to quickly connect data sources and create client visualizations out-of-the-box, thus reducing our reliance on specialized contractors and saving countless hours.