Electric mobility2026EN
NOIR X1
Eleven sections, one machine, and a configurator that has to name a price — on a page whose entire argument is restraint.
- Website
- Product
- Configurator
- Editorial
- Industry
- Electric mobility
- Engagement
- 9 weeks
- Team
- 1 designer · 2 engineers
- Platforms
- Marketing site · Interactive configurator · Specification surfaces
01
Challenge
NOIR's entire claim is subtraction: every part that did not earn its place was removed rather than styled. A site for that product cannot sell with ornament, because the ornament would contradict the thing it is selling.
The commercial problem sits underneath it. Electric bicycles are bought on three numbers — range, power, weight — and every competitor prints the same three. Repeating them proves nothing; the site had to make them mean something, and then quote a real price without turning into a shop.
- Product
- 140 km · 750 W · 19.8 kg
- Range
- X1 · X1 S · X1 Carbon, €3,490 – €5,490
- Core difficulty
- Restraint that still has to sell
02
Solution
The page is eleven numbered sections read as one continuous argument, each doing exactly one job: what the object is for, what was removed, what the numbers mean, how it behaves, what it costs.
Specifications are presented one at a time rather than as a table. Choosing 'range' fills the screen with 140 km and the conditions it was measured under — mixed urban loop, Tour mode, 75 kg rider, 18 °C. A number with its conditions attached is a different claim from a number on its own.
The configurator is four decisions — model, finish, accessories, extras — with the total recalculating as each is made, and it ends in a configuration request rather than a checkout, because this is a bike that gets delivered and assembled per city.
- Narrative
- Eleven sections, one argument
- Specifications
- One metric at a time, with its conditions
- Configurator
- Four decisions, live total
03
Architecture
- L0Next.js App RouterStatic shell
- L1Section islandsScroll-linkedConfiguratorFour steps
- L2Product modelModels, finishes, extrasPricing moduleRunning total
- L3Configuration requestServer action
- L4CRM / emailExternalAnalyticsExternal
Connections (8)
- Next.js App Router → Section islands
- Next.js App Router → Configurator
- Section islands → Product model
- Configurator → Product model
- Configurator → Pricing module · recalculate
- Configurator → Configuration request · with the build attached
- Configuration request → CRM / email
- Next.js App Router → Analytics
04
UX
The reading order is the buying order: what this is for, what was taken out, what the numbers mean, how it rides, what it costs. Someone who only wants the price can reach the configurator from the header in one click and skip the argument entirely.
Every interactive block — the specification switcher, the riding modes, the configurator — has a readable static state, so the whole page still makes its case without JavaScript and under reduced motion.
- Reading order
- Purpose → subtraction → numbers → price
- Shortcut
- Configurator reachable from the header
- Fallback
- Every island degrades to static text
05
UI
Near-monochrome, with a single copper accent that appears once per section — on the section number and nowhere else. When the accent is that scarce, it works as punctuation instead of decoration.
Display type is set very large and very tight, and every measurement uses tabular figures with the unit typeset smaller alongside it, so 140 KM and 19.8 KG align down a column without the units competing with the numbers.
06
Development
Prices exist once. The models section and the configurator both read the same pricing module, so a surcharge cannot be right in one place and stale in the other.
Twenty viewports of scroll-linked motion run off a single shared observer rather than per-section listeners, and the entire choreography collapses to instant state changes under prefers-reduced-motion.
The bicycle is vector rather than photography — it stays sharp at any density, recolours with the finish selection, and costs a fraction of the weight a hero photograph would.
07
What it does
Eleven-section narrative
Philosophy, object, technology, specifications, modes, app, performance, sustainability, models, gallery, configurator.
Specification switcher
Range, power, weight, top speed and charge shown one at a time, each with its measurement conditions.
Riding modes
City, Tour and Sport compared on range, power, acceleration and assisted top speed.
Model comparison
X1, X1 S and X1 Carbon with three finishes and per-model figures.
Four-step configurator
Model, finish, accessories and range extender, with the total updating as you decide.
Connected-ride section
Dashboard, ride statistics, navigation and bike settings shown as the app surfaces them.
Sustainability facts
91% drive efficiency, 1,200 cycles to 80% capacity, single-material recycling streams.
Configuration request
The finished build submitted through a server action rather than a cart.
08
Integrations & stack
Integrations
- Configuration request routing
- Email notifications
- Analytics
Frontend
- Next.js
- React
- TypeScript
- Tailwind CSS
- Motion
Platform
- Static generation
- Server actions
- Vercel
09
Where it landed
- 11
- Sections
- One at a time
- Specifications
- On the page
- Pricing
- Vector
- Hero imagery
One argument, not a brochure
Each with its measurement conditions
From €3,490, VAT included
Recolours with the finish, weighs nothing
A product page that practises what the product claims. Nothing on it is decoration, and the price is reached by argument rather than by a button.
Every build is designed for the phone as its own experience, not as a narrowed desktop layout.
Got a product that should exist by now?Tell us about it.
Describe what has to change in your business. We will work out what that actually takes — including when it takes less than you think.