Future Proof Solutions
Dense Technical Content,
Built to Navigate.

One audit.
Two users. Four gaps.

The old FPS website had individual project pages, but no way to navigate them. Projects were listed in chronological order with no filtering, no search, and no consistent data schema. One project had a geology field. Another didn't. One led with pipe diameter. Another led with client name. No two pages matched.

Products and services lived on a single long pillar page with no individual URLs. No SEO signal per product or service, no shareable links, no way for a specifier to land directly on what they needed. There was no specifications section at all.

The content was there. The architecture wasn't.

The audit

The project started with a structured audit of the old site, run together with Colin Harris, Founder and Director. We scored six visual dimensions: layout, cleanliness, consistency, colour, accessibility, and overall presentation. We also scored the content: consumability, findability, navigability, IA, missing gaps, information priority, and unrealised utility.

The verdict was specific. Messy structure, hard to consume, but a colour sense worth keeping. Content-wise, the gaps were just as telling: no specifications section, no individual method pages, no products or services index. Clients who needed to verify FPS's compliance before a tender had nowhere to go. Clients who needed to share FPS's credentials with their own stakeholders had nothing current to hand over.

The Capability Statement already existed. I expanded and redesigned it: Onsite Services, Design Standards, Projects Experience, The Team, and Trenchless Design Products, brought together into one cohesive document. A sales tool and a trust signal in one PDF.

Two users

From the audit, two distinct users emerged. The specifier arrives knowing exactly what they need: a document number, a compliance standard. They need to confirm it before a tender closes. The evaluator arrives with context: a crossing type, a location, an industry. They need comparable past work to assess FPS's capability. Same site, different jobs. Every IA and content decision that followed served one of them, or both.

The architecture was decided. Executing it required the right technical partner. I evaluated 40 candidates and hired Masahiro Yasuda, a full-stack developer who took ownership of the codebase. The site runs on VueJS and WordPress, with a database layer to handle user-submitted specification requests.

One identity.
Modernised, not replaced.

FPS had an existing identity. I modernised it: refined the colours, tightened the typefaces, formalised a three-lockup logo system for primary, compact, and monogram use. I positioned the tone as sophisticated and straightforward.

A component library followed: cards, tables, filters, forms, breadcrumbs, nav states, error pages. Built once, applied consistently across every page type.

The homepage

The old one led with a stock photo and a flat grid of thirteen products, no way to tell a specifier from someone still learning the industry. The new one leads with Design Types, the tool visitors actually search for first. Same company, same tagline, a completely different front door.

Before

After

The rest of the page grew for three separate reasons. Why Work With Us centralises what clients used to hunt across separate pages to find: insurance, ISO certification, project capacity, past experience. Testimonials put a human face on an engineering firm. Autonomous Onsite Services is the newest addition outright, and the only one that isn't a redesign of something that already existed. Two vans, bought and adapted one at a time, already road-tested over long trials, only made public once the relaunch gave the team a reason to. None of the three were decorative. Each need already existed; the relaunch just gave it a home.

Twenty-five specs.
One form for the rest.

FPS complies with 25 industry specifications across Australia, New Zealand, the US, and Europe. Specifiers don't browse. They arrive knowing the document number: MRTS140, NS159, ACS1130. They need to confirm compliance before a tender closes.

First decision: standardise the format. Every spec got the same fields: document number, owner, location, applicable methods, crossings, pipe industries, a plain-language summary, and a source link. 25 entries, one consistent schema.

Then: make it findable. A search field for name, code, or number. A filter panel covering industry type, international compliance, location from continent to city, crossing type, and method. Active filter chips. Left and right modal navigation so a specifier can move through results without returning to the index.

Building the filtering and the specification request form is where Masahiro's contribution went beyond development. He pushed back on my initial filter-panel treatment in ways that improved both usability and visual clarity. On the request form, he defined the drag-and-drop PDF upload module and the alert states for mandatory field validation. These weren't handoff conversations. They were design conversations that happened to be led by the developer.

