Work

Argonaut Website & CMS

Argonaut is an Egyptian EPC contractor and equipment trader working across HVAC, MEP, and fire safety. I designed and built their public site and the CMS behind it, so a non-technical team can run their own content without a developer in the loop.

Role
Design and engineering
Period
2025 – 2026
Stack
Node.js, Postgres, Prisma, Better Auth, AWS S3, Resend, Turborepo, Vercel, TypeScript, Next.js, React, Tailwind, Radix UI, Motion, Tiptap, TanStack Query, Figma
Site
argonaut.com.eg
  • The Argonaut home page: a pill-shaped navigation bar over an aerial photograph of a tanker moored alongside a jetty, with the headline “HVAC, MEP & Fire Safety Specialists in Egypt” and a “Discover our services” button
  • The “Business arms” section in two columns: Supply network under a TRADING label and Project delivery under a SERVICES label, each with a photograph and a scope strip, listing equipment supply, supplier coordination and commissioning on one side, and engineering, procurement and construction, and maintenance on the other
  • The strategic partnerships section, “Trading partners with industry leaders”: a row of manufacturer wordmarks including Halton, Gonair, Aironn, Trane, Red Shield, Volute, Gerpaas and Enposs, above a numbered capabilities list for energy optimization, cost savings and sustainability, and a featured-partner panel
The home page, the two business arms, and the manufacturer partnerships.

Context#

Argonaut supplies equipment and delivers the engineering around it, across oil and gas, defense, healthcare, marine, and infrastructure, partnering with manufacturers including Halton, Trane, Aironn, and Gonair.

The site had to do a specific job: convince a procurement engineer or consultant that this firm can be trusted with a large scope of work, then get them to a quote request quickly.

The Argonaut expertise page: a dark header reading “What we engineer” with a “Domains · 05” marker, above cards for Electrical, Fire Safety, HVAC, Mechanical and Plumbing, each carrying a one-line technical scope
One axis of the IA as its own page: the five expertise domains, each addressable.

SEO and information architecture#

I led SEO strategy and information architecture for the site. The structure is built around how procurement buyers actually search, which is rarely by company name. They search by capability, by sector, and by manufacturer.

So the IA is cut along those axes: expertise domains (electrical, fire safety, HVAC, mechanical, plumbing), capabilities (engineering and design, procurement, installation, maintenance, trading), and sectors served. That gives real content depth on the terms that matter while keeping every page a short path to a quote request.

The CMS#

The site is backed by a custom CMS the Argonaut team uses directly. Projects, articles, suppliers, clients, and the partner manufacturer list are all editable content rather than hardcoded pages, which is what keeps a portfolio site from going stale six months after launch.

The design constraint was that the editors are engineers and commercial staff, not content people. Every field had to be obvious enough that nobody needs a manual, and structured enough that the published page stays on-brand no matter who filled it in.

Design#

Designed end to end in Figma. The visual language is deliberately restrained and technical: the audience is evaluating competence, not being sold to, so the site reads closer to a capability statement than to a brochure.