Design System for Data Visualization Tool
To help data scientists generate desirable dashboards, a team of HCI specialists crafted a new design system and curated complex settings within the data visualization tool. This project explores both my duties as a designer and supervisor.
2023 UX Design | User Research | Team Lead
Goals
Developed by Megaputer Intelligence, PolyAnalyst™ Web Reports is a browser-based data visualization tool compatible with PolyAnalyst™ 6.5, a data analytics tool.
Data scientists, primary users of PolyAnalyst™ 6.5, are often responsible for creating dashboards using their analytic results. But they often stumble when designing dashboards using PolyAnalyst™ Web Reports due to their lack of design experience and outdated UI.
Thus, the internal HCI team I lead worked on a design system, ClearSight, and a new set of data visualization controls, providing data scientists with better experience and boosting their storytelling abilities.
Requirements
The project consists of two parts, developing:
A design system that constitutes the settings for 20+ data visualization methods
High-fidelity prototypes illustrating the full settings of each data visualization method
User Research Findings
After conducting research, we narrowed down our insights to three key points through affinity diagramming.
1. Individual appearance controls should be easy to find
Each data visualization method can have 14 to 98 settings and users want to spend less time finding a control. So to address this pain point, we:
Added a search component that directs users to the desired control
Defined the use frequency of settings and re-arranged them
2. Do not crowd the interface
Screen space is limited and crowded controls decrease readability. Therefore we:
Introduced cascading accordion menus to tuck away unnecessary controls
Ensured all component follows AA standard
Ensured all typography follows WCGAG Success Criterion 1.4.8
3. Beautifying dashboards should cost less time and effort
Because our core users have minimal design experience, we:
Introduced new color palettes, including accessible palettes (abiding by the WCAG AA standard), for major data visualization use cases such as categorical, sequential, and diverging palettes
Added a 'Quick Layout' feature, where all data visualization settings are pre-determined with 3 scales: minimal, default, and detailed
Development
1. Design system
The design system our team put together is based on atomic design methodology and documented as a Figma library. My role during this process was to:
Maintain and fine-tune the existing style guide to reflect user needs
Kick off a component library by brainstorming and itemizing necessary components with the team members
Contribute to creating the components
Inspect and validate components submitted by the team members for quality assurance
See the snapshot of the style guide, component library (partially captured due to NDA) and sample of enlarged controls.
2. Prototyping the settings for each data visualization method
Each data visualization method (“chart”) consists of different settings. Hence, after defining common settings, we:
Listed out entire settings for each chart
Categorized settings into different tabs
Defined the sequence of the settings based on use frequency
Prototyped full settings of each chart based on the design system
In this process, each chart was assigned to an individual team member. Therefore, besides working on my own assignment, I was also responsible for reviewing drafts from team members and giving feedback per iteration, until they were ready for delivery.
Out of 20+ data visualization methods, below is the sample prototype for bar chart settings.
Result
Below are the sample of mockups I developed to showcase the UI based on the new design system. Development for tablet and mobile environments is currently in progress.
Based on the qualitative testing, the time it takes to configure settings of a single chart reduced by 95% maximum to 20% minimum. Not only reducing the time for creating a dashboard, re-designed appearance settings enabled users to focus more on storytelling by alleviating their burden on producing a visually attractive result.
The dashboards below are by one of our internal data analysts, using the product we delivered. Note how he was able to come up with an attractive result despite his limited design experience.
