Korn Ferry Pay · 2018 · D3 Interactive Reports
Interactive
Reports.
12 static reports.
One interactive system.
One interactive system.
Translate 12 static organizational health reports into interactive interfaces within the enterprise product suite — on an aggressive timeline.
The Pay & Markets module is part of a larger enterprise suite with over 10,000 subscribers — the most-used module in the product. It delivers compensation and reward data for over 112 countries, with users purchasing the country data relevant to their organization.
Each country page offers 15 reports specific to the organization and market data. Typically, users were downloading a static PDF report with 60+ pages of content. The ask: define what an "interactive report" means in the product suite, and build it.
The existing Power BI reports were dated, unintuitive, and slow. Data was migrating to a Tabular Database, and visualizations would be rebuilt on the D3 framework — a first for the product.
What does an interactive report even mean in this product? That was the first question we had to answer.
Heuristic Review — 10 identified issues
Pay & Markets — Current State
This was the first voyage into interactive reports for the product. Before designing anything, it was essential to understand D3's capabilities and limitations, and what users actually do with compensation data. Kicked off with a competitive analysis around reporting.
Deep-dived into each of the 12 existing reports to understand the data, the functionality, and the current interaction patterns. Identified 10 distinct usability issues — from unintuitive navigation and unclear visualizations to split filter contexts that reduced usable screen real estate.
Worked with the Pay and Compensation team to define 4 key user roles within the product — from the Compensation Analyst to the HR Director. Each role carried different data needs, permission levels, and interaction expectations. Personas then fueled the recruiting pipeline for prototype testing.
We replaced the traditional "gather requirements, disappear, present the big vision" model with a continuous collaboration cadence — 30 minutes twice weekly with the Product Owner to bounce ideas, review progress, and stay aligned. The result: delivery reduced to 2 weeks and 2 days per report, all 12 delivered on time.
Recommended a templatized approach — condensing 12 unique reports into 5 shared structural formats. Tracked which reports shared functionality, data types, and interaction patterns during requirements gathering. Restructured navigation from dropdown-first to a mega menu that gave users a complete overview of all available reports.
Each template offered a data visualization view, a data table view, legend, and export. Set a weekly cadence for touchpoints and handoffs — as UX completed a template, design reviewed it with the business. The following week UX gathered requirements for the next report while design executed assets.
From dropdown-first to a mega menu overview — users could finally see all reports at once
The original navigation assumed the user already understood the report structure and could navigate to sub-sections blindly. The redesign offered a summary of all available reports, allowed direct access to both Overview and Drilldown views, and introduced an upsell opportunity for users without full subscriptions — all from a single entry point.
Unified filter panel — market and org filters toggled from one access point, freeing the stage
Six strategic moves to transform static PDF downloads into an intuitive, interactive data platform — grounded in user behavior and technical reality.
The dual-dropdown navigation forced users to view the first report by default, requiring prior knowledge of report sections to navigate anywhere else. Replace with a mega menu overview that surfaces all available reports at once — giving users control over where they start, not the system.
Of the 12 reports, many share structural and functional characteristics. Rather than designing 12 unique interfaces, condense to 5 shared templates. This creates consistency across the experience, reduces development overhead, and gives UX an efficient, scalable starting point for each report.
Focus initial MVP efforts on UX improvements rather than sweeping visual redesigns. Translate the existing charts faithfully into D3, while resolving the known pain points — load time, unclear legends, inconsistent axes, and filter placement. Earn trust with the data first.
Remove the reliance on external tools and separate data tables to drill deeper. Instead, integrate table data directly into the visualization — hover states, click-through drill-downs, and contextual tooltips that bring the numbers to life within the chart itself.
Dedicated effort to hi-fidelity interactive prototypes — not just as a design deliverable, but as a testing tool. Prototypes enabled real user testing with recruited compensation professionals, and gave the development team a precise functional reference before a single line of production code was written.
For organizations with 10,000+ employees, plotting individual incumbent data points caused severe performance lag. Working with business and design, we proposed a threshold zone — if a data point fell within the expected range, no marker was plotted. This focused the visualization on outlier data, which was the report's purpose all along.
Competitiveness Overview — Final Design
Internal Equity Drilldown — Threshold Solution
Some data cannot be visualized without sacrifice.
The Internal Equity Drilldown needed to plot each individual employee and their associated compensation data. For large organizations — 10,000+ employees — even a simple dot per person caused the report to lag severely.
We solutioned quickly: propose a "threshold zone." Incumbents within the expected pay range wouldn't receive an individual marker. The chart would instead render only the outliers — exactly the data the user actually needed to act on. Performance fixed. Signal-to-noise dramatically improved.
Drilldown wireframe — scatterplot with threshold zone; only outliers plottedKey design decision
Nina Petri, Compensation Analyst — "I just want a system that gives me concrete data I can feel confident about."⚑ Contains stock photography — replace with original imagery
This was the first time we changed our working process to accommodate the circumstances — replacing the traditional "gather, disappear, present" model with continuous 2x weekly collaboration. The change worked so well it became the new standard for the Pay team going forward.
Frequent reviews, touchpoints, and groomings ensured the development team fully understood the complexity of each report — the data flow, the desired functionality, and the interaction nuances. Without this, the gap between UX intent and shipped product grows fast.
Estimating 12 complex epics is genuinely difficult. Communicate early and often when timing will shift, so everyone's expectations stay calibrated. Surprises erode trust; transparency builds it.
Compensation data is complex and domain-specific. The time invested upfront — sitting with SMEs, reviewing exports, understanding data origins — paid dividends in every design decision that followed. Come equipped with the right questions.