Microsoft data visualization
Company
Microsoft
Year
2020 - 2024
Design for enterprise
Interaction design
Design systems
Overview
A Microsoft-wide initiative to unify data visualization into a single UI library within the Fluent design system and to standardize its implementation across product teams, backed by a fully funded engineering team.
My role
I led a 50+ person effort alongside 2 other designers over the course of 4 years, from ideation to execution, ultimately becoming a leader in the data visualization space across the company.
Responsibilities included:
• Responsibility
Before service consolidation, Azure’s services lacked hierarchy
The problem
Microsoft’s many data-centric products presented complex data inconsistently, which led to cognitive overload for users navigating the Microsoft ecosystem.
This issue stemmed from a lack of centralized UX guidance and engineering support for data visualization. Consequently, individual teams incurred high costs designing and shipping experiences in isolation, further exacerbating the problem.
Hubs reorganize services around user scenarios rather than internal product categories
The solution
A single, robust charting library flexible enough for any product team to adopt, grounded in the “One Microsoft” philosophy, built using D3 and Fluent UI controls.
The process
Design principles
Scalable
The library needed to flex for both preset datasets and datasets that advanced users, such as IT workers, can create themselves to build a custom dashboard.
Increased data comprehension
More legible layouts and advanced interactions like hover cards to make them more readable and actionable.
Accessible
Robust accessibility features from screen reader functionality to a full color palette that passes the 3:1 color contrast ratio for all datasets within a chart.
Creating clarity at the beginning
The collaboration started organically among designers as an effort to create coherence across enterprise products, including Azure and M365 Admin Center, and more. Because of this, high cardinality visualizations and scalability were critical considerations.
Shortly after we established a foundation in data density, we expanded our collaboration to include the Fluent design system team. This meant expanding our data visualization library to be inclusive of Microsoft’s full portfolio, from education platforms like Teams with their needs for simplicity and delight, to Azure’s high density requirements for maximum data accuracy.
Scoping the library
We defined the set of chart types that we would go on to design and develop as a core library. We began by comparing and analyzing existing solutions across products to learn how they explore and refine the data. We identified the areas in which products were doing things differently and where we were lacking in functionality, which allowed us to further define the priorities and scope.
Each designer then took on one or more chart types or chart elements to design for a cross-platform data visualization library.
Developer specs
We created a developer spec for each chart type to address chart anatomy, variants, size and layout, appearance including dark mode and light mode, interaction, reflow (including text truncation which is tricky when it comes to charting), and accessibility.
Collaborating on interactive behavior
Throughout the project, I ran weekly syncs for members of the teams to share designs in progress. These meetings were our time to nerd out on details like hover interactions, reflow behavior, and filtering.
Usability research
Our usability research, centered on interaction design, directly informed the scalable development of our charting library. We developed a product-agnostic prototype to test key interactions across the various chart types, gathering insights on users expectations when filtering, engaging with legend overflow, and the overall expected behaviors of manipulating data.
We also continuously conducted lit reviews throughout the entire process starting in 2020 as well as competitive analyses by looking at products like HighCharts and Grafana.
The end result
In total, we produced comprehensive dev specs for 16 chart types + 9 chart elements including axis, filtering, typography, hover card, and error state.
UI kit
We published a UI kit in Figma for product teams to easily plug in charts from the library into their designs.
Each chart type was created with robust variants, autolayout, text editing, and the 40+ color palette, reducing the need to detach components and consequently unifying the chart elements adopted by designers and their product teams.
Shipped!
The small but very mighty engineering team successfully built an interactive, accessible, and highly customizable charting library. The final product was built in D3 + the Fluent V9 design system and easily adoptable in React, Angular, and WebComponents.
Today, hundreds of projects across platforms like Azure and M365 Admin Center have adopted the library.
Next steps
Before leaving Microsoft, I partnered with PM and engineering to evolve the framework further.
Declarative components
We began converting common Hub elements into shared UI components, allowing teams to implement patterns without rebuilding them.
This also aligned hub experiences with Fluent 2, modernizing Azure’s visual design system.
Personalization
Future iterations explored ways to tailor hub content based on user role, deployed services, workload maturity