Background Information

What is the Setting Menu?

1. Configuration Settings → make a data visualization component

2. Appearance Settings  → adjust the "look" (project focus)

What's the problem with the Apperance Settings?

Who's the user?

Data Analyst & Data Scientist

Why they use "Web Report"?

• present their insights and data stories for their data mining work

• help viewers make business decisions

What they want? 

• create a beautiful report easily and quickly

• spend most of the time on data accuracy and meaningful stories

Why they need to use "settings"?

• the default appearance cannot satisfy their needs

• customize the visualization component for their stories

What they DON’T want?

• don't have a good sense of aesthetic

• don't want to spend too much time on making a report

• don't want to change every single thing only if they have to  

Design Goal

Overall Product Goal

Users can easily and quickly make a beautiful & meaningful data visualization report.

For Settings Menu

Users can easily and quickly find/use the needed appearance settings.

Design Research

Where to start?

With over 50 visualization components, each with potentially unique settings, setting up a universal rule to satisfy most cases is necessary due to the system's complexity. Starting with the most frequently used visualization components would be a good place.

Data Collection

I collected the number of times each visualization component had been used in the last 6 months.

Interviews

The goal was to understand which visualization components were used most frequently and validate this with the data collected from the software.  

• Analyst Team
• Linguist Team
• Customer Support Team

I got this rank of usage below

A Trend Graph Structure

Design Challenge

The Current Structure

To gain a full understanding of the structure and identify patterns, I listed the structures of all frequently used visualization components. 

Insights & Concepts

Two Types of Setting 

Status Setting

• a setting that reveals a certain status

Adjustment Setting

• a setting that helps the user accurately adjust something.

One Importance Rule

Importance

• must-have and frequently used

• must-have but rarely used

• good-to-have but rarely used

Concepts on reorganized the settings

Regroup Settings

• organized settings in different tabs

• put the “must-have”, “frequently used”, and “status” settings on the 1st level of the interface

Advanced Settings

• hide the “Good-to-have”, “rarely used”, and “adjustment” settings in the secondary menu

Validate & Iterate

1. Apply the concept to all other frequently used visualization components

2. User testing with the RITE method

Test the concept on internal users and have a rapid iteration according to their feedback.

Design Solution

How does the interface tell rich enough information?

Key Status at A Glance

• regrouped settings into different tabs

A Hint of Invisible Settings

• hide the "good-to-have", "rarely used", and "adjustment" settings in the secondary menu

Spacing

• use spacing rules to display visual hierarchy

Final Design

Web Report Overview

A General Setting for Each Data Visualization Component

Appendix

What else did I design into this overloaded setting menu?

1. Navigation Sheet List & Sheet Tab

2. Color Assignment

3. Typography Assignment

Impact

1. Received AHA moments

I received numerous "aha" moments from both internal and external users. Our developers did an excellent job of successfully releasing the first setting menu design within 2-3 months. In 2 years, I successfully retired the old-school web-report product by implementing the new design features listed in the Appendix.

2. I was invited to train users to create a beautiful easy-to-read web report.

I was invited to write related articles on our official product page to help users constantly learn how to create a beautiful easy-to-read web report.