Sales Activity Dashboard

Demonstrators ran their business from static tables: rows of numbers with no sense of trend, pace, or composition. Reading “how am I actually doing this quarter” meant scanning cells and doing mental math. The ask was a visual dashboard inside the demonstrator experience covering personal sales, income, and team commissions. What made it a design problem worth writing about is that the project got hit by two separate constraints after the first design was already done, and the final system is better for both.

This is the tracker, and it works. Switch the tab, change what it compares to, and hover any bar: the readout under the chart does not just repeat the number, it shows the arithmetic that produced it. Where the math adds, the bar stacks. Where it does not, the bar stays whole and the other numbers ride beside it.

Every bar shows its own math. Hover Personal sales and you get customer orders plus own orders equals the total. Hover Team commissions and you get team sales divided by members equals the average. The shipped tooltip listed values and floated over the chart, covering the bars beside it. A readout that sits under the plot and shows the equation is the step I would take next, and it is the honest version of the “stack only what adds” rule: the chart tells you why it looks the way it does.

A table is one click away. Every chart view has a table view of the same numbers. It is the accessibility floor, and it is also what a demonstrator reaches for when they want to copy a figure into their own spreadsheet.

The ring explains itself too. The goal summary was the piece the policy changes cut, so this is the design as intended rather than as shipped. Progress is points into the current tier over the tier’s span, and hovering the ring shows exactly that division. The commissions view lays the ladder out flat so the next rate is never a mystery.

What you see here is the shipped structure and behavior in a look of my own, with an invented business, an invented title ladder, and points instead of the real volume unit.

The rebuild covered every chart and tooltip state across three tabs and three comparison windows. The decisions below are what kept all of it coherent.

Stack only what adds. Income bonuses and commissions stack because they genuinely sum to total income. Team commission metrics multiply, so those bars stay single-segment. If a chart implies addition, the math underneath has to be addition.

Facts beside the bar, not in it. Order counts, team size and rates matter, but forcing them into the stack would distort it. They sit beside the chart: present, readable, and not pretending to be part of the composition.

One tooltip system for everything. Colored dots keyed to segments, a caret for the hovered bar, and directional arrows for change: green up, yellow down. Every tooltip, one pattern, so demonstrators learn it once.

Honest in-progress months. The current month gets an asterisk on its bar label and an “in progress” note in the KPI subtitle. Partial data should never read as a sudden dip.

Calendar quarters, not rolling windows. The prior-quarter comparison shows Q1 against Q4, because that’s how demonstrators actually think about their business, even though a rolling 90-day window is easier to compute.

The policy changes landed after the full design existed. The sales-type breakdowns and the goal summary chart depended on data the dashboard could no longer surface, so the work shifted from pixels to planning: which views could ship with the data still available, which had to wait, and how to sequence releases alongside the policy timeline. That rollout plan was built with the business teams and leadership. Phase 1 went to engineering dev-ready, and the wider rollout is on hold while the policy changes settle. The plan is what lets it restart without redesigning.

Three tabs on one visual language, plus the tooltip pattern that ties them together.