cirro

el problema

Un nen de nou anys arriba a casa amb una pila de deures. No és que no sàpiga la matèria: és que la pila l’aclapara, l’angoixa li fa més difícil començar, i cada tarda que acaba sense arrencar li confirma la idea que “això se li dóna malament”. El problema no és de contingut. És de funció executiva i de regulació emocional: com organitzar-se, com arrencar, com sostenir el focus i com no desbordar-se pel camí.

Gairebé totes les eines per a nens ataquen la part equivocada. Capturen deures (cosa que Google Classroom ja fa) o gamifiquen el contingut, però cap no tracta l’estat emocional com un requisit previ del treball, sinó com un extra. I el suport que envolta un nen que ho passa malament (psicòleg, professor, departament d’orientació) treballa en paral·lel, sense connectar la informació.

Cirro parteix d’una tesi tan òbvia que incomoda: primer regular, després treballar. Un nen tranquil i acompanyat pot planificar i concentrar-se; un de desbordat, no. Així que la bastida emocional pesa tant com l’organitzativa.

Això ho vaig començar pensant en companys meus que sempre van arrossegar dificultats a classe, i en com això els pesava fins i tot fora de l’escola. Jo venia d’un col·legi privat molt exigent, amb molta pressió, on el sistema era el mateix per a tothom. Volia just el contrari: alguna cosa que s’adaptés a cada nen, no el nen al sistema. Per això Cirro va ser, des del principi, per a nens.

la recerca

Vaig començar aquest projecte a Elisava, a interaction design. En la versió acadèmica la persona va acabar essent més gran del que jo tenia al cap, més endavant ho explico sense maquillar, però el producte que volia fer va ser sempre per a nens. No volia dissenyar sobre intuïcions d’adult disfressades de pedagogia, així que vaig treballar en dues capes: primer un procés de UX research clàssic per entendre la persona i el seu context, i després una base d’evidència més profunda que gradués cada afirmació segons la força de la seva evidència.

La recerca de UX. La persona que vaig construir per a l’exercici acadèmic era una estudiant més gran, més lluny dels nens als quals de debò volia ajudar, una desviació que vaig arrossegar fins al test:

Irene, 23 anys, Lisboa. Estudia tercer de Dret. Li costa arrencar i organitzar-se per estudiar, i sent que sense eines d’estudi que de debò funcionin no arriba ben preparada als exàmens. La pressió i la manca de concentració es retroalimenten.

A partir d’Irene vaig mapejar:

• Journey map en 8 punts, des que arriba de classe fins que entén la matèria.
• Dramatic arc traçant el nivell emocional en cada punt (de frustració a optimisme).
• What if?: escenaris on el sistema falla, i si el suport psicològic no és efectiu? i si el dispositiu no explica bé un concepte? i si els departaments no es comuniquen entre si?
• Service blueprint mostrant com orientació, salut mental i professors es connectarien a l’eina.

Vaig seguir Design Thinking de cap a cap: empathize (entrevistes, persona, journey map), define (síntesi del problema i “what if” per als riscos), ideate (paper prototyping en baixa fidelitat), prototype (wireflow → design system → wireframes d’alta fidelitat a Figma) i test (prototip a Maze).

El benchmarking. Vaig analitzar quatre referents i vaig posicionar el producte segons el nivell d’engagement vs organització dels estudis:

• Duolingo, engagement alt, focus en idiomes.
• Daylio, tracking emocional diari.
• My Study Life, organització pura, poc emocional.
• Shiken AI, mindfulness + quizzes.

Cap no creuava els tres eixos que a mi m’importaven: organització, emoció i IA tutor en un sol producte.

L’enquesta. Vaig passar un qüestionari per contrastar el context amb usuaris reals (una mostra majoritàriament universitària, 57%). Els mòbils i la manca de motivació van sortir com les distraccions més grans (61% cadascuna), per davant de la manca d’organització (39%); i entre les funcions desitjades encapçalaven planificar tasques (53%) i detectar distraccions (41%). Això va afinar el públic objectiu i les prioritats del producte.

