Client

The UX team owns user experience across several critical cloud computing service products for a large multinational technology company. Given that most applications live or die by the quality of user experience, the importance of this team’s role cannot be understated.

Problem

These 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 existing products. 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 existing products 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.