Triobond
A product site for Triobond Tile Adhesives, helping tilers compare three adhesives, pull technical data sheets, and land on the right product before starting a job.
Live PreviewProject Gallery
Context
The Problem
Triobond makes AS/NZS 4992 and ISO 13007 compliant tile adhesives for the Australian market, with three adhesives built for different jobs: a standard fix, a rubber-modified option, and a flexible premium grade. Tilers needed a fast way to tell the three apart and grab the right technical data sheet before starting a job.
My Role
Design
- Designed the product range, comparison, and detail pages in Figma
- Designed the four-step install process and FAQ around real trade questions
Frontend
- Next.js 16 and React 19 with Framer Motion and Lenis smooth scroll
- Product range, comparison cards, and individual product pages
- In-page PDF preview for technical data sheet downloads
Backend
- Next.js API route for the contact form, verified server-side with Cloudflare Turnstile
- Resend for transactional email to the Triobond team
Infrastructure & DevOps
- Vercel for deployment
- next/font and Next.js image optimization for fast load on mobile job sites
Solution & Process
Design Validation
Structured the site around the tiler's actual decision: three products up front with a plain comparison, a four-step install process, and an FAQ pulled from real trade questions like curing time on fresh concrete and tiling over epoxy, instead of generic marketing copy.
Technical Stack Selection
Built on Next.js 16 with the App Router and Tailwind CSS v4, with Framer Motion and Lenis for scroll-based animation. Product and FAQ content is structured as typed data in the codebase, and the contact form runs through a Next.js API route with Cloudflare Turnstile verification before sending through Resend.
Technical Decisions & Trade-offs
Kept the site fully static with structured product and FAQ data instead of a CMS, since the three-product range and technical content change rarely and don't need an editing workflow. Priority went to fast load and a clear comparison, since site visits often happen on a job site.