Mirada Educativa

Estación Multisensorial

Landing en React para explicar un dispositivo multisensorial a colegios y llevar a una demostración.

Tipo: Landing de producto
Estado: Publicado
Mi aporte: Diseño, desarrollo e integración con Bitrix24
Año: 2025
Herramientas: Figma · React · Vue.js · TanStack · Tailwind CSS · Bitrix24

Hero de la landing: titular «Tu sala ya tiene el espacio. Ahora dale el ambiente.» junto a un panel de video. — Fig. 01Sitio implementadoPrimer viewport en desktop.

01Resumen

Landing de la Estación Multisensorial de Mirada Educativa: un dispositivo que convierte una sala existente en un ambiente inmersivo, con cuatro canales sensoriales —visual, auditivo, táctil y olfativo— controlados desde una tablet. Se dirige a directivos y equipos de colegios, y reúne en una página el problema, el producto, la inversión y la solicitud de demostración.

Vista general de la landing completa, dividida en cuatro columnas. — Fig. 02Sitio implementadoLa landing completa, en cuatro columnas que se leen de izquierda a derecha.

02Mi participación

Rol y alcance: Participé en todo el proceso: estructura, diseño UX/UI, desarrollo e integración con el CRM.
Colaboración: Proyecto realizado en Agencia Böll.
Entregables: Estructura y jerarquía de contenidos
Diseño UI en Figma
Desarrollo de la landing
Integración con Bitrix24

03El problema

Un producto nuevo para la mayoría de los establecimientos, que combina hardware y software. La página tenía que explicar qué es, cómo se usa y cuánto cuesta, y responder a quien debe justificar la compra ante su comunidad escolar.

04Decisiones clave

Cada decisión se lee como necesidad → decisión → efecto. «Esperado» indica la intención de diseño, no un resultado medido.

Decisión 01

Un selector por sentido en el primer viewport

Necesidad: Mostrar que un solo dispositivo trabaja cuatro canales sensoriales sin obligar a leer toda la página.
Decisión: Diseñé un selector —Visual, Auditivo, Táctil, Olfativo— que cambia la descripción y el color de acento del titular, junto a un video del ambiente.
Efecto esperado: Recorrer el concepto completo desde el primer viewport.

Fig. 03Sitio implementado · animaciónCada sentido cambia el color del titular (cian, lima, naranja, rojo) y su descripción.

Decisión 02

La inversión junto a sus fuentes de financiamiento

Necesidad: Anticipar la objeción de costo de un equipo directivo con presupuesto acotado.
Decisión: Agrupé en un bloque la cotización, lo que incluye la unidad y las fuentes de financiamiento compatibles (Fondo SEP y fondos PIE).
Efecto esperado: Evaluar la compra con los fondos que el colegio ya administra.

Sección de inversión con la tarjeta de cotización, lo que incluye la unidad y las fuentes de financiamiento. — Fig. 04Sitio implementadoCotización, contenido de la unidad y financiamiento en un mismo bloque.

Decisión 03

Comparar con la alternativa conocida

Necesidad: Diferenciar la Estación de una Sala SEM, la referencia habitual en los colegios.
Decisión: Armé una tabla que compara ambas opciones en espacio, movilidad, capacidad y uso ideal; en móvil se transforma en dos listas apiladas.
Efecto esperado: Hacer visible la diferencia sin texto adicional.

Tabla comparativa entre la Estación Multisensorial y una Sala SEM. — Fig. 05Sitio implementadoComparación en cuatro criterios.

Otros detalles

Sección «El problema» con tres situaciones y un bloque negro con la frase principal. — Fig. 06Sitio implementadoEl problema en tres situaciones concretas.

Sección de producto con fotografías de la Estación, un antes y después y tres pasos de uso. — Fig. 07Sitio implementadoProducto, antes y después, y uso en tres pasos.

05Versión móvil

Fig. 08Sitio implementadoEn móvil, el panel de video pasa sobre el titular, el selector se reparte en dos líneas y la tabla comparativa se transforma en listas apiladas.

06Del diseño a la implementación

Desarrollé la landing con React, Vue.js, TanStack y Tailwind CSS, e integré el formulario con Bitrix24.

Selector de sentidos con estados de color y contenido.
Panel de video del ambiente junto al titular.
Versión móvil: el video pasa sobre el titular y la tabla se convierte en listas.
Formulario de demostración conectado a Bitrix24 y preguntas frecuentes desplegables.

07Resultado y aprendizaje

Entregado: Landing publicada, con versión desktop y móvil.
Observado: Cada solicitud de demostración entra directo al CRM del cliente, sin traspasos manuales.
Aprendizaje: Cuando el producto es nuevo, la interacción puede explicar más que un párrafo: el selector de sentidos resume el concepto en el primer viewport. Conectar el formulario al CRM desde el inicio cambia la conversación con el cliente: la landing deja de ser una pieza y pasa a ser parte de su proceso comercial.