Skip to content
Work11About
CVDownload CVInstagramInstagramXXLinkedInAre.naweb.finbar
FINBARSTUDIO
AUS/BNE AUS/BNE
ENG/LON 
Join my mailing list
Hiring or have a project?finbar@finbar.studio+44 7876 492551
Get in touch © 2026 finbarstudio© 2026 finbarstudioPrivacy policyTerms
FINBARSTUDIO

Hiring or have a project?

Email is quickest. I read everything.

finbar@finbar.studio+44 7876 492551London, and around
InstagramLinkedInXAre.na

Rennen Plus

Visit live site
Web Design & DevelopmentProduct Catalogue2026

The car is the front door

Rennen Plus is the parts arm of Rennen Motorsport, a Porsche workshop in Adelaide. It represents Fabspeed and TracTive in Australia, runs TECHART Australia, and carries PermaTUNE ignition and its Rennen ITB throttle bodies, built with JSR Engineering, for the air-cooled cars. Before this build all of that lived on an old Shopify store, in supplier PDFs and in Mason's quoting spreadsheet.

A customer with a 997 could not tell what fitted, what it would cost landed in Australia, or who would fit it. The business is not a shop either. Every sale ends in a phone call, because a person confirms fitment before anything ships.

So the site has one job, the job a shop does badly: get someone from "I have this car" to "these are my options and roughly what they cost" without a form or a login, then hand them to the team. We agreed one rule on day one. You pick the car first, and the site never shows a part on a car it does not fit.

The finder, home to the 997.1 Carrera in four hops: Porsche, 911, 997, the car.
The Rennen Plus finder: a grid of twenty-one car-maker badges.
Twenty-one makes. The finder starts with a badge, not a search box.
The all-cars view: twenty-five isolated car thumbnails in a grid.
Or all 228 cars on one baseline, 25 to a page.
The head of the 997.1 car page: thumbnail, name, intro and a did-you-know card.
A car page opens with the car's own thumbnail as the page mark and a fact an owner might not know.

Every car, isolated

The catalogue covers 228 cars across 21 makes, from the 1976 911 SC to the current Taycan, plus the Ferrari, McLaren, BMW and Corvette models Fabspeed serves. Each one needed a thumbnail that read as the same object as its neighbours, and there was no press kit for that.

Every image went through the same steps. Anything under HD was upscaled four times first. Backgrounds came off with rembg where a shadow was baked into the source, because it takes the shadow with it, and with a plain fuzz cut on clean studio renders. Every car faces right, mirrored where the source faced left, gets a soft ellipse only where it had no ground contact, and lands on one 1200 by 480 canvas so a Cayenne and a Boxster sit on the same line at the same scale. The grid below is built from the site's own files.

The search bar over the top understands how owners talk, through 111 aliases taken from real product titles. "992", "c8 fab" and "997 exhaust" all resolve, a one-letter typo still lands, and "c8" offers the Corvette and the Audi RS6 and RS7, because all of them use that code. Searches that find nothing are logged, so the alias list grows from real customers.

