Comparing groups inside a benchmark report. Comparing groups inside a benchmark report.

The original Benchmarks AI report helped managers understand how their company was performing against other companies. The next question was how different groups inside the company contributed to that result.

I designed this concept as the next step for the report. It adds group comparisons, clearer chart interactions, and more control over how the report is organized.

The design was ready for implementation, but the product roadmap moved in another direction. This prototype brings the Figma work to life so the interactions can be experienced directly.

Groups can be added directly from the chart, keeping the comparison close to the data. Each group keeps its own colour across the report, so the chart remains easy to follow as groups are added or removed.

The report supports up to ten groups at once. The limit keeps the chart readable and gives the comparison a clear boundary.

Hovering over a point reveals the group, week, percentile, and position in the benchmark range. The points carry the strongest visual emphasis because they represent the measured data, while the connecting lines stay quieter.

The report cards can also be reordered by dragging their title bars. People can decide which comparison deserves attention first, and the layout stays consistent as the order changes.

The interface announces important changes as groups are added, views are switched, and cards are moved. The chart can also be explored with the keyboard, with arrow keys moving through groups and weeks.

A table provides the same information in a format that works well with screen readers. Reduced-motion preferences are respected, and state changes happen instantly when animation is disabled.