La base d’evidència. Quan el projecte va créixer cap a un producte real, vaig aprofundir en la base psicològica sobre marcs amb nom i verificables. L’esquelet:

• Teoria de l’autodeterminació (Deci & Ryan), autonomia (el nen tria l’estat d’ànim, l’eina, quins deures i quan començar o parar), competència (treball partit en passos petits, al seu ritme) i vincle (una companya amb nom).
• Mentalitat de creixement (Dweck), elogi al procés (“hi has perseverat”, “això ho has planificat tu”), mai al tret (“que llest que ets”), perquè l’elogi al tret fa que els nens evitin el repte i s’enfonsin davant l’error.
• Coaching emocional (Gottman) i RULER (Yale), validar abans d’aplicar tècnica; “name it to tame it” / etiquetatge afectiu (Lieberman) per abaixar l’activació posant nom a l’emoció.
• Tres coses bones, el bucle diari tanca en regulació, no en “fet”: si el nen continua baix, ofereix una respiració més en lloc de deixar-lo desbordat.

La part més sòlida, i la que més em va servir per prendre decisions d’interfície, va ser la de càrrega visual i color. El defensable:

• El desordre visual perjudica l’atenció de tots els nens i no s’hi habituen (Fisher, Godwin & Seltman 2014; sense habituació a 15 setmanes, Godwin 2022). D’aquí: un focus per pantalla, pocs elements.
• L’activació la disparen la saturació i la brillantor, no el to (Valdez & Mehrabian 1994; Wilms & Oberfeld 2018). D’aquí: un llenç clar i desaturat, amb la saturació alta reservada per a l’única acció de “fes això ara”.
• El que és corb es llegeix com a segur; el que és angular activa l’amígdala (Bar & Neta 2006). D’aquí: cantonades arrodonides i tipografia suau.

I el que vaig decidir no fer servir, per molt temptador que sigui: el color que “cura” o “equilibra l’energia” (pseudociència), les “tipografies per a la dislèxia” (el benefici és l’espaiat, no la font), i el “vermell perjudica / blau per a la creativitat” (no replica net). L’evidència més forta és per als programes socioemocionals en conjunt (Durlak 2011; Cipriano 2023); per a una microtècnica aïllada en nens de 7 a 12 anys és més prima. Per això cada tècnica porta marcat el seu nivell d’evidència, i mai no afirmo que Cirro “redueix l’ansietat”, només que està informat per evidència.

del prototip al producte

Amb la recerca de UX feta, vaig muntar un prototip d’alta fidelitat a Figma i el vaig testar a Maze amb usuaris del rang objectiu d’aquell concepte inicial.

El prototip es deia llavors Herupu i la seva mascota era un mussol sobre un cel de núvols, aquell núvol és el que després va donar nom i forma a Cirro.

Les dades del test:

• 88% va dir que l’app era fàcil de fer servir.
• 100% va considerar el disseny satisfactori.
• 71% la faria servir mentre estudia.

Cal ser honesta amb el que mesuren aquests números: validen el prototip inicial, el concepte Figma d’acompanyant d’estudi per a estudiants amb ansietat, construït al voltant de la persona “Irene, 23”. No mesuren l’app que vaig acabar desplegant. Tot i així valen molt en un portafoli: són evidència que el disseny funcionava en mans d’algú que no soc jo, i que l’eina de testing ràpid compleix, en dos dies tens 30 respostes amb click maps i temps en pantalla.

Aquell prototip validava bé, però la versió acadèmica abastava massa coses alhora (organització + suport emocional + tutoria IA) i l’havia provat amb una mostra més gran que els nens que jo tenia al cap. Així que, en construir el producte, vaig estrènyer l’abast fins al nucli que sí que defensava l’evidència, regular primer, organitzar després, vaig deixar anar la tutoria de contingut i el vaig enfocar a nens de 7 a 12 anys, que és per a qui sempre va ser. I, sobretot, vaig decidir deixar de dissenyar pantalles i construir-lo de debò.

de la recerca al producte

