Data-dense product
Shipped
Product and design lead, with the team · Horizon Web
Carcheck Verify: fourteen sections of data, read on a phone
Someone about to buy a used car enters a plate and gets everything the registers know about it: MOT history, mileage, damage, finance, keepers, valuation. Fourteen sections from five sources, read in a hurry by someone who is not a mechanic. The learning curve is the problem, and the patterns are the answer.
- 14sections in the report, one nav to move between them
- 5data sources behind it
- 80%of submissions on mobile, so it is designed there first
01
One shape, learned once
Every section is a key and value table, one fact per row, so the eye learns the pattern once and the fourteenth section reads as fast as the first. Pass, fail and advice are chips before they are sentences. Tax and MOT get two green cards at the top of their section, so the answer to the only question that matters, is it legal to drive, never needs reading.
The report on desktop: section navigation on the left, the car and the plate, then the first key and value table. Design file, test data.
02
Dense where it has to be
Mileage is a curve over the registrations, with the table of readings underneath it. The chart shows the shape, the table gives the proof, and a drop between two readings is visible before it is explained. MOT history lists every test with its number, its result and its advisory lines, because the advisory lines are where the buyer's negotiation starts.
MOT history, then mileage: the curve, and the readings table under it.
03
The same report on a phone
The side navigation becomes a horizontal rail. Tables keep one fact per row, the chart keeps its table. Nothing is hidden behind a tap that the desktop shows in the open. Before payment, the same page is served as a preview with locked sections, so the person sees the shape of what they will get. The search, the preview, the payment and the full report are one component set, built from The Core and shipped by the engineering team.
On a phone: the header and plate, MOT history, the mileage curve with its table.