cirro

el problema

Un niño de nueve años llega a casa con una pila de deberes. No es que no sepa la materia: es que la pila le abruma, el agobio le hace más difícil empezar, y cada tarde que termina sin arrancar le confirma la idea de que “se le da mal esto”. El problema no es de contenido. Es de función ejecutiva y de regulación emocional: cómo organizarse, cómo arrancar, cómo sostener el foco y cómo no desbordarse por el camino.

Casi todas las herramientas para niños atacan la parte equivocada. Capturan deberes (cosa que Google Classroom ya hace) o gamifican el contenido, pero ninguna trata el estado emocional como un prerrequisito del trabajo, no como un extra. Y el soporte que rodea a un niño que lo pasa mal (psicólogo, profesor, departamento de orientación) trabaja en paralelo, sin conectar la información.

Cirro parte de una tesis incómoda de tan obvia: primero regular, luego trabajar. Un niño tranquilo y acompañado puede planificar y concentrarse; uno desbordado, no. Así que el andamiaje emocional pesa lo mismo que el organizativo.

Esto lo empecé pensando en compañeros míos que siempre arrastraron dificultades en clase, y en cómo eso les pesaba incluso fuera del cole. Yo venía de un colegio privado muy exigente, con mucha presión, donde el sistema era el mismo para todos. Quería justo lo contrario: algo que se adaptara a cada niño, no el niño al sistema. Por eso Cirro fue, desde el principio, para niños.

la investigación

Empecé este proyecto en Elisava, en interaction design. En la versión académica la persona acabó siendo mayor de lo que yo tenía en la cabeza, más adelante lo cuento sin maquillar, pero el producto que quería hacer fue siempre para niños. No quería diseñar sobre intuiciones de adulto disfrazadas de pedagogía, así que trabajé en dos capas: primero un proceso de UX research clásico para entender a la persona y su contexto, y después una base de evidencia más profunda que graduara cada afirmación por la fuerza de su evidencia.

La investigación de UX. La persona que construí para el ejercicio académico era una estudiante mayor, más lejos de los niños a los que de verdad quería ayudar, una desviación que arrastré hasta el test:

Irene, 23 años, Lisboa. Estudia tercero de Derecho. Le cuesta arrancar y organizarse para estudiar, y siente que sin herramientas de estudio que de verdad funcionen no llega bien preparada a los exámenes. La presión y la falta de concentración se retroalimentan.

A partir de Irene mapeé:

• Journey map en 8 puntos, desde que llega de clase hasta que entiende la materia.
• Dramatic arc trazando el nivel emocional en cada punto (de frustración a optimismo).
• What if?: escenarios donde el sistema falla, ¿y si el soporte psicológico no es efectivo? ¿Y si el dispositivo no explica bien un concepto? ¿Y si los departamentos no se comunican entre sí?
• Service blueprint mostrando cómo orientación, salud mental y profesores se conectarían a la herramienta.

Seguí Design Thinking de punta a punta: empathize (entrevistas, persona, journey map), define (síntesis del problema y “what if” para riesgos), ideate (paper prototyping en baja fidelidad), prototype (wireflow → design system → wireframes de alta fidelidad en Figma) y test (prototipo en Maze).

El benchmarking. Analicé cuatro referentes y posicioné el producto según nivel de engagement vs organización de estudios:

• Duolingo, engagement alto, foco en idiomas.
• Daylio, tracking emocional diario.
• My Study Life, organización pura, poco emocional.
• Shiken AI, mindfulness + quizzes.

Ninguno cruzaba los tres ejes que a mí me importaban: organización, emoción e IA tutor en un solo producto.

La encuesta. Pasé un cuestionario para contrastar el contexto con usuarios reales (una muestra mayoritariamente universitaria, 57%). Los móviles y la falta de motivación salieron como las mayores distracciones (61% cada una), por delante de la falta de organización (39%); y entre las funciones deseadas iban en cabeza planificar tareas (53%) y detectar distracciones (41%). Eso afinó el público objetivo y las prioridades del producto.

