Client

The Azure Data User Experience (ADUX) team owns user experience across several critical Microsoft Azure products. These include products such as Azure Synapse, Azure Data Factory, and Azure Information Protection. Given that most applications live or die by the quality of user experience, the importance of this team’s role cannot be understated.

Problem

There were two primary challenges on this project: lack of design guidelines or tooling for data visualization.

• Inconsistent styling for charts and visualizations.
• Without the right tools, UX development slowed to a crawl for data visualization projects – forcing designers to update dozens of screens for each chart update.

Solution

• Solve the Pain: Used the Atomic Model of Design Systems to create design guidelines that incorporated branding from M365 and the Azure Portal. We then developed a Figma toolkit to create efficiency for UX designers through the design process
• Pay Attention to Details: Included color palettes and type ramp from both M365 and the Azure Portal so that the resulting graphs aligned to shared guidelines
• Provide Thorough Documentation: Articulated the interaction design across all standard use cases within the context of data visualization. We also included notation for edge cases

Results

• Branding and UX Consistency: Visitors to product pages experience a consistent design and experience message. UX Designers have a reference to speed their design
• Time Savings: What would have originally taken hours or days to update can now be done within a few minutes. Our toolkit is currently used by 10 designers across dozens of projects. Each of these ADUX designers saves time and effort when building data visualizations
• Ease of Use: Our Figma toolkit allows designers to quickly change graph types or manipulate graph features with a couple clicks​