KCX Interactive Pages
Live product data becomes practical sales tools for shampoos and treatments.
- Internal product
- Live
- 2026
- Product definition, interaction design and full-stack development
- Solo builder with marketing and sales stakeholders
- Built as part of my role at KCX by GETRAC
- Live cost, dilution, payback and comparison views for sales conversations
- 15 shampoo products and 4 treatment products represented as structured data
- One component suite shared by web and offline desktop runtimes
- Figma · React · Next.js · TypeScript · Electron · PostgreSQL · ECharts
Context
KCX sells professional car-care products through three brands. The sales conversation is often about more than the product itself: a rep needs to explain dilution, cost per use, expected savings and the difference between several products while standing in front of a customer.
Problem
A static catalogue could describe the range, but it could not calculate a customer's real use case in the room. The same product data also had to work in two environments: a web application for connected reps and an offline desktop application for sites with unreliable connectivity.
What I made
Interactive Pages is a shared component suite for two product families. It combines structured product data, calculators, comparison views and presentation-ready screens while keeping the navigation and asset layers portable between web and desktop.
Traitements Experts
The treatment page turns product information into a guided conversation. A rep can configure usage parameters, compare the result across products and reach a summary that can be exported for the customer.
Shampoings
The shampoo page brings fifteen products into one comparison model. It supports dilution, flow rate, price per litre and washes per month, then exposes the trade-offs through cost, annual economy and positioning views.
Key decisions
One component suite, two runtimes
The shared package keeps product logic and interface behaviour in one place. A small router and asset boundary lets the same screens run in Next.js on the web and in an Electron desktop application without duplicating the product experience.
Calculators over static claims
Cost per use, annual spend and payback are derived from the customer's own parameters. The interface makes the reasoning visible instead of presenting a single marketing number detached from the working conditions.
Structured products behind the interface
Product families, dilution rates, pH, application methods and comparison dimensions are data rather than hand-written cards. That keeps the catalogue, calculators and charts aligned when the range changes.
Impact
The same product model now supports fifteen shampoo products and four treatments across connected and offline sales contexts. Reps can move from selection to calculation, comparison and a customer-ready summary without switching to a spreadsheet or a PDF.
Limitations and next steps
The next step is to keep the shared package aligned as product ranges evolve, while making the saved configuration and exported summary flows more observable in day-to-day use.