The harder decision came from a gap in the data. FPS didn't comply with every specification their clients might need. The obvious response: show what exists and stop there.

Instead: design the gap. At the bottom of the specifications page, a "Request specification" form collects the user's email, country, spec name, code, a source link or PDF upload, and checkboxes for applicable methods. On submit, FPS receives a qualified compliance request. The user enters a follow-up pipeline. A database of potential clients starts building itself.

A specifier who finds nothing is a lost lead.
Designing for that moment, not around it, was the most consequential call on the project.

Known for HDD.
Built for eight.

FPS built its reputation on Horizontal Directional Drilling, and most visitors never learned there was more to the business. New engineers, expanded experience, and years of delivery had grown the company eight trenchless methods deep, but nothing on the old site explained what any of them did. The company had outgrown its own website.

Two kinds of visitors needed two different starting points. Some already knew their exact configuration, a specific ground condition, a specific crossing geometry, and searched for it directly. Others didn't know one method category from another and needed to learn before they could even ask the right question.

First decision: build two layers, not one. Eight Method pages became the on-ramp, what HDD is, its history, real project examples, the engineering considerations specific to it, cited industry standards. Inside each method, Design Types went a level deeper, 25 in total, each one a specific configuration, HDD Complex Geometry, DSPT Outfall, Pilot Tube Method: Reaming, tagged to the services and methods they apply to.

Then: order it by actual behaviour. Design Types led the homepage, Methods came second. Visitors who already knew their configuration found it immediately; visitors who didn't could still start from the method category and learn their way in. Neither audience had to detour through the other's starting point.

What used to be called Products didn't survive as a standalone FPS page, but the deliverables didn't disappear, they got repositioned. Installation Calculations, Hydrofracture Analysis, Grout Plans, Profile & Alignment Drawings are still named on the new homepage, under Trenchless Design Products. What changed is the job that section does: it's a teaser now, not a catalog. Borely, a related FPS platform, already prices these as inclusions inside its own estimate packages, so the homepage describes them and hands off to Borely rather than duplicating a transactional page. Design Types and Services became FPS's own primary entry point instead: the client-facing engineering configurations and offerings people actually search for. FPS describes the work. Borely prices it.

Services followed the same standardisation: six offerings, Engineered Design, Subject Matter Expertise, Tender Management, Constructibility Review, Superintendent Representation, Site Support, each cross-tagged into the Design Types they support. The website finally caught up to the company it described.

Thirty-eight projects.
One index to navigate them.

38 completed projects. Rail authorities, water utilities, and oil and gas operators across four continents. The work existed. The system to navigate it didn't.

First decision: standardise the schema. Every project gets crossing types, location, date, methods used, specifications met, pipe utilisation, borehole diameter, crossing length, and pipe types. A sortable crossings table. A downloadable PDF project summary, designed as a branded artifact.

Then: build the index. A projects page with search, filters, and sort. Cards show a location tag and photograph at rest. On hover: methods, crossings, and pipe utilisation revealed without leaving the index. Filter taxonomy: industry type across 10 categories, location from continent to city, crossing type, method, pipe utilisation across 27 values, pipe type.

One issue surfaced during build: filtering or sorting reset scroll position. A user browsing mid-list and applying a filter would snap back to the top. Masahiro solved it by preserving scroll state on every filter apply: a small fix with a real impact on how the index feels to use.

Users who know what they want can filter to it in under a minute. Users still assessing can browse and let the work speak.

Shipped before Melbourne No-Dig Week.
The mockups are the record.

At Melbourne No-Dig Week, FPS had a touch screen running the new site. Engineers used it on the spot to verify compliance against projects they needed to execute. The specifications module did exactly what it was designed to do.

Within weeks of launch, specification requests were coming in. Engineers had a place to go that wasn't a cold email to Colin. From the conference floor and on calls afterward, clients said the same thing: they could find what they needed. That was the point.

I left the role shortly after launch. A new team has since taken the site in a different direction. The original design, documented and handed off in full, is captured in the mockups above.