Ir al contenido
03 — PRODUCTO DIGITAL ADAPTATIVO / AUTOMOCIÓN

Nexlane

Producto digital adaptativo · Automoción

Una tienda que se adapta, no un catálogo

  • FRONTEND
  • BACKEND
  • DATABASE
  • UX
  • CLOUD
Visita il sito
La primera pantalla de Nexlane: la pregunta en lugar del catálogo

El problema

Quien no es del oficio posee un objeto complejo sin tener las herramientas para entenderlo.

Quien no es del oficio posee un objeto complejo sin tener las herramientas para entenderlo. La información existe, pero está escrita para quien ya sabe: manuales técnicos, códigos, foros. El resultado es que las decisiones sobre el coche se toman por confianza o por miedo, nunca por comprensión.

Cómo funciona

Dar la vuelta al punto de partida. No un catálogo que hay que buscar, sino un recorrido que parte de cómo la persona usa el coche y de qué le pasa de verdad, y que por el camino le explica lo que está eligiendo.

Perfil de usoRecorrido guiadoFrontera de datosCatálogoSelecciónGaraje

Qué he construido

  • FRONTEND
  • BACKEND
  • DATABASE
  • UX
  • CLOUD

Un recorrido guiado que parte del perfil de uso y llega a la configuración, en vez de partir de las categorías de producto.

Un garaje personal donde registrar los propios vehículos y recuperar su estado.

Kits temáticos construidos sobre situaciones reales, personalizables pieza a pieza.

Registro, acceso, recuperación de contraseña y traspaso del trabajo hecho como invitado a la cuenta recién creada.

Una frontera de datos que permite sustituir el origen del catálogo sin tocar las páginas.

Un design system con tokens medidos y comprobados en pantalla, no elegidos a ojo.

El producto
La primera pantalla de Nexlane: la pregunta en lugar del catálogo
La primera pantalla de Nexlane: la pregunta en lugar del catálogo
La selección adaptativa: al cambiar de perfil cambian zonas, prioridades y kits
La selección adaptativa: al cambiar de perfil cambian zonas, prioridades y kits
El configurador: una pregunta por pantalla, y las zonas del coche que se encienden
El configurador: una pregunta por pantalla, y las zonas del coche que se encienden
Un kit, con las zonas que toca y los problemas que resuelve
Un kit, con las zonas que toca y los problemas que resuelve
Nexlane desde el móvil
Nexlane desde el móvil

Arquitectura

Las páginas nunca hablan directamente con la base de datos: pasan por una frontera que expone el catálogo y que tiene dos implementaciones intercambiables, una local y otra remota. Hay una suite de paridad que compara los dos orígenes y que se autocomprueba inyectando fallos conocidos, y un test que inspecciona el paquete producido por la compilación y falla si encuentra un secreto dentro.

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

Las decisiones

Hacer simple algo complejo, sin mentir

Simplificar no quiere decir quitar información: quiere decir ordenarla. Poner delante lo que hace falta para decidir ahora y dejar disponible el resto para quien quiera entender más. Una interfaz que esconde la complejidad en vez de organizarla solo produce decisiones tomadas a ciegas.

Partir del uso, no del catálogo

La estructura sigue la forma en que una persona vive su coche —cómo lo usa, quién se sube, qué le ha pasado— y solo después llega a los componentes. Es el orden inverso al de casi todos los catálogos del sector, y cambia por completo el tipo de elección que el usuario consigue hacer.

  • Recorridos construidos sobre situaciones reales, no sobre categorías de producto.
  • Cada componente acompañado de la explicación de qué hace y cuándo importa.
  • El estado del vehículo como punto de partida, no como ficha técnica final.

Una frontera que se puede comprobar

El catálogo tiene dos orígenes intercambiables. Para que una decisión así tenga sentido hay que poder controlarla: hay una suite que compara los datos de las dos fuentes campo por campo, y que se autocomprueba inyectando tres fallos conocidos y exigiendo encontrarlos los tres. Un test que no falla nunca no está probando nada.

El design system como parte del producto

Colores, tipografía y espaciados son tokens medidos, no elegidos a ojo: cada valor responde a una comprobación hecha en pantalla real, a los tamaños reales. Es el motivo por el que el producto sigue siendo coherente mientras crece, en vez de convertirse en un conjunto de pantallas que vagamente se parecen.

Stack

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

Mi papel

  • Product thinking
  • UX/UI
  • Design system
  • Frontend
  • Backend
  • Diseño de base de datos
  • Tests end-to-end

Product design y desarrollo

Resultado

  • La navegación parte del problema de la persona, no de la estructura del catálogo.
  • El origen de los datos es sustituible sin modificar una sola página.
  • La imagen principal está anclada a la geometría de la fotografía y no provoca saltos de maquetación.

Nexlane está online. Puedes abrirlo ahora.

Visita la web

¿Necesitas algo parecido? Cuéntamelo: empezamos desde donde estás ahora.

Creemos un proyecto
Qué he construido aquí
Proyecto siguiente Anterior · Nexora

Valsusa Serramenti

Experiencia web · Herramienta de presupuestos

La web que trae al cliente y la herramienta que digitaliza el trabajo de detrás