Sort by car, not by product
A front lip for a BMW G20 means nothing to a Honda FL5 owner. The catalogue had to start from the exact model.
Alpha CarbonsAutomotive · Parts catalogue website
A parts counter that asks what you drive.
The website for Alpha Carbons, a carbon fibre and performance car parts specialist in Perai, Penang. Like a good parts counter, it asks for your car first, then shows the parts listed for it and hands you to a person on WhatsApp.
In short
Alpha Carbons is a carbon fibre and performance car parts specialist at Jalan Chain Ferry in Perai, Penang. Potadot designed and built its website around one question: what do you drive? The first screen offers twelve tiles. From there a visitor picks a model by chassis code, filters by part type, opens a part with its price, and presses Buy Now to start a WhatsApp chat with the message already written.
The client
A Penang parts specialist listing 49 car models.
Alpha Carbons works from No.19, Jalan Chain Ferry in Taman Chai Leng, Perai. It describes itself as a manufacturer and distributor of carbon fibre parts and accessories. The services it names include carbon fibre parts, headlamp and tail light conversions, and body kit upgrades.
The range covers ten car makes, from BMW, Mercedes-Benz and Porsche to Honda and Toyota, plus GT wings and carbon fibre steering wheels. Besides Perai, the site lists contacts in Kuala Lumpur and Johor Bahru.
- 10
- Car makes
- 49
- Car models listed
- 900+
- Parts on the site
- 5
- WhatsApp contacts
The job
More than 900 parts, and each buyer wants a handful.
Someone looking for a spoiler for one particular car has no use for the rest of the range. The site has to get that person to the right few parts quickly, then to someone who can answer questions.
Let each part stand alone
A buyer wants to see the part, read about it and know what it costs. Each one needed its own page and its own link.
Show that the shop is real
Parts like these are bought on trust in the finish. The shop and the finished cars had to sit close to the catalogue.
End with a person
Questions about fit and stock are best answered in a chat. The last step had to reach a named person, with contacts for buyers in Penang, Kuala Lumpur and Johor Bahru.
The concept
The first question is: what do you drive?
Walk up to any parts counter and that is what you will be asked before anything else. So this site asks it too, before the company story and before any product. Each press narrows the shelf: make, model, part type, one part. By the end, a catalogue of more than 900 parts has become the few that matter to this owner.
The route through the page
-
1
Make
Twelve tiles on the first screen.
-
2
Model
Chassis codes open under the tile.
-
3
Part type
Filter by type down the side.
-
4
One part
Name, price, description, button.
-
5
Proof
Finished cars from Instagram.
-
6
Chat
Named people on WhatsApp.
Where the look came from
The parts counter
The order of the site comes from how a parts sale really starts. The car first, the part second, the price third.
The chassis code
Owners speak in codes: G20, FL5, W205. The model lists keep those codes, so the site sounds like someone who knows these cars.
The shop front
The first screen is a photo of a BMW at the shop, with the Alpha Carbons sign above it. A dark shade and the amber of the logo are laid over that photo.
The design
Black and amber, straight from the logo.
The logo gave the colours. The rest of the site stays white, so the eye goes to the car photos and the parts.
Colour
- White
#FFFFFFReading sections and product pages - Black
#000000The shade over the first screen photo - Charcoal
#1A1A1AThe footer - Amber
#FFC451Tile icons, the name and section lines - Deep amber
#EEB644Buy Now and WhatsApp buttons - Grey
#444444Reading text
Amber marks the tiles, the buttons and the start of each section. Black and white do the rest.
Type
ALPHA CARBONS
Zen Dots · The name on the first screenBMW G20 KB Design Carbon Rear Diffuser
Oswald · Model and part namesEnthusiasts are able to purchase high-quality, in-stock, great-fitting carbon fiber products.
Poppins · Reading textTwelve tiles
The tiles are the front door of the site. Ten are car makes, and GT Wing and Carbon Fiber Steering sit beside them. Thin outlines let the car show through, and under the pointer a tile’s outline and label turn amber.
Detail
Press a make and its models open in a white list with a thick amber frame. The row under the pointer fills with amber, so you always know where you are in a long list.
Rhythm
- Pick your car
- About
- Services
- Portfolio
- Contact
- Footer
A dark first screen and a dark footer hold the page between them. The white sections in the middle stay out of the way. The bar above is the real home page, to scale.
Walkthrough
From your car to a WhatsApp chat, step by step.
Follow the path an owner takes through the site. Each highlight marks the part of the screen that matters at that step, and the note gives the reason.
The first screen asks one question
The shop front fills the screen, with the name, the line “Build Your Dream Car Now” and twelve tiles: ten car makes, plus GT Wing and Carbon Fiber Steering.
Why An owner may not know which part they want yet, but they always know their car. One press and they are in the right part of the catalogue.
The list speaks in chassis codes
Press BMW and twelve models open under the tile, from the F10 M5 to the G87 M2. Mercedes-Benz opens eleven and Porsche nine.
Why Owners know their cars by these codes. G20 and G20 LCI are separate rows, so nobody has to guess which one applies.
Then the shelf narrows by type
Each model has its own page. The BMW G20 page lists 16 part types down the side, from body kits to tail lights, beside a grid of photos, names and prices.
Why The list follows the car. A BMW G22 & G26 page shows 4 types, so an owner never reads through parts their car does not have.
One part, one price, one button
The part page gives the name, the price, a short description and a single Buy Now button.
Why Buy Now opens WhatsApp with a message already written, naming the part, its price and the link. The shop sees straight away what the buyer is looking at.
Real parts in a lit cabinet
Half of the About section goes to a photo of a lit display cabinet, with headlamps, tail lights and steering wheels on its shelves.
Why Anyone can list parts on a screen. A photo of the parts lined up on shelves tells the buyer there is a real place behind the links.
Finished cars, straight from Instagram
Three Instagram posts fill the Portfolio section: a Lamborghini Huracán, a Mercedes G63 and a Honda Civic FL5, each with its own caption.
Why A part in a photo is one thing. A finished car shows what those parts add up to, in the shop’s own posts.
Five names, not one inbox
The contact section gives the Perai address, an email and five WhatsApp buttons by first name. One is marked KL and two are marked JB.
Why A buyer in Johor Bahru can message someone in Johor Bahru. A first name on a button also makes the first message easier to send.
Twelve ways inTwelve BMW modelsFilter By TypeBuy Now opens WhatsApp
Parts on real shelvesThree finished carsFive names on WhatsApp
On the phone
The same questions, one thumb.
The order stays the same on a phone: car first, then parts. The layout changes so that each step suits a thumb.
- The twelve tiles stack into one column
- The model list opens right under the tile you pressed
- Parts sit two to a row, so more fit on the screen
Built in
Behind the catalogue.
The catalogue is what visitors notice. These details are what make it work for the shop.
Messages written for you
Buy Now fills in a WhatsApp message with the part name, the price and a link to the page.
A page for every model
Each model has its own address, so a link to the BMW G20 page can be sent on its own.
Built for search
The page title and description name Penang and makes such as BMW, Audi and Mercedes-Benz, and the site describes the business in a format Google can read.
Photos that carry the name
Product photos carry the AC logo, so they still point back to the shop when they are shared.
Easy to find
The contact section has a Google Map of the Perai address, with a link to open it in Maps.
Beyond Penang
Contacts are marked KL and JB, so buyers in those cities can see there is someone near 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
How owners look for parts, how the range divides by car, and how a sale really starts, which is in a chat.
- 2
Content creation
The range sorted by make, model and part type, in the chassis codes owners already use.
- 3
Design + build
Black and amber from the logo came first, then the twelve tiles, the model lists and the part pages, for phone and desktop.
- 4
SEO + launch
Page titles, search data and an address for every model set up, then launch and support.
Questions
About this project.
Selling a big range? Tell Ricky about your business on WhatsApp at +6011-1142 1029.
What did Potadot do for Alpha Carbons?
We worked out the concept, organised the content, designed the pages and built the site in English, with a page for each car model, search setup and WhatsApp buying.
Why ask for the car before showing any parts?
A part only matters if it suits the car. With more than 900 parts listed, starting from the make and model puts a buyer in front of a short list that is relevant to them.
Why does Buy Now go to WhatsApp and not a cart?
Buy Now opens a chat with the part, price and link already written. The buyer can ask about fit straight away, and the shop knows exactly which part they mean.
Can you build something like this for my business?
Yes. We would start from how your own buyers choose, which may not be by car at all, so yours would look different. Tell us how your range is organised and we will show you how we would approach it.
