Monte
Monte is an own-brand online store for exterior car tuning with customisable parts: spoilers, body kits, splitters and diffusers. I ran the full cycle — competitor analysis and buyer interviews, personas and JTBD, a CJM with drop-off points, information architecture and flows, MVP prioritisation, a token-based UI kit, desktop and mobile, and handoff documentation for development.
Hold to open image
The brand sold its own exterior tuning line through resellers and marketplaces, with no store of its own. After analysing the EU market and the first buyer interviews it became clear that a template ecommerce platform doesn’t support the two scenarios the category depends on: vehicle-first selection and part customisation. The product was designed from scratch around those scenarios.
Launch the brand’s own sales channel, which so far had only reached buyers through resellers and marketplaces — one where both fitment and appearance are settled before payment, so the order is right the first time.
Four buyer interviews and the journey map split the audience in two, and that split drove most of what followed. The first-timer is buying tuning for the first time, doesn’t know the part names, and is mostly afraid of getting it wrong. The experienced one already knows what they want, often down to the exact article number, and measures the shop by how fast it gets out of the way.
Some buyers start from the car: they know the model and want to see which parts fit it. Others start from the part: they already know its name and want to find it right away. A single entry point only serves half of them.
The first point of contact decides whether the user reaches the catalog at all, so it got the most attention in the project. Entry scenarios differ, and one shared path can’t serve them — so there are two ways to interact with the interface. The first is the vehicle selector: the user goes through the steps of picking a car, and at each one the interface suggests possible combinations, so hitting a dead end is impossible. The second is a familiar search bar that reacts dynamically to what the user types: it suggests options as they type, routes them to the right category, and surfaces special offers.

I skipped the low-fi wireframe stage on purpose. Screen structure was already set by the IA, user flows and job stories, so a wireframe would only redraw finished decisions as grey boxes. AI tools let me run layouts straight in hi-fi.

User pain points, business problems and interviews came together into a set of hypotheses. Each one got a specific design decision. Here are the key ones.
One obvious starting point instead of “click wherever you like”, after which the user never sees parts that will not fit their car. There is nothing to check manually: fitment is built into the results.
Suggestions while typing, saved search history, and tolerance to misspelled names across categories, brands and part types. Recommendations are pulled from what the user has already viewed and bought.
The product gallery puts the part itself next to photos of it fitted on a real car of the same model. The user scrolls and sees the result, not a render — and reviews on the page are filtered to the same model, so the proof comes from owners of the same car.
Users want something of their own and want to see it straight away. The part opens in a configurator of its own: the 3D model on one side, material, coating and colour on the other. Every choice redraws the model and moves the price with it, and combinations that can’t be produced stay visible but dimmed.
A user in the shopping bag realises they picked the wrong colour. Normally that is five steps: back to the catalog, find it, open it, re-select, add again. I made it one — the line opens straight back in the configurator.
A car saved without registration means the second visit does not start from zero. Asking for an account before the first purchase is too early.
Delivery to a partner garage. A separate choice at checkout: home delivery, an address of your own, or straight to a partner service that will fit the part. Saved addresses are carried over into the next order.
A two-layer token model: base → semantic roles. Components are built on variants and roles rather than a separate token for every case, which keeps the system compact as the number of screens grows.

Users want a build of their own, not a factory preset — and want to see it before deciding. The configurator is a page of its own rather than a widget on the product card, because a 3D preview and three sets of options need the room: the model sits on the left, material, coating and colour on the right. Every choice redraws the model and updates the price, and combinations that can’t be produced stay visible but dimmed — so nothing is a surprise at checkout.
In the catalog: filters on the left, results on the right, every one of them already narrowed to the selected car, with price and availability on the card. The product page splits in two — gallery on the left, price, buy button and the way into the configurator on the right — and below it specs, installation, the return policy, and reviews filtered to the same model.

The shopping bag keeps every line editable: quantity, and the colour, which opens the configurator again without losing the order. Checkout runs in three steps — contacts, delivery, payment — and delivery is where the category differs from ordinary retail: home, an address of your own, or straight to a partner workshop that will fit the part.

Hold to open image

Two interviews in, the brief I had been given stopped holding. It assumed one buyer who needed help choosing, and that buyer does exist — but the experienced one, who arrives with an article number, is served badly by the exact same guidance the first-timer needs. Splitting the entry point was less a clever idea than the only honest reading of the research, and it is the decision the whole product now hangs on.
The part I would argue with myself about is the configurator. It is the most expensive thing here to build and to feed — every SKU needs a model, every material needs a texture — and it earns that only if buyers actually assemble something instead of taking the default. That is the first number I would look at, and if it stays low, the honest move is to cut the configurator back to a few categories and spend the effort on fitment photography instead.
Skipping wireframes worked, with a cost I underestimated: once a screen looks finished, feedback arrives about the colour of a button rather than the order of the steps. Next time I would keep the hi-fi speed but state out loud, at the start of every review, which layer is up for discussion.