Configurador de Infraestructura Puntonet.
Una herramienta de ventas interactiva en 3D que convierte un catálogo complejo de servicios de conectividad, nube, ciberseguridad y colaboración en algo que el cliente puede ver, tocar y entender en una sola reunión.
> Probar el prototipo (se abre en una pestaña nueva)- Cliente
- Puntonet, con MATTE
- Mi rol
- Desarrollo front-end y 3D, diseño de interacción, empaquetado para escritorio y tablet
- Duración
- Julio – octubre 2026 (unos 3 meses)
- Plataformas
- Web, app de escritorio para Windows, app para tablets Android
El reto
Puntonet vende más de 40 servicios empresariales en cuatro áreas: Conectividad, Nube, Ciberseguridad y Colaboración. En papel, ese catálogo es una larga lista de siglas (SD-WAN, XDR, IaaS, MFA…) difícil de imaginar para un cliente, y más aún de relacionar con su propia empresa.
El equipo de ventas necesitaba una forma de sentarse con el cliente y construir su infraestructura juntos, en pantalla: agregar sus oficinas, colocar servicios en ellas, conectarlo todo y ver al instante dónde están cubiertos y dónde están expuestos.
Y tenía que funcionar en cualquier lugar al que vaya un vendedor, en una laptop o una tablet, incluso sin conexión a internet.
Del wireframe al producto 3D
Paso 01 / 06
Validar primero la interacción
Antes de cualquier pulido visual, construí un prototipo funcional con formas simples de wireframe. El objetivo era probar la mecánica central con el cliente lo antes posible: arrastrar una oficina al lienzo, arrastrar un producto a esa oficina y ver cómo reacciona un panel de resumen.
El cliente tuvo una versión navegable desde los primeros días del proyecto, así que cada conversación a partir de ahí fue sobre una herramienta real y usable, no sobre maquetas estáticas.
Semana uno: cubos de wireframe, pero con toda la lógica de arrastrar y soltar ya funcionando. Paso 02 / 06
Dar forma a la lógica con el cliente
Las sesiones de revisión periódicas con el cliente convirtieron el prototipo en una herramienta de ventas real. Modelamos sus reglas de negocio reales: qué servicios pueden ir en una sucursal, cuáles solo en el datacenter, cuáles necesitan conexión con otra sede o con un proveedor de nube, y cómo se agrupan.
También definimos un puntaje de Salud de la Infraestructura: una barra simple por categoría que se llena a medida que cada sede del cliente queda cubierta. Le da al vendedor y al cliente una forma visual y compartida de hablar de lo que falta.
Paso 03 / 06
Llevarlo a 3D real
Con la interacción ya sólida, los wireframes se reemplazaron por modelos 3D a medida: tres tamaños de oficina que crecen con el número de empleados, una sede principal, el datacenter de Puntonet y los proveedores de nube. Cada uno se ajustó en luz, materiales y color hasta que la escena renderizada coincidió con las imágenes de referencia de dirección de arte.
Iterando los materiales: de edificios azules al acabado final, más limpio. 
Antes, después y la referencia de dirección de arte, lado a lado. Paso 04 / 06
Aplicar el sistema de diseño
Con el nuevo sistema de diseño de la marca listo, reconstruí toda la interfaz a su alrededor: el catálogo de productos, el panel de detalle, los controles y la barra de salud, todo adaptándose limpiamente a distintos tamaños de pantalla.
La nueva interfaz de marca, aplicada sobre la misma lógica ya probada. Paso 05 / 06
Hacer visible cada servicio
Cada servicio tiene su propio ícono 3D (un escudo, un candado, una antena, un globo…) que aparece sobre el edificio al que se asignó. Las conexiones se dibujan como líneas animadas con luz que viaja por ellas, así el cliente puede ver literalmente sus datos fluyendo entre oficinas, el datacenter y la nube.
Los productos aparecen como íconos 3D sobre cada edificio, unidos por conexiones animadas. Paso 06 / 06
Cerrar la reunión con un informe
Al final de la sesión, un clic genera un PDF con la marca: la infraestructura del cliente antes y después, su puntaje de salud y cada conexión y servicio propuestos. El vendedor sale de la reunión con un documento que el cliente puede compartir internamente.
El informe generado automáticamente, con el progreso del cliente del inicio al final de la reunión.
Del navegador a escritorios y tablets
Los vendedores visitan clientes en lugares con poca o ninguna conexión, y los datos del cliente tienen que quedarse en el dispositivo. Así que el último paso fue convertir la app web en productos instalables que funcionan 100% sin conexión:
- App para tablets AndroidOptimizada para el tacto: pellizcar, arrastrar, mantener presionado y selección múltiple.
- App de escritorio para WindowsCon su propio instalador y acceso directo en el escritorio.
- Versión web sin conexiónSigue funcionando después de la primera visita.
Las tres comparten exactamente el mismo código, así que cada mejora llega a todos los dispositivos a la vez. Las sesiones se guardan automáticamente en el dispositivo y nada se envía a servidores externos, lo que también simplificó la revisión de TI y de privacidad de datos.
El resultado
De una lista de siglas a una conversación visual: los clientes ven su propia empresa en pantalla y entienden qué hace cada servicio por ellos.
- 40+Servicios
- En 4 categorías, cada uno con su propio ícono 3D y sus reglas de negocio.
- 3Plataformas, 1 código
- Web, Windows y Android, todas sin conexión.
- 260+Pruebas automáticas
- Se ejecutan antes de cada versión, para que sea confiable por diseño.
- ~3Meses
- Del wireframe al producto instalado, construido sesión a sesión con el cliente.
¿Tienes un producto complejo que cuesta explicar? Hagamos que tus clientes puedan verlo.
Portafolio de Paam