La base de evidencia. Cuando el proyecto creció hacia un producto real, profundicé en la base psicológica sobre marcos nombrados y verificables. El esqueleto:

• Teoría de la autodeterminación (Deci & Ryan), autonomía (el niño elige el ánimo, la herramienta, qué deberes y cuándo empezar o parar), competencia (trabajo partido en pasos pequeños, a su ritmo) y vínculo (una compañera con nombre).
• Mentalidad de crecimiento (Dweck), elogio al proceso (“te quedaste con ello”, “eso lo planificaste tú”), nunca al rasgo (“qué listo eres”), porque el elogio al rasgo hace que los niños eviten el reto y se hundan ante el fallo.
• Coaching emocional (Gottman) y RULER (Yale), validar antes de aplicar técnica; “name it to tame it” / etiquetado afectivo (Lieberman) para bajar la activación poniéndole nombre a la emoción.
• Tres cosas buenas, el bucle diario cierra en regulación, no en “hecho”: si el niño sigue bajo, ofrece una respiración más en lugar de dejarlo desbordado.

La parte más sólida, y la que más me sirvió para tomar decisiones de interfaz, fue la de carga visual y color. Lo defendible:

• El desorden visual daña la atención de todos los niños y no se habitúa (Fisher, Godwin & Seltman 2014; sin habituación a 15 semanas, Godwin 2022). De ahí: un foco por pantalla, pocos elementos.
• La activación la disparan la saturación y el brillo, no el tono (Valdez & Mehrabian 1994; Wilms & Oberfeld 2018). De ahí: un lienzo claro y desaturado, con la saturación alta reservada para la única acción de “haz esto ahora”.
• Lo curvo se lee como seguro; lo angular activa la amígdala (Bar & Neta 2006). De ahí: esquinas redondeadas y tipografía suave.

Y lo que decidí no usar, aunque sea tentador: el color que “cura” o “equilibra energía” (pseudociencia), las “tipografías para dislexia” (el beneficio es el espaciado, no la fuente), y el “rojo perjudica / azul para creatividad” (no replica limpio). La evidencia más fuerte es para los programas socioemocionales en su conjunto (Durlak 2011; Cipriano 2023); para una microtécnica aislada en niños de 7 to 12 es más fina. Por eso cada técnica lleva su nivel de evidencia marcado, y nunca afirmo que Cirro “reduce la ansiedad”, solo que está informado por evidencia.

del prototipo al producto

Con la investigación de UX hecha, monté un prototipo de alta fidelidad en Figma y lo testeé en Maze con usuarios del rango objetivo de aquel concepto temprano.

El prototipo se llamaba entonces Herupu y su mascota era un búho sobre un cielo de nubes, esa nube acabó dando nombre y forma a Cirro.

Los datos del test:

• 88% dijo que la app era fácil de usar.
• 100% consideró el diseño satisfactorio.
• 71% la usaría mientras estudia.

Hay que ser honesta con lo que esos números miden: validan el prototipo temprano, el concepto Figma de acompañante de estudio para estudiantes con ansiedad, construido alrededor de la persona “Irene, 23”. No miden la app que acabé desplegando. Aun así valen mucho en un portfolio: son evidencia de que el diseño funcionaba en manos de alguien que no soy yo, y de que la herramienta de testing rápido cumple, en dos días tienes 30 respuestas con click maps y tiempo en pantalla.

Aquel prototipo validaba bien, pero la versión académica abarcaba demasiado a la vez (organización + soporte emocional + tutoría IA) y la había probado con una muestra mayor que los niños que yo tenía en mente. Así que, al construir el producto, estreché el alcance hasta el núcleo que sí defendía la evidencia, regular primero, organizar después, solté la tutoría de contenido y lo enfoqué en niños de 7 a 12 años, que es para quienes siempre fue. Y, sobre todo, decidí dejar de diseñar pantallas y construirlo de verdad.