Porsche 911 Carrera, 997.1Porsche 911 Carrera, 997.1
Porsche 911 GT3, 992Porsche 911 GT3, 992
Porsche 911 Turbo, 930Porsche 911 Turbo, 930
Ferrari 488 PistaFerrari 488 Pista
McLaren 720SMcLaren 720S
Corvette Stingray, C8Corvette Stingray, C8
Lamborghini HuracánLamborghini Huracán
BMW M3 / M4, G80BMW M3 / M4, G80
Porsche 911 Carrera, 964Porsche 911 Carrera, 964
Porsche 718 Cayman GT4 RSPorsche 718 Cayman GT4 RS
Porsche Cayenne S, E3Porsche Cayenne S, E3
Aston Martin V8 VantageAston Martin V8 Vantage
Porsche 911 Turbo, 993Porsche 911 Turbo, 993
Porsche 911 GT3, 991.2Porsche 911 GT3, 991.2
Ferrari 812 SuperfastFerrari 812 Superfast
Audi R8 V10, Typ 4SAudi R8 V10, Typ 4S
Porsche Macan S, 95B.2Porsche Macan S, 95B.2
Maserati GranTurismoMaserati GranTurismo
Lamborghini UrusLamborghini Urus
Porsche Boxster, 986Porsche Boxster, 986
Porsche 911 Turbo S, 992.2Porsche 911 Turbo S, 992.2
Alfa Romeo Giulia QuadrifoglioAlfa Romeo Giulia Quadrifoglio
Bentley Continental GTBentley Continental GT
McLaren GTMcLaren GT
Porsche 911 GT3, 996Porsche 911 GT3, 996
Porsche 911 GT2 RS, 997.2Porsche 911 GT2 RS, 997.2
Ferrari RomaFerrari Roma
BMW M340i, G20BMW M340i, G20
Porsche Panamera, 970Porsche Panamera, 970
Porsche Cayman, 987.1Porsche Cayman, 987.1
Lamborghini GallardoLamborghini Gallardo
Corvette Z06, C8Corvette Z06, C8
Porsche 911 Turbo, 991.1Porsche 911 Turbo, 991.1
Ferrari F355Ferrari F355
Porsche Cayenne Turbo, 955Porsche Cayenne Turbo, 955
McLaren MP4-12CMcLaren MP4-12C
Maserati QuattroporteMaserati Quattroporte
Aston Martin DBSAston Martin DBS
Porsche 718 CaymanPorsche 718 Cayman
Porsche 911 Carrera, 992.1Porsche 911 Carrera, 992.1
Search on the all-cars grid: "c8" narrows to the four Corvettes and the two Audis, "997 exhaust" to the eight 997s with an exhaust count under each.
Six thumbnails at working size. Same treatment whether the source was a press render or a supplier photo.
Six thumbnails at working size. Same treatment whether the source was a press render or a supplier photo.

One card, every part

Every car page and every product page is the same composition, and the data decides what shows. Under the car sit the packages and parts in a fixed order: the Fabspeed package first, then the rest of Fabspeed, then TECHART, with TracTive suspension alongside and, on the air-cooled cars, PermaTUNE and Rennen ITB.

A package card lists what is in it and an estimated price. A TracTive card goes dark, because suspension is quoted on a consult. A product page is that same card with its options lifted above it, so a customer only ever learns one layout.

About 2,500 parts sit underneath: 1,895 Fabspeed products with fitment taken word for word from Fabspeed's own listings, 514 TECHART parts with their finishes and components, 24 TracTive suspension kits across 67 cars, 50 PermaTUNE parts and 27 Rennen ITB kits. Each carries its own fitment line, specs, gallery and a set of questions written for that part.

The Fabspeed package for the 997.1: five parts, one estimated price, one consult button.
The Fabspeed package for the 997.1: five parts, one estimated price, one consult button.
TracTive cards go dark. Suspension is quoted on a call, so the card says so.
TracTive cards go dark. Suspension is quoted on a call, so the card says so.
A product page: the car row, the brand, the name, and the options above the card.
A product page: the car row, the brand, the name, and the options above the card.

Priced live, in three finishes

Fabspeed lists in US dollars from Pennsylvania. Mason's old process was a spreadsheet: supplier retail, exchange rate, freight by weight, duty, clearance, GST, margin, repeated by hand for each quote.

That chain is now a pricing engine in the build. It takes the supplier's current retail price, adds freight from the part's shipping weight and the delivery zone, then duty, clearance and GST, converts once at the live USD to AUD rate, and adds the margin. Packages round up to the nearest five dollars; parts show the exact figure. It was tested line by line against Mason's own calculator until the two agreed to the dollar on the same order.

So the price moves when the customer changes an option. The Supercup for the 997.1 reads $4,082.30 delivered with polished stainless tips and $4,239.20 in carbon fibre. Pick a finish and the gallery leads with a live 3D swatch of it, a procedural material that weighs nothing. Where a supplier price is unclear the site shows the dearer figure, so a customer is only ever surprised downward on the call.

Polished stainless, $4,082.30 delivered.
Polished stainless, $4,082.30 delivered.
Satin black.
Satin black.
Carbon fibre, $4,239.20. The 3D swatch shows the weave before anyone asks.
Carbon fibre, $4,239.20. The 3D swatch shows the weave before anyone asks.

