Xionic Performance
A storefront for a custom exhaust workshop, built so the brand has a home outside the marketplaces: browse by what you ride, then move straight to WhatsApp.
Challenge
The workshop was already selling. It just had nowhere of its own to sell from.
A custom exhaust workshop trading through marketplaces and chat has no surface it controls. Photography, model names, prices and proof of work end up scattered across listings that all look alike, and the brand becomes indistinguishable from every other seller in the category.
The buying decision is awkward to serve there too. Fitment is the first question — will this fit my bike — and it is bike-specific, not product-specific. Custom orders are harder still, because the customer’s reference is an image they want to show someone.
The brief was a home for the brand: one place where the range, the fitment help and the evidence live together, and where the conversation can start.
- Falls shortSelling through marketplacesEvery listing looks like every other listing. The brand cannot be told apart from the seller next to it, and the photography is whatever the template allows.
- Falls shortA social media account aloneIt helps with reach, but it does little for fitment. Nothing there answers "will this fit my Vario" without a message and a wait.
- Falls shortA generic e-commerce themeOrganised by product. The buyer’s first question is about their bike, and a product-first catalogue makes them do the matching.
Screenshot chat asli dari customer yang udah pasang knalpot Xionic. Bukan rekayasa.
Research & framing
Structure, flows & trade-offs
The first choice is the motorcycle you ride.
The first section is not products. It is "choose by what you ride", split into four lanes: automatic (Beat, Vario, Scoopy, NMAX, Aerox), moped (Supra, Jupiter, MX, Revo, Vega), sport (Vixion, CB, CBR, Ninja, R15, GSX), and a custom request lane for people bringing their own reference image. Sorting by bike first answers fitment before the browsing starts.
The rest of the page is ordered as a decision rather than as a brochure: featured models, a before-and-after comparison, messages from customers, reasons to choose the workshop, a gallery of finished work, and how to order.
It is a storefront rather than a shop. Every product route ends in a WhatsApp conversation, because that is where this business already closes — adding a cart would have replaced a working channel with a worse one.
- ChosenBrowse by bike, not by catalogueAutomatic, moped, sport and a custom lane. Fitment is the one fact the buyer is certain about, so it is the first filter.
- ChosenEvery route ends in WhatsAppThat is where this business already closes. Replacing a working channel with a new checkout would add friction.
- ChosenReal chat screenshots instead of testimonialsLabelled as what they are. A reader can weigh a screenshot; a restaged quote has to be taken on faith.
There is a catalogue and a cart, and both end in the same place. Checkout offers online payment or a WhatsApp order, which reads as indecision until you notice what it is doing: the customer who wants to press buy can press buy, and the customer who wants to send a photo of their bike and ask a question first is not forced through a form to do it.
Solution
The experience focuses on two questions: will it fit, and can I trust the workshop?
Category-first browsing. Four entry points by bike type plus a custom lane, so the range is filtered by the one fact the buyer is certain about.
Named models with prices. Street Bass, Racing Look, Custom Fullset and Budget Series, each shown with photography, a price, and a chat-to-order button.
Before and after. A visual comparison of a stock bike against the same bike with the exhaust fitted, which is the thing the customer is actually buying.
Customer messages, labelled as what they are. The section presents screenshots of real chats and says so, rather than restaging them as testimonials — a claim the reader can weigh instead of one they have to accept.
Hesitations answered up front. Free consultation, help checking sizing, a wide custom range, and real product photography are each named as a reason to choose the workshop, because each one corresponds to a specific doubt the buyer already has.
Ordering is published as four numbered steps: open the catalogue, add to the cart, check out or message on WhatsApp, and the order goes into production. For a custom product bought from a workshop rather than a shop, the unknown is not the price, it is what happens after you pay, and four steps is enough to answer it.
The about page carries the workshop’s own account of itself beside a photograph of the fabrication floor. That photograph is doing specific work: for a custom exhaust the buyer is trusting a weld they cannot inspect, and a picture of the place it will be welded is the closest a website gets to letting them look.
Validation & iteration
- 01
- 02
- 03
Outcome
- Live at knalpot.netlify.appchecked 1 September 2026
- Home, catalogue, about and contact, with WhatsApp ordering throughoutchecked 1 September 2026
- Desktop and phone layouts both shippedboth captured for this case study
The workshop has a surface it controls: its own model names, its own photography, its own account of itself, and a route to the conversation that does not pass through anyone else’s marketplace.
What that has produced commercially is the workshop’s to report, not this page’s to claim.
Reflection & limits
The catalogue route currently returns no products to a signed-out visitor — the filter renders, the grid is empty. For a storefront whose entire argument is "browse by what you ride", that is the most expensive thing on the site to have broken, and it is invisible from the homepage where the featured models are hard-coded.
It is also the clearest illustration of a real risk in this kind of build: the page that demonstrates the idea and the page that carries the inventory are not the same page, and only one of them gets looked at.