de la investigación al producto

De toda esa base salieron las decisiones de producto que ordenan todo lo demás.

Una sola promesa: regular primero. El triaje de ánimo manda. El niño elige entre seis estados y el enrutamiento decide el camino, no yo: preocupado, enfadado o triste → check-in emocional primero, nunca se le empuja a estudiar; cansado → movimiento suave; contento o tranquilo → directo a los deberes. La emoción no es una pantalla de bienvenida, es el primer nodo de la máquina de estados.

Herramientas calmantes emparejadas a la emoción, cada una con su base. Respiración pausada para el preocupado (inhalar 4s / exhalar 6s, exhalación más larga para subir el tono vagal, sin apnea, sin números, tope de 6 respiraciones). Tensar y soltar para el enfadado (protocolo de relajación muscular progresiva del CHOP: apretar ~5s, soltar, ×3, y re-chequear; la rabia se descarga por el cuerpo, nunca un “cálmate”). 5-4-3-2-1 de anclaje como segunda línea si lo anterior no funcionó. Movimiento para el cansado o el triste (activación conductual, no presión de estudio), y, como es la evidencia más débil del set, siempre ofrece “descansar” como alternativa.

Pomodoro por edad + descanso activo. El foco dura 10 min (7 to 9) o 15 min (10 to 12), muy por debajo del bloque adulto de 25, porque la atención sostenida infantil ronda los 2 to 5 min por año de edad. Un disco visual tipo “Time Timer” que se vacía, con los dígitos opcionales (recordado por dispositivo, pensado para niños ciegos al tiempo o ansiosos), pausa y reanudación, y sin auto-reinicio: el niño elige otra ronda o para. Los descansos son cortos y activos.

El niño escribe sus propios deberes. Asignatura → día → opcional “¿qué es?” → confirmar. Parece una fricción, pero el acto de anotar el deber es la habilidad ejecutiva que estamos entrenando, así que es deliberado.

Privacy-by-design, no como añadido. El panel del adulto muestra patrones de ánimo × carga a lo largo del tiempo, conversaciones para iniciar, nunca transcripciones, nunca las palabras del niño. El campo de texto libre para “soltar una preocupación” es efímero y on-device, no se guarda jamás. El niño sabe que el adulto puede ver su ánimo. Ese par ánimo×carga, mostrado a un adulto sin vigilancia, es el valor defendible del producto, no la captura de deberes.

qué construí

Cirro está desplegada en Vercel y se puede usar en vivo: cirro-ruddy.vercel.app. Es un build de producción real con el adapter de Vercel, no un mockup.

• Stack: SvelteKit + Svelte 5 (runes) + TypeScript + Vite, Tailwind v4, 100% cliente. Supabase (Postgres + Auth + RLS) como fuente de verdad. PWA instalable con service worker (Workbox), manifiesto y shell offline.
• El bucle del niño vive como una máquina de estados de una sola pantalla (~1.000 líneas, 30+ pasos): ánimo → calma → deberes → foco → celebrar → reflexión → ánimo final → recap, y de ahí al panel del adulto. Lectura en voz alta (Web Speech API) en cada bocadillo, i18n completo ES/EN.
• Privacidad real en el esquema, no en un PDF: el niño no tiene cuenta (la sesión es siempre del adulto, “modo niño” es una vista), el esquema guarda solo un apodo, ni nombre real ni fecha de nacimiento, age_band limitado a '7-9'|'10-12'. Row-Level Security por hogar en las 7 tablas. Derecho al olvido real vía RPC delete_account() que borra el hogar en cascada y el usuario de auth. Fuentes auto-hospedadas (sin CDN de Google que filtre la IP de un menor), cero analítica de terceros.
• Guarda de seguridad honesta: en ES se muestra la línea de ayuda infantil 116 111 (ANAR); en EN está deliberadamente desactivada (null) para no enseñarle a un niño un número equivocado en una geografía sin verificar, cae a “habla con un adulto de confianza”. La cabecera del fichero dice, literal, “VERIFY BEFORE SHIPPING TO REAL CHILDREN”.

