Aller au contenu
0
Case study

Construction and fit-out, all trades under one contract, Casablanca

Wolcons rebuilt as a single page: 9 sections, 13 costed projects, and a quote flow that hands off to WhatsApp, with no dependencies and no build step.

See it live
Wolcons, Construction and fit-out, all trades under one contract, Casablanca
9
sections delivered, from problem to quote
13
costed, filterable projects
6
questions answered in the FAQ
0
external dependencies, 100% static site

The bottleneck

Wolcons sells one contract covering every trade, but its site listed services with no method behind them and no proof. In this market a developer does not compare service lists, he compares reliability: who answers for the budget, the schedule, and the handover. The bottleneck was not name recognition, it was the absence of a site able to carry that demonstration and turn a visit into a quote request.

What we did

We rebuilt the site as a single page structured like a continuous argument: the real problem, the method in four steps, the three trades, the proof, the questions that stall a decision, the quote. Colors were sampled pixel by pixel from the official logo instead of approximated, paired with Outfit and Inter, with sharp corners, one-pixel rules, and blueprint grids to hold an architectural register. The 13 projects are published with location, floor area, trade packages, and budget, filterable by mission, and the 8 supplier brands run in a credibility strip. The quote form opens a pre-filled WhatsApp conversation with an email fallback, the fastest-answering channel in Morocco.

What shipped

  • 01 One-page site, 9 sections chained into a single argument: problem, method, trades, projects, reviews, partners, FAQ, quote
  • 02 Web identity derived from the logo: colors sampled pixel by pixel, Outfit and Inter, 2 px radii, one-pixel rules, blueprint grids
  • 03 Portfolio of 13 projects with location, floor area, trade packages, and budget, filterable across 3 missions
  • 04 WhatsApp conversion path: a 7-field quote form that opens a pre-filled conversation, email fallback, permanent floating button
  • 05 In-house animation engine built on IntersectionObserver and a single rAF loop, fully neutralized under prefers-reduced-motion
  • 06 Technical base with no dependencies and no build step: sized WebP images, 44 px tap targets, visible keyboard focus, title, description, canonical, and Open Graph