Show the workshop
Heavy steel work is hard to judge from a list of services. Visitors need to see the people, the machines and the product in large photos and video.
Synchong Hoe EngineeringManufacturing · Steel fabrication website
A website you enter through the gear.
The website for Synchong Hoe Engineering, a steel fabricator in Penang since 1982. The gear from the company logo opens as you scroll and takes the visitor from a finished pipeline into the workshop.
In short
Synchong Hoe Engineering Sdn. Bhd. (SCHE) fabricates carbon steel and stainless steel products in Penang, and has done so since 1982. Potadot designed and built its website around one move. The page opens on a finished pipeline, then the red gear from the logo grows until a welder fills the screen. From there the visitor stays in the workshop: the numbers, the products, the processes, the markets and the certificates. The last photo looks out through a row of large steel rings into the yard.
The client
A Penang fabricator working in steel since 1982.
Synchong Hoe Engineering Sdn. Bhd. supplies steel products to Malaysia’s water and wastewater industry and to other sectors. It works in carbon steel and stainless steel, from a yard of over 28,000 square metres in Seberang Perai.
The range runs from mechanical couplings and flange adaptors to pressure vessels, heat exchangers and process piping skids. The site names 12 markets, from Malaysia and Singapore to the USA, Nigeria and Australia.
- 1982
- Year established
- 100+
- Employees
- 1,000+
- Projects completed
- 28,000+
- Square metres of yard
The job
A buyer needs to see the workshop.
Steel fabrication is bought on trust and on specification. Before anyone calls, the site has to show the plant, the range and the paperwork.
Make a wide range easy to take in
Seven product ranges, from a coupling to a pressure vessel, need to fit on one home page without turning into a long list.
Put the credentials where they get checked
A procurement team will check ISO 9001, the certification marks and the company registration number, so they need a clear place on the page.
Reach past Malaysia
The company sells abroad. The site has to show that at a glance and give an overseas buyer documents to pass along.
The concept
The gear is the door to the workshop.
Over 40 years of experience is easy to state and hard to show. Synchong Hoe has a gear in its logo, so we made the gear the way in. The page starts outside on finished work, then the gear opens and the visitor is on the workshop floor beside a welder. Round steel keeps appearing on the way down, and the last photo looks back out through a row of large steel rings.
The route through the page
-
1
Finished work
A water pipeline runs beside a river.
-
2
The gear
It grows until the welder fills the screen.
-
3
The record
Three numbers count up on a red band.
-
4
The range
Seven product ranges slide past.
-
5
The floor
Six processes, each with a video.
-
6
Back outside
A view through steel rings, then Contact Us.
Where the look came from
The logo
A red gear with the company initials inside it in navy. It gave the page its two colours, and the gear itself became the opening.
The product
Pipes, flanges and rings are all round. So the important shapes on the page are round too: the gear, the pipe bore behind the welder, the six facility buttons and the red ring that follows the mouse.
The cut
Cutting is the first process the site lists, ahead of bending and rolling. The header, the number band and the contact photo all end on a slanted edge with a thin white line, like a clean cut through plate.
The design
Red and navy, cut on an angle.
The look is industrial and direct: red and navy, Lato at its heaviest for the headlines, and large photos of real steel.
Colour
- White
#FFFFFFFacilities, the map, the contact details - Pale steel
#E6EBF0Products, Why Us and Our Clients - Navy
#0F4271Header, headings, cards and the contact band - Black
#000000The About chapter, around the welding photo - Red
#BE1717Logo plate, number band and buttons
Both main colours come from the logo. Navy carries the information, and red marks the company name, the numbers and the next step.
Type
Create Growth To Our Community Through Steel
Lato · Largest headlineYour Reliable Partner for Metal Solutions
Lato · Section headingsWe are capable of conducting CNC Laser & Plasma Cutting, Rolling & Forming, CNC Lathe & Machining, Drilling, Welding.
Lato · Reading textThe gear
The gear from the logo, in red, cut into the first screen. Behind it is a video of a welder, so the logo is a window from the first second, before the visitor has scrolled at all.
Detail
The four Why Us cards alternate red and navy, each a steel photo under a colour tint. Hover on one and its short explanation appears inside a coloured border.
Rhythm
- Open
- Stats
- About
- Products
- Facilities
- Why Us
- World
- Partner
- Client
- Talk
- Details
Dark chapters are photographs and video. Light chapters are for reading and checking. The bar shows the page at resting height, and the opening and the products take longer in real use, because the page holds still while they play.
Walkthrough
From the river to the workshop.
Follow the page the way a procurement officer would, from the pipeline down to the company documents. The highlight marks each detail, and the note explains it.
Finished work comes first
The page opens on a water pipeline running beside a river, with the headline low on the left and a red gear in the corner.
Why A buyer sees the size of the work before reading a word, and the gear hints that there is more behind it.
The gear opens
Scroll and the gear grows while the river fades. The welder inside it keeps working until the video fills the screen.
Why This is the whole idea in one move. The logo stops being a badge and becomes the way into the workshop.
Three numbers on a slanted band
A red band rises over the video, and 1982, 100+ and 1,000+ count up as it arrives.
Why Years in business, headcount and finished projects are the quick checks a buyer makes on a new supplier.
Seven ranges, moving sideways
The page holds still and the product photos slide across as you scroll. Hover on a photo and a navy panel shows its name.
Why Each product gets a large photo, and seven ranges stay in one chapter of the page.
Press a process, watch it run
Next to the yard size, six round buttons name Cutting, Bending, Rolling, Welding, Painting and Machining. Hover and a button turns red with a play icon. Press it and a video of that process opens.
Why A list of machines is easy to write. A video of the machine at work is much harder to doubt.
Twelve markets on one map
A navy world map carries a red dot for each market, from the USA and Nigeria to Australia, with most of the dots around Southeast Asia.
Why A row of country names asks the reader to imagine the reach. The map shows it in one look.
The paperwork beside the phone number
The company name and registration number sit above six certification marks and two buttons, for the company profile and the catalogue in PDF. Phone, fax, email, hours and a map fill the columns beside them.
Why A procurement team usually asks for these details when it adds a supplier. The PDFs give one person something to forward to the next.
Pipeline, headline, gearThe logo becomes a windowCounts up on arrivalHover for the nameEach button opens a video
One dot per market
What a buyer files away
On the phone
The same story on a narrow screen.
The gear, the sideways products and the round buttons all stay on the phone. What changes is how each chapter is laid out.
- The three numbers stack inside one navy panel with a red border
- The six facility buttons become two columns of three
- Certification marks, both PDF buttons and the contact details run down a single column
Built in
More than the gear.
The gear gets the attention. These details do the quieter work for buyers and for the office.
WhatsApp on every screen
A green button stays in the corner as the visitor scrolls, and opens a chat with a first message already typed.
Search data
The page describes the company, its address and its contact point in a format Google can read.
Documents ready to send
The company profile and the catalogue are one press away as PDFs, for anyone who needs to pass them on.
Tap to call
The office number is a phone link, so a visitor on a phone can call straight from the site.
Both companies together
Synchong Hoe Engineering and Synchong Hoe Piping appear side by side, each with its own logo and email address.
A page for each subject
Product, Project, About Us, Career and Contact Us each have their own page beyond the home page.
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 the company makes, who buys it, and what a buyer needs to see before making contact.
- 2
Content creation
We arranged the company’s story, numbers, products and processes into chapters, in the order a buyer would ask for them.
- 3
Design + build
The design rests on the gear opening and the slanted edges, with every chapter laid out for both desktop and phone.
- 4
SEO + launch
The page title leads with Steel Fabrication Malaysia, and the description and company search data were set before launch.
Questions
About this project.
Running a factory or workshop? Tell Ricky about it on WhatsApp at +6011-1142 1029.
What did Potadot do for Synchong Hoe Engineering?
We worked out the concept, designed the site and built it on WordPress and Elementor, with the scroll movement, the facility videos, the WhatsApp button and the search setup.
Why open on a pipeline and not on the factory?
The site describes that photo as a water pipeline with SCHE mechanical couplings, so it shows what the products are for. Starting outdoors also makes the step into the workshop easy to follow.
Does the gear work on a phone?
Yes. The gear, the welding video and the sideways products all run on a phone, and each chapter is laid out again for the narrow screen.
Can you build something like this for my factory?
Yes. Every site starts from the client’s own business, so yours would have its own idea, drawn from your logo, your product and your buyers. Tell us what you make and we will show you how we would approach it.
