Playwork

Espacios sensoriales para colegios y jardines

Espacios sensoriales ordenados por necesidad pedagógica, con cotización conectada directo al CRM.

Tipo: Landing de cotización
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 Playwork: titular «Aprender se siente: espacios sensoriales que regulan, activan y duran.» con fotografía y formulario de cotización. — Fig. 01Sitio implementadoPrimer viewport en desktop.

01Resumen

Landing de Playwork, fabricante chileno de kits de espuma para espacios sensoriales. Está dirigida a colegios, jardines infantiles y programas PIE y NEEP, y organiza la oferta por objetivo pedagógico —calma, integración sensorial, psicomotricidad— con un formulario de cotización al inicio y al cierre.

Vista general de la landing completa, dividida en tres columnas. — Fig. 02Sitio implementadoLa landing completa, en tres 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

Los kits pueden parecerse a productos importados más baratos. La página debía explicar para qué sirve cada espacio, justificar la diferencia de calidad y llevar a una cotización a quien decide la compra en el establecimiento.

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

El formulario de cotización en el primer viewport

Necesidad: Parte de las visitas llega con intención de cotizar y no necesita recorrer toda la página.
Decisión: Ubiqué el formulario junto al titular en desktop y lo repetí al cierre; en móvil queda bajo el texto y la imagen principal.
Efecto esperado: Acortar el camino entre la llegada y la solicitud.

Hero con titular a la izquierda y formulario de cotización a la derecha. — Fig. 03Sitio implementadoTitular, propuesta y formulario en el primer viewport.

Decisión 02

Cada espacio con un «Ideal para»

Necesidad: Quien compra necesita justificar la elección ante su dirección con un objetivo claro.
Decisión: Cada tarjeta incluye el objetivo, un bloque «Ideal para» con perfiles de estudiantes y un enlace para cotizar ese espacio; una tarjeta de color cierra la grilla con la opción a medida.
Efecto esperado: Elegir por necesidad y no por producto.

Grilla de espacios sensoriales con fotografía, descripción e «Ideal para». — Fig. 04Sitio implementadoEspacios organizados por necesidad pedagógica.

Decisión 03

Mostrar la diferencia con el producto importado

Necesidad: Hacer tangible una diferencia de calidad que en una foto de catálogo no se ve.
Decisión: Diseñé la sección «Se ven iguales, pero no lo son», que compara la espuma Playwork con una genérica importada y la duración de cada una.
Efecto esperado: Apoyar el argumento de durabilidad con una comparación visual.

Comparación de fotografías: espuma Playwork frente a espuma genérica importada. — Fig. 05Sitio implementadoDos fotografías y un dato por material.

Otros detalles

Segunda fila de espacios con la tarjeta «¿Necesitas algo a tu medida?». — Fig. 06Sitio implementadoLa opción a medida se diferencia con el color de marca.

05Versión móvil

Fig. 07Sitio implementadoEn móvil, el formulario baja después del texto y la fotografía principal, y las tarjetas se apilan en una columna.

06Del diseño a la implementación

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

Formulario de cotización en el hero y en el cierre, conectado a Bitrix24.
Grilla de espacios con cotización por tarjeta.
Versión móvil: el formulario baja después del texto y las tarjetas se apilan.
Preguntas frecuentes desplegables.

07Resultado y aprendizaje

Entregado: Landing publicada, con versión desktop y móvil.
Observado: Las cotizaciones llegan al CRM indicando el espacio o kit de interés, listas para el ejecutivo.
Aprendizaje: Organizar la oferta por necesidad pedagógica y no por producto cambió el tono de toda la página: el cliente no compra espuma, compra una solución para sus estudiantes. Repetir el formulario al cierre funciona cuando la página responde antes las objeciones.