De tota aquesta base van sortir les decisions de producte que ordenen tota la resta.

Una sola promesa: regular primer. El triatge d’estat d’ànim mana. El nen tria entre sis estats i l’enrutament decideix el camí, no jo: preocupat, enfadat o trist → check-in emocional primer, mai no se l’empeny a estudiar; cansat → moviment suau; content o tranquil → directe als deures. L’emoció no és una pantalla de benvinguda, és el primer node de la màquina d’estats.

Eines calmants aparellades a l’emoció, cadascuna amb la seva base. Respiració pausada per al preocupat (inspirar 4s / expirar 6s, expiració més llarga per pujar el to vagal, sense apnea, sense números, màxim de 6 respiracions). Tensar i deixar anar per a l’enfadat (protocol de relaxació muscular progressiva del CHOP: estrènyer ~5s, deixar anar, ×3, i tornar a comprovar; la ràbia es descarrega pel cos, mai un “calma’t”). 5-4-3-2-1 d’ancoratge com a segona línia si l’anterior no ha funcionat. Moviment per al cansat o el trist (activació conductual, no pressió d’estudi), i, com que és l’evidència més feble del conjunt, sempre ofereix “descansar” com a alternativa.

Pomodoro per edat + descans actiu. El focus dura 10 min (7 to 9) o 15 min (10 to 12), molt per sota del bloc adult de 25, perquè l’atenció sostinguda infantil ronda els 2 to 5 min per any d’edat. Un disc visual tipus “Time Timer” que es buida, amb els dígits opcionals (recordat per dispositiu, pensat per a nens cecs al temps o ansiosos), pausa i represa, i sense reinici automàtic: el nen tria una altra ronda o para. Els descansos són curts i actius.

El nen escriu els seus propis deures. Assignatura → dia → opcional “què és?” → confirmar. Sembla una fricció, però l’acte d’anotar el deure és l’habilitat executiva que estem entrenant, així que és deliberat.

Privacitat de partida, no com a afegit. El panell de l’adult mostra patrons d’estat d’ànim × càrrega al llarg del temps, converses per encetar, mai transcripcions, mai les paraules del nen. El camp de text lliure per “deixar anar una preocupació” és efímer i al dispositiu, no es desa mai. El nen sap que l’adult pot veure el seu estat d’ànim. Aquest parell estat d’ànim×càrrega, mostrat a un adult sense vigilància, és el valor defensable del producte, no la captura de deures.

què vaig construir

Cirro està desplegada a Vercel i es pot fer servir en viu: cirro-ruddy.vercel.app. És un build de producció real amb l’adapter de Vercel, no un mockup.

• Stack: SvelteKit + Svelte 5 (runes) + TypeScript + Vite, Tailwind v4, 100% client. Supabase (Postgres + Auth + RLS) com a font de veritat. PWA instal·lable amb service worker (Workbox), manifest i shell offline.
• El bucle del nen viu com una màquina d’estats d’una sola pantalla (~1.000 línies, 30+ passos): estat d’ànim → calma → deures → focus → celebrar → reflexió → estat d’ànim final → recapitulació, i d’aquí al panell de l’adult. Lectura en veu alta (Web Speech API) a cada bafarada, i18n complet ES/EN.
• Privacitat real a l’esquema, no en un PDF: el nen no té compte (la sessió és sempre de l’adult, el “mode nen” és una vista), l’esquema desa només un sobrenom, ni nom real ni data de naixement, age_band limitat a '7-9'|'10-12'. Row-Level Security per llar a les 7 taules. Dret a l’oblit real via RPC delete_account() que esborra la llar en cascada i l’usuari d’auth. Fonts auto-allotjades (sense CDN de Google que filtri la IP d’un menor), zero analítica de tercers.
• Salvaguarda de seguretat honesta: en ES es mostra la línia d’ajuda infantil 116 111 (ANAR); en EN està deliberadament desactivada (null) per no ensenyar a un nen un número equivocat en una geografia sense verificar, recau a “parla amb un adult de confiança”. La capçalera del fitxer diu, literalment, “VERIFY BEFORE SHIPPING TO REAL CHILDREN”.

