Skip to content
apexvow.

Construction · Renovation

Nineteen years of renovation work, made findable

A design-build renovation build across two markets and two currencies. Nine of four hundred and twelve finished projects given their own page, with price ranges for both cities standing in front of the paid survey.

By design
412
projects catalogued across two markets and two currencies
Vertical
Construction
Stack
Hand-written HTML/CSS, Two markets, two currencies, Project catalogue, Before/after comparison, No builder
Live site
datum.apexvow.com
Nineteen years of renovation work, made findable — home page

The content on the published build is demonstration data. The prices, the contact details and the catalogued projects are placeholders. What this case shows is the build: the structure, the interface and the decisions behind them. Copy, prices and contacts sit apart from the layout, so replacing them is an edit, not a rebuild.

The problem

A renovation company with nineteen years behind it and four hundred and twelve finished projects keeps every one of them in a folder on somebody’s laptop. Prospects cannot see the work, cannot tell what anything costs, and cannot find out until they have paid for a survey.

The second problem was the harder one. The company works in two countries. Chicago and Lisbon are different markets, different currencies, different units — one quotes a whole project in dollars, the other in euros per square metre — and different permit rules. One site had to speak to both without becoming two sites.

What I built

One price table, two markets

Seven kinds of work, each with a range for Chicago in dollars, a range for Lisbon in euros or euros per square metre, and how long the crew is on site. That table is the spine of the site. On a phone it reflows into readable rows instead of asking anyone to drag a table sideways — which took more layout work than the rest of the page.

Under it, one line I argued for and kept: if your number is below the bottom of a range, we will say so on the phone instead of after a survey you paid for. That sentence turns some people away, and turning them away early is what makes a paid survey fair.

Nine projects, not four hundred

Each with its own page — Logan Square two-flat, Kenwood greystone, Oak Park bungalow, Príncipe Real apartment, Estrela pombalino, Cascais villa and three more. A catalogue that shows everything shows nothing. The job was to pick the nine that answer the questions a buyer actually arrives with, and leave the other four hundred in the folder.

Before and after, honestly

The section opens with “anyone can photograph a finished kitchen”. Same room, same angle, same framing, and the before is genuinely ugly. Most contractors hide the before. It is the only thing that makes the after mean anything.

Six phases, and you always know which one you are in

Survey, scope and budget, design and selections, permit and pre-construction, construction, close-out. Renovation clients fear the silence more than the cost. The process section says: there is a named place you are standing in, and a named next one.

The decisions worth naming

It looks like a drawing, not a magazine

Renovation sites are warm photography and a serif. This one goes the other way: a visible grid, registration marks at the corners of images, numbers set like dimensions on a plan, one magenta that appears only on the thing you are meant to press. It reads as an architect’s drawing, which is what the client is buying before they buy a kitchen. Material swatches sit next to the price table, so “white oak” and “lime plaster” have something to point at.

No content system

The content changes a few times a year; the structure never. What a content system would give this client in convenience it takes back in logins, updates and monthly upkeep. What they get instead is a page that loads at once and cannot be broken by an update — with markup structured so that moving into WordPress later is a template job, not a second project.

On mobile

The drafting language survives the reflow: the grid lines, the registration marks and the dimension-style numbers are still there on a phone. That is the test of a design language — it either holds at every width or it was decoration.

What this is built to change

Nineteen years of work stops being invisible. The enquiry starts from a survey rather than a sales call, and the people who book it have already seen the range and stayed.

The site itself

Price ranges for both markets in one table — dollars for Chicago, euros and €/m² for Lisbon
Price ranges for both markets in one table — dollars for Chicago, euros and €/m² for Lisbon
Mobile: the drafting grid and registration marks survive the reflow
Mobile: the drafting grid and registration marks survive the reflow