Project

Monte

Monte

My role

UI/UX Designer

UI/UX Designer

Date

2026

2026

Please use desktop for better experience

Monte — automotive
e-commerce

Monte — automotive
e-commerce

About product

About product

Monte is an own-brand online store for exterior car tuning with customisable parts: spoilers, body kits, splitters and diffusers.

Monte is an own-brand online store for exterior car tuning with customisable parts: spoilers, body kits, splitters and diffusers.

Context

Context

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 does not support the two key scenarios, vehicle-first selection and part customisation. The product was designed from scratch around those scenarios.

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 does not support the two key scenarios, vehicle-first selection and part customisation. The product was designed from scratch around those scenarios.

Reasons

Reasons

Vehicle-first selection has long been standard in spare parts, yet almost nobody uses it in exterior tuning

Vehicle-first selection has long been standard in spare parts, yet almost nobody uses it in exterior tuning

Everywhere the choice of look comes down to a ready-made option from a list: you take what has already been produced instead of putting together your own combination

Everywhere the choice of look comes down to a ready-made option from a list: you take what has already been produced instead of putting together your own combination

Goals

Goals

Take fitment doubt to zero right in the results, so the buyer never checks it in a second source

Take fitment doubt to zero right in the results, so the buyer never checks it in a second source

Cut returns caused by parts not fitting, because both look and fitment are settled before payment

Cut returns caused by parts not fitting, because both look and fitment are settled before payment

You can swap

Product tasks

Product tasks

Competitive analysis and benchmarking of confidence mechanisms (Maxton, Autodoc, iParts vs FCP Euro, ECS Tuning, Priority Tire)

Competitive analysis and benchmarking of confidence mechanisms (Maxton, Autodoc, iParts vs FCP Euro, ECS Tuning, Priority Tire)

Personas and Jobs To Be Done for two buyer types

Personas and Jobs To Be Done for two buyer types

Customer Journey Map focused on pains and drop-off points

Customer Journey Map focused on pains and drop-off points

User stories and edge cases for non-standard scenarios

User stories and edge cases for non-standard scenarios

Information architecture and the purchase user flow

Information architecture and the purchase user flow

MVP feature prioritisation and cutting what falls out of scope

MVP feature prioritisation and cutting what falls out of scope

Designing the key scenarios: vehicle-first selection, fitment check, part customisation

Designing the key scenarios: vehicle-first selection, fitment check, part customisation

Design system built on two-tier tokens (base → semantic roles)

Design system built on two-tier tokens (base → semantic roles)

Prototyping and micro-interactions

Prototyping and micro-interactions

Design review and handoff documentation for development

Design review and handoff documentation for development

How success is measured

How success is measured

Share of sessions that reach vehicle selection

Share of sessions that reach vehicle selection

Catalogue → product → cart conversion

Catalogue → product → cart conversion

Orders assembled in the configurator

Orders assembled in the configurator

Carts abandoned after a variant change

Carts abandoned after a variant change

Returns caused by parts not fitting

Returns caused by parts not fitting

Research, user flow, backlog

Research, user flow, backlog

Built the product structure and described features based
on research and the first interviews

Built the product structure and described features based
on research and the first interviews

Designed user flows for the key scenarios, from vehicle-first selection to checkout

Designed user flows for the key scenarios, from vehicle-first selection to checkout

Set up the backlog split into MVP, nice to have and out of scope

Set up the backlog split into MVP, nice to have and out of scope

Shaped the design process: research files as the source of truth → token-based design system

Shaped the design process: research files as the source of truth → token-based design system

No wireframes

No wireframes

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.

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.

Advantages

A realistic screen can be put in front of people immediately. Fewer iterations at the visual design stage. You see right away what will be hard to build.

Disadvantages

Slower at the start. The line between "we are testing structure" and "we are approving design" blurs. Focus drifts from logic to looks.

Hypotheses, the user pains they close, and the design decisions.

Hypotheses, the user pains they close, and the design decisions.

Vehicle selection as the entry point

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.

Smart search

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.

No false expectations

A single shot of a part on a white background does not answer the main question: how will this look on my car. So 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.

Part configurator

Users want something of their own and want to see it straight away. Material, finish and colour are picked right on the product page, and the preview updates in place together with the price.

Changing the configuration straight from the cart

A user in the cart realises they picked the wrong colour. Normally that is five steps: back to the catalogue, find it, open it, re-select, add again. We added a one-click jump into the configurator.

Coming back

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 mode

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.

Design system

Design system

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.

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.

Final design

Final design

Configurator

Configurator

A separate page where the user builds the part their way. The 3D model sits on the left, with material, coating and color choices next to it on the right. The model redraws instantly and the price updates with it. Unavailable combinations stay visible but dimmed.

A separate page where the user builds the part their way. The 3D model sits on the left, with material, coating and color choices next to it on the right. The model redraws instantly and the price updates with it. Unavailable combinations stay visible but dimmed.

Catalog and product page

In the catalog the user browses parts that fit their car: filters on the left, product grid on the right, with price and availability right on the card. Opening a product gives them a gallery on the left showing the part on its own and fitted to a real car, with price, the buy button and a link into the configurator on the right. Below are specs, installation, the return policy and reviews filtered by car model.

In the catalog the user browses parts that fit their car: filters on the left, product grid on the right, with price and availability right on the card. Opening a product gives them a gallery on the left showing the part on its own and fitted to a real car, with price, the buy button and a link into the configurator on the right. Below are specs, installation, the return policy and reviews filtered by car model.

Cart and checkout

Cart and checkout

The user reviews the order and can jump back into the configurator to change a color from here. Then checkout in three steps: contacts, delivery, payment. Delivery goes home or straight to a partner workshop that fits the part. Guest checkout is available.

The user reviews the order and can jump back into the configurator to change a color from here. Then checkout in three steps: contacts, delivery, payment. Delivery goes home or straight to a partner workshop that fits the part. Guest checkout is available.

Mobile version

Mobile version

You can swap

What I did

What I did

A full cycle: competitor analysis, interviews with buyers, personas and JTBD, a CJM with drop-off points, user stories with edge cases, information architecture and flows, MVP prioritisation, a token-based design system, desktop and mobile, plus handoff documentation for development.

A full cycle: competitor analysis, interviews with buyers, personas and JTBD, a CJM with drop-off points, user stories with edge cases, information architecture and flows, MVP prioritisation, a token-based design system, desktop and mobile, plus handoff documentation for development.

Let’s work together.
Reach out anytime.

Let’s work together
Reach out anytime

Let’s work together
Reach out anytime

Email

cherniiyurii2024@gmail.com