La mascota és, ara per ara, un núvol SVG, Cirro, el núvol.

El que NO està construït, i ho dic clar: la bastida que es desvaneix (l’escala d’autonomia de Vygotsky, que el sistema faci cada cop menys a mesura que el nen interioritza la rutina) és treball futur, no producte en viu. També queden pendents: línia d’ajuda verificada per un professional per a cada geografia, protocol de seguretat real amb un humà al bucle (avui no n’hi ha), DPIA + política de privacitat + consentiment parental verificable reforçat (avui el consentiment és només una casella obligatòria més una porta d’adult que els mateixos docs reconeixen que no és seguretat real), OCR de l’agenda, importació des de Classroom/Seesaw, empaquetatge a botigues d’apps, i la validació dels efectes de benestar mitjançant un estudi propi.

el nom

Del mussol al núvol. La primera guia era un mussol: savi, atent, el que ho sap. Però un mussol et mira, i en una app construïda sobre la idea de no jutjar i no pressionar, això converteix sense voler un acompanyant en un professor. Així que la guia va passar a ser un núvol: és al costat de l’infant, mai per damunt. No té autoritat, flota amb calma i canvia de forma, un gest silenciós cap al growth mindset, .

Per què Cirro. No un núvol qualsevol, sinó un cirrus: el núvol més alt i lleuger del cel, el que anuncia bon temps. El nom ho diu en una sola paraula suau que un infant de set anys pot pronunciar: calma, lleugeresa, cels clars. Just per a allò que serveix l’app. I en castellà, cirro és literalment el nom d’aquell núvol, així que el nom i la mascota són la mateixa paraula.

què vaig aprendre

• El producte correcte rarament és el primer que dissenyes. El concepte inicial validava bé a Maze (88% el va trobar fàcil de fer servir) i tot i així el vaig estrènyer de “tot alhora” a “regular primer” i el vaig reconstruir per als nens als quals sempre va apuntar. Vaig aprendre a tractar un bon resultat de test com un senyal de direcció, no com un permís per no canviar res.
• Dissenyar per a la regulació obliga a un nivell d’honestedat amb l’evidència que cap brief no demana. Vaig aprendre a graduar cada afirmació: “informat per evidència” no és el mateix que “demostrat en aquesta app”, i la diferència és la línia entre un producte seriós per a nens i un que promet fum. Cada microcopy importa quan dissenyes per a l’ansietat.
• La privacitat es dissenya a l’esquema, no en un text legal. Que les paraules del nen no es puguin desar perquè el camp és efímer, i que una llar només vegi les seves files per RLS, val més que qualsevol paràgraf de política de privacitat.
• La bastida que està hardcodejada no és bastida. És molt fàcil ensenyar pantalles que semblen adaptar-se a l’edat sense que de debò ho facin. Prefereixo marcar-ho com a futur honest que fingir que ja hi és.

què canviaria

• Testaria abans de construir tant. Sé fer recerca amb usuaris, ho vaig fer a la fase inicial amb Maze, i tot i així, en el rebuild, em vaig llançar a programar. Vaig partir de la meva pròpia comprensió del problema i vaig construir moltíssim abans de validar: només he tingut feedback informal, l’alfa planejat (2 to 3 llars reals durant una setmana) no s’ha fet i no hi ha cap estudi de benestar fet. La pròxima vegada: prototip barat i usuaris reals primer, codi després.
• Provaria amb nens reals de 7 a 12, no amb companys. Aquells resultats van sortir de la versió acadèmica, testada amb estudiants més grans i amb una mostra esbiaixada cap a gent que ja sap què és UX. L’app no s’ha testat a aquesta escala amb nens, i s’hauria de fer abans de parlar del seu impacte.
• Tancaria les portes de llançament abans de parlar de nens reals: verificar la línia d’ajuda, muntar un protocol de seguretat amb humà al bucle, i la DPIA amb consentiment reforçat. Fins llavors, Cirro és un producte honest sobre el que encara no és.