BrennockHaulage
A ten-truck haulier that won work by phone. The new site lets a buyer see the trucks, check the paperwork for their load and ask for a price in two minutes.
- Sector
- Road haulage, Co. Meath
- Role
- Research, design and build
- Built with
- Figma, HTML, CSS, JavaScript
The homepage
A buyer landing on a haulier’s site has one question: do they carry my kind of load? I started the quote with the goods themselves, seven cards from chilled food to car parts, so buyers find their own cargo in the first second and know the firm already moves it.
I closed the page with the shift from day to night to show what a haulier really sells: a service that keeps running for the customer around the clock. Goods loaded in the afternoon are on their dock before the first shift.
Winning the load
Buyers of chilled food or building materials always ask the same thing first: are you certified for this? I gave every sector its own page with what is carried, how, and under which certificates, so the phone call starts at the price instead of the paperwork.
Most buyers phone a haulier because the contact form is one empty box. I laid the whole quote out on one page with every step visible from the start, so they can see it takes two minutes, and the planner gets a request he can price instead of a voicemail.
I built the About page around the firm’s own yard to show its real scale and capacity, because a buyer handing over a load wants to know the trucks exist before they pick up the phone.
A haulier grows only as fast as it finds drivers, so I kept the careers page to a short list a driver can read in the cab: the route, the hours and the pay, and one tap to apply.
Type and colour
On the phone
Behind it
For agencies and anyone who wants the reasoning: what the business needed, what its competitors do, what I left out and what sits under the pages.
The problem
A small haulier lives on repeat customers and phone calls. When a new buyer looks them up, they find a logo, a phone number and a stock photo of a truck that is not theirs. Nothing says what they carry, whether they hold the right certificates, or what happens after a call.
The site had to do the first conversation for them: show real trucks, answer the paperwork questions per load, and turn interest into a written quote request.
What others do, what I did
Most Irish haulier sites list “general haulage, warehousing, logistics” in six identical boxes.
I gave each of the seven loads its own page: what is carried, how, and the certificates behind it.
Fleet pages list axle counts and engine sizes.
I showed the real yard and the real trucks, because the person booking a load wants to know the trucks exist, not their torque.
Stock photos of trucks that belong to someone else.
Every truck on the site carries the firm’s own logo.
A contact form with one empty text box, so most buyers phone instead.
I built a quote that starts from the goods and asks only what a planner needs to price the job.
What I left out
- A customer login and live tracking in the first release. They only earn their place once regular customers are using the site.
- A separate services page and a fleet page. Sectors carry the services, and About carries the fleet.
- Any statistic strip. “20 years, 500 clients” proves nothing and every competitor has one.
- A full-screen map on Contact. It swallowed the scroll on laptops.
How it is built
Plain HTML, CSS and JavaScript, no framework, on GitHub Pages. Each page is light enough to open on a phone in a yard. The hero is one 1200 by 1200 photograph; the truck’s three positions are cut-outs placed on it, so the image never reloads.
- Scroll steps. Wheel, keys and touch are read as gestures. One gesture plays one step; the momentum after it is absorbed.
- Quote form. Seven cargo cards, frequency, route, amount, date and contact on one page, sent as one structured message the planner can price.
- Concept site. Every form ends in a note that this is a portfolio piece, and no data is stored.
Next phase
A driver and delivery tracking portal for regular customers, designed as the next phase.
Every screen above is a recording of the live site, not a mock-up.
Visit the live site