La mascota es, por ahora, una nube SVG, Cirro, la nube.

Lo que NO está construido, y lo digo claro: el andamiaje que se desvanece (la escalera de autonomía de Vygotsky, que el sistema haga cada vez menos a medida que el niño interioriza la rutina) es trabajo futuro, no producto en vivo. También quedan pendientes: línea de ayuda verificada por un profesional para cada geografía, protocolo de seguridad real con un humano en el lazo (hoy no lo hay), DPIA + política de privacidad + consentimiento parental verificable reforzado (hoy el consentimiento es solo un checkbox obligatorio más una puerta de adulto que los propios docs reconocen que no es seguridad real), OCR de la agenda, importación desde Classroom/Seesaw, empaquetado a tiendas de apps, y la validación de los efectos de bienestar mediante un estudio propio.

el nombre

Del búho a la nube. La primera guía era un búho: sabio, vigilante, el que sabe. Pero un búho te mira, y en una app construida sobre la idea de no juzgar y no presionar, eso convierte sin querer a un acompañante en un profesor. Así que la guía pasó a ser una nube: está al lado del niño, nunca por encima. No tiene autoridad, flota con calma y cambia de forma, un guiño silencioso al growth mindset, .

Por qué Cirro. No una nube cualquiera, sino un cirro: la nube más alta y ligera del cielo, la que anuncia buen tiempo. El nombre lo dice en una sola palabra suave que un niño de siete años puede pronunciar: calma, ligereza, cielos despejados. Justo para lo que sirve la app. Y en español cirro es literalmente el nombre de esa nube, así que el nombre y la mascota son la misma palabra.

qué aprendí

• El producto correcto rara vez es el primero que diseñas. El concepto temprano validaba bien en Maze (88% lo encontró fácil de usar) y aun así lo estreché de “todo a la vez” a “regular primero” y lo reconstruí para los niños a los que siempre apuntó. Aprendí a tratar un buen resultado de test como una señal de dirección, no como permiso para no cambiar nada.
• Diseñar para la regulación obliga a un nivel de honestidad con la evidencia que ningún brief pide. Aprendí a graduar cada afirmación: “informado por evidencia” no es lo mismo que “demostrado en esta app”, y la diferencia es la línea entre un producto serio para niños y uno que promete humo. Cada microcopy importa cuando diseñas para la ansiedad.
• La privacidad se diseña en el esquema, no en un texto legal. Que las palabras del niño no se puedan guardar porque el campo es efímero, y que un hogar solo vea sus filas por RLS, vale más que cualquier párrafo de política de privacidad.
• El andamiaje que está hardcodeado no es andamiaje. Es muy fácil enseñar pantallas que parecen adaptarse a la edad sin que de verdad lo hagan. Prefiero marcarlo como futuro honesto que fingir que ya está.

qué cambiaría

• Testearía antes de construir tanto. Sé hacer research con usuarios, lo hice en la fase temprana con Maze, y aun así, al rebuild, me lancé a programar. Partí de mi propia comprensión del problema y construí muchísimo antes de validar: solo he tenido feedback informal, el alfa planeado (2 to 3 hogares reales durante una semana) no ha pasado y no hay ningún estudio de bienestar hecho. La próxima vez: prototipo barato y usuarios reales primero, código después.
• Probaría con niños reales de 7 a 12, no con compañeros. Aquellos resultados salieron de la versión académica, testeada con estudiantes mayores y con una muestra sesgada hacia gente que ya sabe lo que es UX. La app no se ha testeado a esa escala con niños, y debería antes de hablar de su impacto.
• Cerraría las puertas de lanzamiento antes de hablar de niños reales: verificar la línea de ayuda, montar un protocolo de seguridad con humano en el lazo, y la DPIA con consentimiento reforzado. Hasta entonces, Cirro es un producto honesto sobre lo que todavía no es.