Say what HPE sells in one line
Compressed air and dust collection are the two reasons anyone visits. Both had to be clear before the first scroll.
Hydro Pneuma EngineeringIndustrial supply · Company website
A website that ends with the company van.
The website for Hydro Pneuma Engineering Supply, a compressed air and dust collector supplier in Butterworth, Penang. It opens in the kind of plant its buyers work in and closes on HPE’s own van, with the logo and office number on the side.
In short
Hydro Pneuma Engineering Supply Sdn Bhd (HPE) supplies compressed air and dust collector systems to industry in Malaysia, from Butterworth in Penang and a Klang Valley branch in Seri Kembangan. Potadot designed and built its website. The home page follows the order a factory buyer thinks in: the plant, the machines, the record, the service and the makers behind the machines. It closes on a photograph of HPE’s van, with the logo, web address and office number on the side.
The client
A Butterworth supplier with two product lines and two branches.
HPE has served industry since 1989. Its work falls into two lines. Compressed air covers air compressors, dryers, filters, gas generation and medical air. Dust collection covers collector systems, filters and dust explosion safety.
The home page shows four brands under its authorised dealer heading: Ingersoll Rand, Parker, Donaldson Torit and Trident. HPE also offers on-site consultations, with repair and maintenance after the sale.
- 1989
- Serving industry since
- 300+
- Satisfied clients
- 16+
- Industries served
- 2
- Branches
The job
A factory buyer checks the machine, the brand and the back-up.
Nobody buys an air compressor on impulse. An engineer or purchaser is comparing suppliers. The site has to make that comparison quick, then make the phone call easy.
Look at home in a factory
A supplier of heavy equipment should look like it knows a plant. That meant machinery on screen, strong colour and very little decoration.
Show the makers behind the machines
Buyers already know these brands. The dealer logos do more for trust than anything HPE could write about itself.
Show that someone will answer
A machine has to be looked after once it is installed. Phone numbers, both addresses, working hours and WhatsApp all had to be easy to find.
The concept
Start on the plant floor. Finish at the van.
HPE does not sell something you pick off a shelf. It sells a machine that has to keep running in someone’s factory, and a team that will come and look at it. So the page starts where the buyer stands, among pipes and valves, and moves step by step towards HPE itself: the machines, the record, the service, the makers. The last picture is a white van with the HPE logo and a phone number on its side. By then the company is more than a name on a screen.
The route through the page
-
1
Plant
Pipes and valves beside one clear headline.
-
2
Machines
Two product lines, one card each.
-
3
Record
30+, 300+ and 16+ on a blue band.
-
4
Service
After-sales and site visits come first.
-
5
Makers
Four dealer logos on a moving strip.
-
6
Van
The logo, the number and one button.
Where the look came from
The logo
Three heavy blue letters. That blue became the colour of every band and panel, so the page and the van read as one company.
The plant
Pipes, valves and silos are what a factory buyer sees every day. The photographs sit under or beside a blue sheet, so they feel familiar and still belong to HPE.
The van
A white van with the HPE and Ingersoll Rand logos, www.hpe.my and 04-3326987 on the side. It is the plainest proof that this company exists outside the screen, so it gets the last word.
The design
Blue for HPE, orange for what the buyer came for.
The palette is small on purpose. Blue holds the brand, orange points at the key words, and white keeps the product text easy to read.
Colour
- White
#FFFFFFText chapters - HPE blue
#001CA8Bands, panels and headings - Deep navy
#000E54The foot of the blue gradients - Light grey
#E6E6E6The dust collector card and the four reasons - Orange
#FFAE3EKey words, frames and rules - Black
#000000Reading text
In the first headline, only “Compressed Air Solutions” and “Dust Collector Systems” are orange. The slanted band picks out the same two products in orange, as “Dust Collector System” and “Compressed Air System”, so a visitor is reminded halfway down what HPE sells.
Type
Empowering Industries with Compressed Air Solutions
Lato · The first headline30 YEARS IN INDUSTRIAL SERVICES
Roboto · Section headings and figuresProviding professional consultations, including on-site visits, to thoroughly understand your industrial requirements.
Lato · Reading textThe slanted cut
A straight edge tilted off the vertical. It separates the blue sheet from the photograph on the first screen, shapes the band in the middle of the page and trims the orange frame around the van. All three lean the same way, which gives a page of square blocks some direction.
Detail
Each machine stands half outside its card, so it looks solid and not pasted in. One card is blue and one is grey, which keeps the two product lines apart at a glance.
Rhythm
- Opening
- About
- Expertise
- Figures
- Reasons
- Band
- Dealers
- Contact
- Footer
Blue bands and white chapters take turns down the page, so the product text never turns into one long wall. The bar above is the real home page, to scale, with each section in the colour that mostly fills it.
Walkthrough
From the plant floor to the van, one stop at a time.
Follow the page as a purchaser would, from the plant photograph down to the van. Each highlight marks one decision, and the note explains the reason for it.
Both product lines in one headline
The headline sits on the blue sheet. Only “Compressed Air Solutions” and “Dust Collector Systems” are orange, and they stand out from the white words around them.
Why A buyer who lands here should know at once whether HPE sells what they need.
A thick orange frame
A row of machines in a plant room sits inside a thick orange frame, laid over a blue block.
Why The frame crosses the edge of the blue block. That overlap carries the eye out of the dark opening and into the lighter reading chapters.
One card for each line
Compressed air gets the blue card and dust collection gets the grey one. Each machine stands on top of its card, with a heading and a short summary of the range below it.
Why Someone looking for a dust collector can go straight to the right half of the screen and skip the rest.
Three figures on a blue band
Years of industry experience, satisfied clients and industries served, each with a white icon and an orange number: 30+, 300+ and 16+.
Why After the products, a buyer asks how long this supplier has been around. The band answers in the time it takes to scroll past.
Service comes before the sales points
Four grey cards give the reasons to choose HPE. The first is after-sales repair and maintenance. The second is consultations with on-site visits.
Why Buying the machine is only the start, and its upkeep is what a plant manager worries about. So the cards open on that subject.
Four makers on a moving strip
Below the slanted band, the dealer logos slide across the page: Ingersoll Rand, Parker, Donaldson Torit and Trident.
Why Engineers already know these names. One recognised logo tells a buyer more than a paragraph of claims.
The van gets the last word
HPE’s van sits in a slanted orange frame with the logo, web address and office number on its side. Beside it is a short invitation to talk to a technician and one Contact Us button.
Why Everything above describes a company. This picture shows its own van and a number to call, right where the buyer decides to get in touch.
The two lines, in orange
Frame over the blue blockOne card per product lineRead in one passAfter-sales comes firstFour makers, one stripLogo, number, button
On the phone
On a phone, the headline gets its own dark panel.
The order stays the same from plant to van. What changes is how each chapter sits on a narrow screen, and nothing scrolls sideways.
- The first headline moves onto a dark panel, so it stays readable over the photograph
- Product cards stack into one column, with each machine still standing on top
- The van keeps its slanted frame, with the Contact Us button below it
Built in
Behind the casing.
A buyer will not notice most of these details. They help people find HPE and reach someone quickly.
Found for the right words
The page title opens with “Air Compressor Supplier Penang, Malaysia”, and the description names the air and dust products.
Readable for Google
The page describes the organisation, the website and its breadcrumbs in a format search engines can read.
WhatsApp at every step
A green button stays in the corner as you scroll and opens a chat with the first message already written.
Calls in one tap
The three office numbers are phone links, so a buyer on a mobile can press one and call.
Both branches in the footer
Butterworth and the Klang Valley sit together, with phone, fax, email and working hours.
Company numbers up top
The registration and company numbers sit beside the logo in the desktop header and again in the footer, where a purchaser can check them.
How we built it
Same process, every project.
Every Potadot project starts by understanding the client's situation before anything is designed. See all seven steps
- 1
Understand the business
What HPE supplies, which brands it deals in, and what a plant buyer checks before picking up the phone.
- 2
Content creation
We sorted a wide range into two product lines, then set out the record, the service and the dealer brands.
- 3
Design + build
Blue, orange and the slanted cut came first, then every stop from plant to van, on phone and desktop.
- 4
SEO + launch
Page titles, descriptions and search data set up around the words buyers use, then launch and support.
Questions
About this project.
Selling to factories? Tell Ricky what you supply on WhatsApp at +6011-1142 1029.
What did Potadot do for Hydro Pneuma Engineering?
We worked out the concept, organised the content, designed the pages and built the site, with search setup and a WhatsApp button. Our credit is in the footer of the live site.
Why end the home page on a photo of a van?
A supplier is judged on whether someone turns up after the sale. The van is a simple picture of that, and it puts the logo and phone number in front of the buyer just as they reach the Contact Us button.
Why show other companies’ logos on a client’s website?
HPE is an authorised dealer, so those brands are part of what it offers. A buyer who already trusts a maker will look more closely at the supplier who carries it.
Can you build something like this for my company?
Yes. We would start from what you supply and what your buyers check before they call, and the idea would come from there, just as the van came from HPE’s own business. Send us your product list, tell us who orders from you, and we will show you how we would approach it.