Look closer

Switch a finish and the swatch, its label and the price all move together. Every product gallery opens full screen too: supplier renders, fitted photos and the 3D swatch in one strip, with the keyboard and the arrows moving between them. Around 23,000 images serve from a Cloudflare bucket on the site's own image subdomain rather than from the app, so the pages stay light.

Polished stainless to satin black to carbon fibre. The gallery leads with the 3D swatch and the price moves from $4,082.30 to $4,239.20.
Zoom opens the gallery full screen, Next steps through three photos, Close returns to the card.

Built for a phone first

Rennen Plus advertises on Meta, so the first screen most customers see is a phone. The mobile site was designed as its own thing rather than a squeezed desktop: two fonts, six text sizes on an 8px rhythm, four spacing values, two radii, a small ink palette. Every control is at least 44px tall and hover styles only apply to a real pointer, so nothing sticks under a thumb.

The tokens follow the open-source Porsche Design System: its type scale, spacing steps, radii and colour roles, applied as an exploration theme while the client decides on the long-term face of the brand. One block deleted and the whole site falls back to the original Bebas and Barlow pairing without touching a component.

Home. The film, the five marks, the search.
Home. The film, the five marks, the search.
The finder.
The finder.
Search: "997 exhaust".
Search: "997 exhaust".
A car page.
A car page.
A product page, top to bottom.
The dealer map.
The dealer map.
The menu: Brands opens to the five tiles, Find your car to the finder.
The event page.
The event page.

Ask, or book

Every consult button on the site, inline link or card, opens the same panel with the car and the part already filled in. An assistant grounded in the same catalogue data as the pages, Gemini Flash Lite with fallbacks behind it, answers fitment questions in the site's own voice and offers the consult when it makes sense.

In the first weeks after launch Mason has been sending phone customers to the site for exact pricing, five so far, because they can look at one catalogue while he talks instead of three supplier sites.

Ask Rennen Plus: the question goes in, the answer comes back with the car, the part and a consult card.
The consult panel, pre-filled from the page it was opened on.
The consult panel, pre-filled from the page it was opened on.

Everything around the parts

A parts catalogue on its own does not earn a call. The rest of the site makes the call feel safe: a dealer finder with 45 installers on a map, a customer builds page with nine real cars and the exact parts on each, a directory page for each of the five brands, and one side menu on every device with the current event at the top.

The build ran to one date. Rennen Plus had a stand at the Porsche Club of Queensland Concours on 13 September and needed the site live before it, with an event page and a prize draw. Work started on 6 August. The site went live on 4 September, the event page followed on the 9th, and the full catalogue was on production by the 12th, 1,136 commits in, with the event the first thing in the menu.

Forty-five dealers and installers. Type a postcode and the list and the pins follow.
Customer builds. Each car links back to the parts on it.
Customer builds. Each car links back to the parts on it.
The event page the whole build ran to.
The event page the whole build ran to.
The Fabspeed directory, one of five brand pages.
The Fabspeed directory, one of five brand pages.
One menu on every device, with sub-panels for cars, brands and the ecosystem.
One menu on every device, with sub-panels for cars, brands and the ecosystem.
The 997.1 car page further down: TracTive's own section under the Fabspeed package.
The 997.1 car page further down: TracTive's own section under the Fabspeed package.

Outcomes

Live in four weeks, complete in five and a half: 6 August to 12 September 2026

228
21 makes
Cars
2,500
five brands
Parts
6,044
built static
Pages
23,134
on its own CDN
Images
1,136
37 days
Commits

ROLE

Design, front end, data pipelines, imagery, deployment.

PROBLEM

An Australian performance-parts business with five partner brands, thousands of parts and no way for a customer to find what fits their car, priced in Australian dollars, on a phone.

OUTCOME

A car-first catalogue of about 2,500 parts across 228 cars, priced live in AUD, live in four weeks and complete in five and a half, on the stand at the Porsche Club of Queensland Concours.

SKILLS

Web DesignNext.js DevelopmentDesign SystemsData PipelinesImage ProductionCopywritingSEO

LIVE SITE

rennenplus.com.au

OPEN FOR WORK

finbar@finbar.studio
Back to Work