01 / Project delivery
Commercial installations
First and second fix, wet heating and commissioning belong together because they share a build programme and quotation process.
Case 05 · Civanta Building Services · Portfolio concept
Complex services.Clear routes.
A fictional commercial building-services website that brings technical scope, customer responsibilities and a dimensional plant-room hero into one clear digital experience.
← Back to Project Ocean
The design process
From intention to interface.
01 / Business intention
Start with the person making the decision.
The brief was to position a commercial water-side specialist, not a general domestic repair service. Contractors need scope, programme coordination and handover clarity; property and facilities teams need maintenance, access and reporting information.
We organised the experience around those responsibilities. The intended benefit is better self-selection and more useful enquiries—not simply more clicks. As a fictional portfolio project, no real clients, credentials or commercial results are claimed.
02 / Brand & visual system
Civanta’s modular four-part mark suggests connected components. Ink, signal blue, pale steel and warm white create a technical but approachable identity. Geist Sans headlines, Geist Mono labels, fine grids and generous spacing turn dense service information into a readable hierarchy.
Ink#07121A
Signal blue#3DA1CE
Pale steel#DDE5E8
Warm white#F6F5F1
03 / Service architecture
Group the offer by the job to be done.
Two audience pages provide context. The Services hub then separates four needs, each with its own scope, information requirements and next step.
Contractors & M&E teamsProject delivery, coordination and handover.
Property & facilities teamsOperating buildings, maintenance and reporting.
02 / In operation
Reactive & planned maintenance
Fault attendance and scheduled visits share the needs of occupied sites: access, authorisation and clear reporting.
03 / After handover
Defects period cover
A separate route makes the agreed period, instruction process and responsibility boundaries easier to understand.
04 / Technical services
Specialist water services
HIUs, chlorination and system cleaning stay discoverable without filling the main menu with specialist terminology.
04 / The dimensional hero
An engineered first impression.
The plant-room formation makes coordination visible: metallic components and staged depth become a visual metaphor for a connected building-services system.
The delivered effect uses 72 pre-rendered WebP frames on a 2D canvas. JavaScript maps native scroll progress to the sequence, loads nearby frames and settles the completed scene into a framed layout. It creates a 3D-style impression without a live WebGL model; the original editable modelling files are not included.
05 / Menu formation
Audience first. Detail one level deeper.
The compact menu expands into a panel with staggered text reveals. Audience routes lead the hierarchy, followed by Services, Work, About, pricing, FAQs and Contact. Technical subcategories live in the Services hub; detail pages add local section links. This keeps the primary navigation short enough to scan while supporting deeper research.
06 / Front-end & art direction
Precision beyond the hero.
Responsive CSS handles grids, type, cards and menu motion. JavaScript coordinates frame loading, reveals and carousel controls; the source includes keyboard menu handling and reduced-motion alternatives. Self-hosted fonts and WebP images keep the static Cloudflare package self-contained.
AI-generated work scenes establish a consistent technical art direction. They illustrate service contexts, not completed commissions; generic stock photography is also kept separate from project evidence.
Depth Digital / Portfolio concept
Technical depth. A clearer experience.
A study in turning a complex commercial offer into confident positioning, purposeful motion and understandable navigation.
Back to the beginning · 01 / 05
Remedial & Sports Massage Practice
