The challenge

To design a dashboard and drill-down tool for analyzing the progress of office software sales in FY 2014. The dashboard would have to track a wide range of categories of differently-behaving information and be able to combine them in drill-down. It would also have to adhere to the company's design language.

The solution

Most BI applications make drill-down an infamously ugly and unintuitive chore. In our dashboard, drill-down flows horizontally across a series of panes. With click-and-drag control, the process of analyzing sales data is painless and borderline fun. Despite a lot of sophisticated capability, the app is designed to have a learning curve of under 3 minutes with enough unobtrusive affordances that interface mastery holds. The solution would take advantage of HTML5’s dynamic display capabilities.

Horizontally-flowing filters

The dashboard consists of panes. All panes except the right-most one view data through filters by fields. The left-most pane is the primary field and the right-most pane is the detailed analysis.


The left-most pane shows progress for each value of the variable (row title) for both the current month and the financial year in total, as well as a 30-day trend line and an icon to indicate new sales since last viewing.


When a user is viewing product adoption data through a single variable (field) with an associated adoption goal, the right-most window displays a zoomed-in progress bar, a daily change trend line, and an overall adoption history. The line graphs let the user compare the selected value to other comparable values.

Click-and-drag simplicity

The setup of the dashboard, as implemented, includes four variables: geography, segment, product, and target group. Geography can be refined by a subsidiary, a sub-division of “area”.


New field filters can be added by dragging them from the top bar onto the dashboard and can be removed in the same manner.

Dynamic data display

When more than one filter is selected, the filters apply from left to right. In this case the right-most analysis pane is viewing all CAM EPG accounts from a custom geographic query.


Multiple values can be selected by using idiomatic standards, Ctrl and Shift.


Because there are no progress goals defined for hybrid queries (e.g. geography plus segment), the analysis window automatically compares the proportion of sales for the values of the variable (field) immediately to its left.


The compare values for the line graphs automatically change, and use logic to determine which hybrid values to compare. The user can also define their own.

Intuitive multi-field queries

Panes to the right of the left-most (key) pane show only a trend line since there are no goals by which to compare sales values.

Creative problem-solving

Long field titles in the target group pane get their own line for a minimally disruptive accommodation.

Easily re-order filters

The order of filtering can be changed by click-dragging the panes. The dots in the upper right indicate draggability. Subtle transparency serves as a visual aid.

Real-time visual feedback

When you move a filter into the new location, it automatically shifts the others over.

Dashboard and drill-down in one

Our solution combines the immediacy of a dashboard with the deeper understanding of a drill-down or a portal into a single easy-to-use tool.


We love dashboards and data visualization.

We make work seem fun.

©2018 by Claußcreative