BACK TO PRojects

redesign
of
an overloaded
setting menu

Type

UX / UI Design

Roles and Responsibilities

  • User Research
  • UX / UI design
  • User testing
  • Prototyping
  • Documentation

Time

2 weeks

Product Info.

  • PolyAnalyst Web Reports 
    • A browser-based data visualization tool, it is our featured software that works with PolyAnalyst™6.5 -- a data mining software.

Befor vs. After

What should I work on?

  • What is setting menu?
    • The appearance settings for every data visualization component that adjust the "look".
    • Not the configuration settings to make a data visualization component.
  • What's the appearance setting looks like?
    • All the settings were organized in a single tree structure.
    • There is no priority behind all these settings.
    • There is no importance level behind all these settings.
    • The sub-level settings are in a modal window which disabled the main menu.

Who's the user?

Data Analyst/Scientist

  • Why they use Web Report?
    • They need/have to make the data visualization report
  • For what purpose?
    • To present their data findings & insights for their data mining work
    • To help viewer make business decisions
  • Why they need use these settings?
    • The default appearance cannot satisfy their needs
    • To customize the visualization component for their stories
  • What they want?
    • Create a beautiful report easily and quickly
    • Spend most of the time working on data accuracy and meaningful story
  • What they don't?
    • Don't have a good sense of aesthetic
    • Don't want to waste too much time on making report
    • Don't want to change every single thing only if they have to

Set Design Goal

Overall Product

  • User could easily and quickly make a beautiful & meaningful data visualization report.


For Settings Menu

  • User could easily and quickly find/use the appearance settings that they need.

There are too many, what should I start with?

Every chart/visualization might have some unique settings. Due to the complexity of the system and short amount of time that I have, I have to set up a universal rule to satisfy most of the cases. So I should start with the most frequently used visualization components.


I've got this rank of usage below:

What the current structure looks like?

To get a fully understanding of the structure and find out the pattern, I list the structure of all the visualization components that frequently used. This image below is an example of "Trend Graph":

Insights & Concepts

Validate & iterate on the concept

After I had this concept, I validated it in 2 aspects:
Apply the concept to all other frequently used components

Regroup settings into different representative tabs.

User testing

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

How the interface tells rich enough information?

After I had this concept, I validated it in 2 aspects:
Key status at a glance

Regroup settings into different representative tabs.

Spacing

Use spacing rules to display visual hierarchy.

Hint of invisible settings

Hide the "good to have", "rarely used", "adjustment" settings in the secondary menu.

Final Design