Designing for the 2am call: build notes from a restoration site

The headline says what the company is not

A restoration site that leads with the emergency reads like a plumber’s. The plumber arrives first and stops the water. Restoration is what happens after, over days. So the headline is that boundary:

“The leak is fixed. The building is still wet.”

The line under it: “The plumber stops the water and goes home. We are what comes next.” The page never promises a response time. It says the line is answered at any hour, because that is what the source material says. The same rule on a law firm’s site is in the family law build notes.

The photograph is the evidence, and it is measured

The hero is a photograph of a basement standing in water at night, edge to edge at every width. A gauge draws down its right side with four depths: surfaces, subfloor, framing, insulation. The note beside it reads “Dried to here, not to the carpet”.

That gauge starts the idea the rest of the page follows: a reading being taken. The two durations that matter are plotted on one axis running from the call to day five. Mould takes hold in 24 to 48 hours. Drying takes two to five days. Further down, a drawn section through a wet floor shows each layer change from Wet to Dry as you scroll.

The photograph carries one small effect: a faint moving light, like water through glass. It is drawn on a 160 by 90 canvas and scaled up. It starts after the page has loaded and stops whenever the photograph is off screen.

Colours taken from the work lamp

The ground is a dark storm navy (#0B1219), never flat black. The one accent is amber (#E8A33D), the colour of the work lamp in the photograph. The call button is navy text on that amber.

By the WCAG contrast formula, body text is about 12.5:1 against the ground, headings about 17:1 and the amber about 8.7:1. The minimum for normal text is 4.5:1. The reader may be tired, upset and reading in poor light.

Five ways to call, and no form

The decision the page is built around: the phone number is on the page five times, and every one of them is a tel: link. It is in the top bar, in the hero, in the scope section, beside the last of the “before we arrive” steps, and in the close, where it is set in the display face with the only amber underline on the page.

The number never breaks across two lines at any width. The two copies in the middle of the page are at least 44 pixels tall, big enough for a thumb.

There is no contact form and no email address. A form on a page about a flooded house invites someone to type when they should ring.

The one section that helps before the call

The source material had six things to do while the water is still moving. They sit under the heading “For someone reading this with water still moving.” The safety step comes first and is set largest, because it is the one that can hurt somebody: stay out of any room where the water has reached power. The four practical steps run two to a row. The sixth is the call, with the number beside it.

What was left out

• No testimonials or review counts. The source had none, so the page has none. The claim section carries the proof instead: photographs before anything moves, moisture readings room by room every day, direct billing where the policy allows it, and the whole file at the end.
• No response time, founding year or job count. None of them is in the source material.
• No count of the service area. The towns are listed by name under “Metro Vancouver and the Fraser Valley”.
• No motion for anyone who has asked for less. Under the reduced-motion setting the moving light and the scroll probe are hidden, and every drawn instrument arrives finished.

The page calls itself a design concept by Droom in its footer, and it is set to noindex. The thinking behind the rest is on how we build websites.

If this reads like your business, the case for this kind of build is on the restoration websites page. If nobody can change your current site, start with the rescue guide for when a web designer disappears: ownership first, design second.