Vai al contenuto
03 — ADAPTIVE DIGITAL PRODUCT / AUTOMOTIVE

Nexlane

Adaptive digital product · Automotive

Un negozio che si adatta, non un catalogo

  • FRONTEND
  • BACKEND
  • DATABASE
  • UX
  • CLOUD
Visita il sito
La prima schermata di Nexlane: la domanda al posto del catalogo

Il problema

Chi non è del mestiere possiede un oggetto complesso senza avere gli strumenti per capirlo.

Chi non è del mestiere possiede un oggetto complesso senza avere gli strumenti per capirlo. Le informazioni esistono, ma sono scritte per chi sa già: manuali tecnici, codici, forum. Il risultato è che le decisioni sull’auto si prendono per fiducia o per paura, mai per comprensione.

Come funziona

Ribaltare il punto di partenza. Non un catalogo da cercare, ma un percorso che parte da come la persona usa l’auto e da cosa le succede davvero — e che lungo la strada le spiega ciò che sta scegliendo.

Profilo d’usoPercorso guidatoConfine datiCatalogoSelezioneGarage

Cosa abbiamo costruito

  • FRONTEND
  • BACKEND
  • DATABASE
  • UX
  • CLOUD

Un percorso guidato che parte dal profilo d’uso e arriva alla configurazione, invece di partire dalle categorie merceologiche.

Un garage personale in cui registrare i propri veicoli e ritrovarne lo stato.

Kit tematici costruiti su situazioni reali, personalizzabili voce per voce.

Registrazione, accesso, recupero password e travaso del lavoro fatto da ospite verso l’account appena creato.

Un confine dati che permette di sostituire l’origine del catalogo senza toccare le pagine.

Un design system con token misurati e verificati a schermo, non scelti a occhio.

Il prodotto
La prima schermata di Nexlane: la domanda al posto del catalogo
La prima schermata di Nexlane: la domanda al posto del catalogo
La selezione adattiva: cambiando profilo cambiano zone, priorità e kit
La selezione adattiva: cambiando profilo cambiano zone, priorità e kit
Il configuratore: una domanda per schermata, e le zone dell’auto che si accendono
Il configuratore: una domanda per schermata, e le zone dell’auto che si accendono
Un kit, con le zone che tocca e i problemi che risolve
Un kit, con le zone che tocca e i problemi che risolve
Nexlane da telefono
Nexlane da telefono
Il percorso da telefono, dove comincia la maggior parte delle visite
Il percorso da telefono, dove comincia la maggior parte delle visite
Un kit con le zone dell’auto che tocca e i problemi che risolve
Un kit con le zone dell’auto che tocca e i problemi che risolve

Architettura

Le pagine non parlano mai direttamente con il database: passano da un confine che espone il catalogo e che ha due implementazioni intercambiabili, una locale e una remota. Ci sono una suite di parità che confronta le due origini e si auto-verifica iniettando guasti noti, e un test che ispeziona il pacchetto prodotto dalla compilazione e fallisce se ci trova un segreto.

  1. FRONTENDciò che si vede
  2. BACKENDciò che decide
  3. DATABASEciò che ricorda
  4. UXciò che rende comprensibile
  5. CLOUDciò che regge

Le decisioni

Rendere semplice qualcosa di complesso, senza mentire

Semplificare non vuol dire togliere informazione: vuol dire ordinarla. Mettere davanti quello che serve per decidere adesso e tenere disponibile il resto per chi vuole capire di più. Un’interfaccia che nasconde la complessità invece di organizzarla produce solo decisioni prese al buio.

Partire dall’uso, non dal catalogo

La struttura segue il modo in cui una persona vive la sua auto — come la usa, chi ci sale, cosa le è successo — e solo dopo arriva ai componenti. È l’ordine inverso rispetto a quasi tutti i cataloghi del settore, e cambia completamente il tipo di scelta che l’utente riesce a fare.

  • Percorsi costruiti su situazioni reali, non su categorie merceologiche.
  • Ogni componente accompagnato dalla spiegazione di cosa fa e quando conta.
  • Lo stato del veicolo come punto di partenza, non come scheda tecnica finale.

Un confine che si può verificare

Il catalogo ha due origini intercambiabili. Perché una scelta del genere abbia senso serve poterla controllare: c’è una suite che confronta i dati delle due sorgenti campo per campo, e che si auto-verifica iniettando tre guasti noti e pretendendo di ritrovarli tutti e tre. Un test che non fallisce mai non sta testando niente.

Il design system come parte del prodotto

Colori, tipografia e spaziature sono token misurati, non scelti a occhio: ogni valore risponde a una verifica fatta a schermo reale, alle dimensioni reali. È il motivo per cui il prodotto resta coerente mentre cresce, invece di diventare un insieme di schermate che si somigliano vagamente.

Stack

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Supabase
  • PostgreSQL
  • Row Level Security
  • Playwright
  • Design system

Il nostro ruolo

  • Product thinking
  • UX/UI
  • Design system
  • Frontend
  • Backend
  • Progettazione database
  • Test end-to-end

Product design & sviluppo

Risultato

  • La navigazione parte dal problema della persona, non dalla struttura del catalogo.
  • L’origine dei dati è sostituibile senza modificare una sola pagina.
  • L’immagine principale è ancorata alla geometria della fotografia e non provoca salti di layout.

Nexlane è online. Puoi aprirlo adesso.

Visita il sito

Ti serve qualcosa di simile? Raccontacelo: partiamo da dove sei adesso.

Creiamo un progetto
Progetto successivo Precedente · Nexora

Valsusa Serramenti

Web experience · Business tool · Quote automation

Il sito che porta il cliente e lo strumento che digitalizza il lavoro dietro