Cameron Roofing
A concept redesign for a free-estimate flow that captures the job from the driveway.
00 — About the client
A Rochester roofing, siding and window company running a dated template — a stock nail-gun photo, a wall of award badges, and a cramped sidebar estimate form that buried the one thing that makes them money.
01 — The brief
What they needed
Make the free estimate effortless — address and a few phone photos — and put the work, not a badge wall, at the center.
The constraint that shaped it
Homeowners decide with a wet roof on a stressed afternoon, on a phone. The estimate had to be one-handed and fast.
02 — Typography
Display — Clash Display
Aa Gg
The quick brown fox.
Body — Satoshi
The quick brown fox jumps over the lazy dog. 0123456789 — legibility holds from caption to paragraph.
Why this pairing
Clash Display at a medium weight reads confident without shouting; Satoshi keeps the estimate form plain and trustworthy. Sturdy, not flashy.
03 — Color
Slate
#1a1d21
Safety amber
#e0922f
Galvanized
#8a8c8f
Paper
#f4f1ec
04 — Wireframe → Mockup → Prototype
Wireframe
Estimate intake pulled to the top — address + photos first, everything else supports it.
Mockup
A before→after roof slider becomes the hero; amber marks only the estimate action.
Prototype
Multi-photo upload from the camera, a same-day callback promise, a sticky estimate CTA.
05 — What this explores
A concept study, not a client result: the point is to show the strategic move, the interface direction, and the kind of conversion path we would build if this were commissioned.