Get from the introduction to the service
The pipe experience gives the concept character, then hands over to practical service information.
Project 03 / Services & trades
Waterways
Make way for water. An interactive pipe journey introduces a practical website for plumbing services.
The project, in brief
- The brief
- Give a plumbing business a memorable entrance and a direct route to its services.
- Our contribution
- 3D pipe assets, an interactive introduction, responsive pages and frontend optimisation.
- Delivered
- A five-page concept with an 84% smaller public-file footprint than its initial custom build.
The reduction compares build files on disk. It is not a measured page-speed or enquiry improvement.
The thinking behind the design
Give visitors a clear next step
Dedicated service pages and contact routes support an enquiry without making the visitor explore everything.
Reduce the cost of the visuals
Optimised assets reduce the public build footprint. This is an implementation measurement, not a measured business result.
The full story
An independent website redesign by TheWebCoZW Harare, Zimbabwe · Plumbing services · September 2026
A blue-lit valve opens a journey through a pipe and into green PVC before revealing the Waterways homepage. The finished five-page site preserves that distinctive introduction while reducing the public-file footprint by 84.0% compared with our first custom build.
This is an independent portfolio concept delivered as a private demonstration. It is not presented as a commissioned client engagement or a measured commercial success.
The brief
Waterways Plumbing Services is a plumbing business in Harare with an existing Wix website. Its public content provided the starting point for understanding the business, its services and its visual material.
The design brief was to give plumbing a memorable visual identity: an interactive handle, cool blue lighting, a journey inside the pipe and a reveal of green PVC. A layered menu took inspiration from the earlier Joina City project. The practical challenge was to connect that expressive opening to the information a visitor needs: services, price guidance, work imagery and a clear way to get in touch.
TheWebCoZW's scope covered the visual direction, Blender pipe assets, the interactive introduction, responsive pages, navigation, content refinement and performance improvements.
The central idea: let the service introduce itself
The pipe became the organising idea for the experience. Instead of beginning with a generic plumbing photograph, the site begins with an object visitors can operate.
- Turn. A blue-lit valve invites a clockwise drag. A tap or keyboard action also activates it.
- Travel. The camera moves into the pipe, making the product itself the transition.
- Reveal. Green PVC connects the cinematic opening to familiar plumbing materials.
- Explore. The sequence resolves into the homepage, where services and contact details take priority.
The scene uses a 7700 K key light for the requested cool blue mood. The journey lasts roughly eight seconds, but visitors can choose Enter site immediately or leave the sequence with Escape. Reduced-motion and data-saving preferences receive a static entry experience.
A closer look
Refinement: keep the character, simplify the interface
The review concentrated on elements competing with the content. Decorative arrows and plus signs were removed, along with the lower introduction bar and scroll cue. Bloom was removed, reflections were softened and the footer became more compact.
The layered menu retained its staggered reveal, while plain action labels and more restrained styling made the interface easier to scan. Focus management and contrasting focus indicators support keyboard use. These changes were intended to make the journey feel deliberate and give the content more room.
A useful destination after the introduction
The final information structure contains five pages:
- Home: introduces the business, summarises services and provides contact routes.
- Services: groups the offerings with published starting prices and listed times where available; other work asks visitors to request a quote and confirm timing.
- Gallery: presents six images from the existing business website, with an enlarged view and clearly labelled Previous, Next and Close controls.
- Privacy policy: explains the information handling associated with the site's actual features.
- Terms and conditions: sets expectations for using the website and its content.
The service information is presented as guidance. Published starting prices are not treated as guaranteed quotes, and listed times are not promised completion times. Gallery material is not labelled as verified completed projects where that cannot be established.
Phone and email links provide direct contact. The footer carries the legal-page links and TheWebCoZW copyright credit, while acknowledging third-party rights in the policy content.
Performance: reduce what visitors need to load
The largest reduction came from the assets. The pipe model was deduplicated, welded and compressed with Meshopt while retaining all six interaction and camera markers. Four core images were resized and converted to WebP. The later gallery adds six images totalling approximately 99 KB.
The 3D experience is also loaded selectively. Dedicated content pages and direct content anchors do not request the scene runtime or model. When the introduction is used, its runtime and model load in parallel. Leaving the experience cancels the model request and prevents a delayed scene from appearing. Idle rendering is demand-driven, and animation pauses while the scene is hidden or the menu is open.
| Measure | Initial custom build | Finished asset / site | Reduction |
|---|---|---|---|
| Total public files | 8,004,802 bytes | 1,283,150 bytes | 84.0% |
| Pipe model | 1,457,012 bytes | 314,872 bytes | 78.4% |
| Four core images | 4,135,152 bytes | 75,068 bytes | 98.2% |
The first optimisation pass reached 1,136,992 bytes. Services, gallery and policy content brought the completed five-page version to 1,283,150 bytes across 25 public files. The homepage entry script and shared chunk total 8,347 bytes; the separate content-page script is 2,371 bytes.
These are file sizes on disk before transport compression. The comparison is between versions of this custom build, not against the original Wix website. It does not measure loading time or Core Web Vitals.
Validation and outcome
Seven automated tests passed, covering the turn interaction, lighting bias, journey stages and loading lifecycle. Static checks verified all five routes and 112 local references, including navigation, assets and footer links. The compressed model decoded successfully with the Three.js loader in Node. Camera framing calculations were checked at five desktop, tablet and mobile viewport sizes, and selected flat-colour text and focus combinations were checked for contrast.
The result is a cohesive website concept with a distinctive opening, practical service information, a gallery and direct contact routes. Its strongest demonstrated improvement is the smaller file footprint, together with the separation of the optional 3D experience from everyday content browsing.
There are no measured conversion, revenue or field-performance results. The recorded checks are not a full accessibility audit or a substitute for browser interaction and user testing. Those would be the next steps before assessing the experience in public use.
Project details and evidence
Design and development: TheWebCoZW Tools: Blender, Three.js, HTML, CSS, JavaScript and esbuild Status: Private demonstration; latest recorded deployment completed 13 September 2026 Case study prepared: 19 September 2026
The images in this portfolio are screenshots of the saved website build, captured on 19 September 2026.
View the private demonstration — access is restricted to the owner.
Source material: Waterways' existing website, services, booking listings and about page. Pricing and timing source checks were recorded on 13 September 2026.
The file-size comparisons are recorded in the project build, model and image reports. They compare versions of this custom build before transport compression.
Website screenshots captured 19 September 2026 · Saved prototype build. This project is an independent concept.