UX designPrototypingData visualisationGDS

Five iterations to a calculator that makes procurement value legible

Procurement value isn't one number. This tool makes the distinction legible, auditable, and comparable.

Duration
2024 – 2025
Year
2025
Outcome: A production-ready calculator entering its fifth iteration, helping CCS customers report and benchmark procurement savings
Five iterations to a calculator that makes procurement value legible cover

The problem

CCS manages commercial agreements used across the entire UK public sector. Buyers using those agreements are expected to demonstrate the value they deliver, but there was no standardised, accessible way to do that. Reporting was inconsistent, terminology was unclear, and comparing performance across organisations or against sector benchmarks was effectively impossible.

The brief was for a calculator: a service that could take a buyer through the process of identifying what they’d saved, how they’d measured it, and how that compared to similar organisations. The complexity was that procurement savings don’t mean one thing. They mean several things, and conflating them produces numbers no one trusts.

What the tool does

The Commercial Value Tool guides buyers through three distinct types of value, each captured in its own section of a GDS task list:

1

Contract Details (10 questions)

Contract ID, name, procurement procedure, CCS agreement and lot, supplier, contract dates, total value. The factual record that contextualises everything else.

2

Procurement Savings (3 questions)

Cashable savings against a defined baseline. The tool captures whether savings were achieved, the savings type, the baseline approach (budget, previous price, market rate, or median compliant bid), and the baseline value.

3

Strategic Value (non-cashable benefits)

Cost avoidance, social value, risk reduction, sustainability outcomes. Benefits that don’t appear in a savings figure but are real, captured and surfaced separately from cashable savings.

The distinction between these three categories was the central design challenge of the project. Conflating them, or making any of them feel optional in a way that led to systematic under-reporting, would undermine the whole purpose. The GDS task list pattern makes each type of value a discrete, completable task with explicit status tracking.

Task list: savings data journey

Commercial Value Tool task list showing three sections: Contract Details, Procurement Savings, and Strategic Value with completion status tags

Five iterations

The tool reached production in its fifth iteration. The shape of each round was determined by what research revealed users actually needed, rather than what the initial brief described.

Early versions focused narrowly on the calculation itself: a linear form collecting a baseline value and an actual spend, producing a savings percentage. Research quickly showed that this was insufficient: the baseline approach mattered as much as the figure, because different baseline methodologies produce structurally different numbers that aren’t meaningfully comparable.

Later iterations introduced the three-section structure, distinguishing cashable, forecasted, and strategic value. The task list pattern replaced a linear wizard because procurement professionals often have information for one section before another, and forcing a fixed sequence created unnecessary friction without improving data quality.

The reduced journey, a streamlined path through the same data structure, was tested against the full journey to understand whether simplification improved completion rates. The trade-off was always between ease of entry and richness of the data collected.

By the final iteration, the prototype included pre-population from the Central Digital Platform (CDP): contract award notice data already known about an organisation could be pulled in automatically, skipping questions whose answers were already available. The task list surface made this transparent: users could see exactly which steps were pre-filled and which required input.

A second data entry path, an Excel template upload, was added after research revealed that many procurement teams already maintained savings data in spreadsheets. Re-entering it manually was a meaningful barrier to adoption that the template option removed.

The dashboard

The output of the calculator is not a single figure. It is a view into how a buyer’s procurement activity performs in context.

The dashboard visualises savings performance over time, across contracts, and against peer organisations. The box plot chart, built with D3.js, shows the distribution of savings percentages across four baseline comparison methods: Budget, Previous Price, Market Rate, and Median Compliant Bid. Users can view their results against all organisations, their own history, or a configurable peer group (“organisations like me”).

Dashboard: savings performance and benchmarking

Commercial Value Tool dashboard showing savings performance chart and benchmarking data across peer organisations

The chart originally used ApexCharts and was migrated to D3.js during the iteration process, giving more precise control over the visualisation, particularly for the box plot format, which needs to communicate statistical distribution clearly to users who aren’t statisticians. The chart tooltips surface median, quartile, and range values in plain language.

Data can be exported as CSV, JSON, or PNG. Results can be emailed. The dashboard supports multiple contracts through a multi-contract view, and users can return to update or extend their data at any time.

Key design decisions

Task list over linear wizard. The GDS task list pattern was chosen because it mirrors how procurement professionals actually work: not necessarily in sequence, and often returning to sections as information becomes available. Each section has independent status tracking. Users see their progress at a glance and can prioritise or defer accordingly. When the entire flow is complete, a “Review and submit” action becomes available, not before.

Separating cashable from strategic value. The clearest structural decision was refusing to collapse all savings into a single number. Strategic value (carbon savings, social value, risk reduction) is real benefit that doesn’t appear in a cost comparison. Giving it its own section, with its own completion status, signals that it matters while keeping it structurally distinct from cashable savings data. The two types inform different decisions and should never be aggregated.

Pre-population from CDP. Contract award notice data that the Central Digital Platform already holds about an organisation is pulled in automatically. This means users answer only the questions for data that isn’t already available. The task list surface communicates which steps have been pre-filled and what remains, rather than silently skipping questions.

Benchmarking by methodology, not just outcome. The dashboard doesn’t show a single savings percentage. It shows savings percentage by baseline approach, because 12% against budget is a different claim to 12% against market rate. Surfacing this distinction prevents misleading comparisons and gives buyers insight into whether their chosen methodology is conservative or aggressive relative to their peers.

Outcome

A production-ready commercial value tool, entering its fifth iteration and proceeding to live service. The iterative process produced a service that is accessible to procurement professionals regardless of their technical familiarity, captures three distinct types of procurement value without conflating them, and provides benchmarking insights that were previously impossible to generate consistently across the public sector.