[Matt Chan]

Pertemps

A salary benchmarking product for Pertemps, built to turn a static design into a tool people could actually trust with a real decision.

Frontend Development

Pertemps Salary Health Check website

A mockup isn't a product

Salary Health Check gives Pertemps candidates a way to check their pay against the market and get a clear read on where they stand.

The designs for it looked exactly like that: clear, confident, decisive. But a static mockup shows one version of the truth — one role, one salary, one clean result.

Real users would come in with edge-case titles, unusual salary bands, and incomplete answers. The tool still had to feel just as considered as the version in the design file.

Turning that fixed picture into something that held up under real data and real interaction was the actual job.

Pertemps Salary Health Check mobile
Pertemps

Designing the states nobody designed

The mockups were built around the best case: a mid-length job title, a realistic salary, a clean result. In production, none of that is guaranteed.

Job titles ran long and broke layouts. Salaries came in at the extremes and pushed comparison charts into strange shapes. Some users had partial information, so the tool needed sensible in-between states rather than just "complete" or "empty."

Very little of this was in the original design. That meant working out what those states should look like while staying consistent with the visual language already set, then building them in HTML and Tailwind so none of it felt like a patch on top of someone else's design.

Pertemps Salary Health Check range component
Pertemps Salary Health Check

Building the Behavior Behind the Screens

A design file shows what a screen looks like, not how it behaves.

The mockups gave us the "before" and "after" of entering details and getting a result. The actual interaction logic — what happens as someone moves through the flow, how the result updates, what counts as a valid input — had to be worked out and built from scratch.

That meant making judgment calls a designer hadn't already made. Not changing the intent of the design, but deciding how it should actually behave once it was real software instead of a picture of software.

Pertemps Salary Health Check component

Same design, more conditions to satisfy

The visual design leaned on charts and score displays that read well in a single, fixed frame.

Making that hold up across screen sizes, and remain genuinely usable rather than just visually similar, meant reworking parts of the layout and interaction the original design hadn't been tested against.

The goal throughout was fidelity to the design's intent, even where the literal design had to change to survive contact with a browser window, a screen reader, or a smaller viewport.

Pertemps Salary Health Check page

Status

Salary Health Check is live on Pertemps.

Since launch, Pertemps has seen an increase in website traffic and application volume, and Salary Health Check itself was nominated for Best Digital Product at the Data & Marketing Association Awards.

Pertemps Salary Health Check