New website · Water and pumping
Pumpro Water Solutions
A new 27-page website for a water and pumping business. Animated diagrams explain what Pumpro does, then every page sends the visitor to one of two actions: request a quote or book a water-system assessment.
The brief
Pumpro is the water and pumping business within DLX Commercial and Industrial Solutions. It had a business-model brief and a logo, but no website and no existing address to start from.
The job was an information and capability site, not a shop. It had to explain what Pumpro does for five customer groups, give every page one of two next steps (Request a quote or Book a water-system assessment) and sit beside the Airco website so the group's sites read as one family.
What we decided
Organise around the customer's situation, not a catalogue
Three ways to work with Pumpro (I know what I need, I have a water problem, my system needs looking after) became the structure of the home page and the first question on the quote form.
Make the five commercial categories the spine
Equipment, engineered systems, water and irrigation, maintenance and lifecycle, and efficiency and optimisation drive the solution explorer and the five solution lines.
Show the whole lifecycle
The six-step customer journey (identify, assess and design, quote and secure, source and deliver, maintain, optimise and expand) became the How we work page and a six-step band on the home page.
Sell the assessment
A water-system assessment is the low-risk first step for a customer who has a problem rather than a specification, so it has its own page and booking form.
Do not overclaim
The site names no brands, prices, stock levels, certifications, customers or statistics. Anything unconfirmed was listed for the client to confirm instead of being written in.
What we built
- Home (1)
- Animated water banner, solution explorer, a scroll-driven follow-the-water journey, industries, a six-step method and FAQs.
- Solutions (9)
- Overview; pumping equipment; engineered systems; water and irrigation; and system pages for borehole and submersible pumping, booster and pressure, solar pumping, storage and distribution, and industrial process water.
- Industries (6)
- Overview plus commercial properties, agriculture, industrial and manufacturing, institutions, and contractors and developers.
- Services (4)
- How we work, water-system assessment (with booking form), maintenance and lifecycle, efficiency and optimisation.
- Company and forms (7)
- About, contact, request a quote, privacy notice, photo credits, thank-you page and a 404 page.
Design system
Colour
#003463#0678BB#001A33#4CC3FF#1FC7DC#D9D9DFTaken from the Pumpro logo. Aqua is used as a gradient from #6fd6ff to #1fc7dc on buttons and highlights. Cool greys (#4c4c68, #d9d9df, #f5f6f8) are shared with the Airco site.
Type
Inter in four weights, self-hosted. Headlines are 48/58 and light on banners, section headings 32/44 extra bold, body text 16/24, and kickers are 14 px uppercase.
Layout
1200 px content width with 24 px gutters and breakpoints at 1100, 900, 700 and 480 px.
Components
- Two-row header with Solutions, Industries and Services mega menus, and a mobile drawer
- Breadcrumbs, dark photo banners, photo cards and vertical explorer tabs
- FAQ accordions, square-cornered buttons and a closing call-to-action band
- Footer with the group strip, and a fixed Call, Assessment and Quote bar on phones
The panel at the top of this page shows each project's colours and motif. It is a summary of the design system, not a screenshot. See the live site for the real pages.
Highlights
- Eleven animated diagrams drawn in code: water flow, a booster set with a demand slider, pump curve against system curve, borehole and solar pumping systems, storage and distribution, a process-water circuit, centre-pivot irrigation, the parts of a pump set and a pump-speed energy explainer.
- Follow the water: a scroll-driven journey from source through pump, controls and pipework to the point of use.
- Every animation pauses when off screen, has a pause button, stays still for visitors who ask their device to reduce motion, and carries a text caption. Illustrative figures are labelled as illustrative.
Built to generate leads
- Three lead forms: Request a quote, Book a water-system assessment and Contact. Each has a consent tick box.
- Every submission goes straight into the group's lead database, and every form also works with JavaScript switched off.
- If the database cannot be reached, the visitor sees an email and phone fallback, so no enquiry is lost.
Quality checks
- Unique title and description on every page, canonical links, social share cards and structured data.
- Skip link, one H1 per page, keyboard-operable menus and text alternatives for the diagrams.
- Text and button colour pairs measured at 6.3:1 contrast or better.
- All 27 pages checked at 360, 768, 1280 and 1920 px wide: no sideways scrolling and no console errors.
Want a design brief like this for your business?
Start with a free homepage preview, or ask for a written quote.