Cas d'estudi · Disseny i desenvolupament
Que obrir l'enllaç se sentís com obrir un regal.
Sant Jordi és una de les festes més estimades de Catalunya: el dia de les roses i els llibres. Rosesstjordi.cat trasllada aquesta tradició al món digital, perquè qualsevol persona pugui enviar una rosa virtual amb una dedicatòria personal a algú especial, amb la mateixa emoció que regalar una rosa de veritat.
El repte: la tradició feta digital
L'objectiu no era només construir una web bonica, sinó crear un petit moment de màgia: que obrir l'enllaç i veure la rosa se sentís com obrir un regal, no com omplir un formulari més.
Ànima abans que plantilla
Ens vam allunyar deliberadament de l'estètica freda i genèrica que sol veure's en molts projectes fets amb IA: formes 3D, degradats suaus i tot excessivament polit. La rosa es dibuixa a mà, amb un filtre que li dona un traç lleugerament imperfecte, sobre una paleta càlida de granat i or que remet directament a la festa.
Playfair Display sosté els titulars; una serif clàssica reservada per al cos de la carta acompanya la dedicatòria. Dues tipografies amb caràcter editorial, molt allunyades de l'aspecte de plantilla genèrica.
Diada de Sant Jordi
Playfair Display · 700 · Titulars
El cor: un sobre que es tanca davant teu
El centre de l'experiència és un sobre animat: la persona tria la seva rosa, escriu la seva dedicatòria i veu com la carta es segella amb una animació cuidada abans de generar l'enllaç per compartir.
Vam cuidar molt aquest moment de transició perquè fos fluid i no donés cap salt visual estrany: és la part en què més temps de polit es va invertir, perquè és la que decideix si la sorpresa funciona o no.
Enviament personalitzat, sense fricció
El formulari demana just el necessari: qui envia la rosa, per a qui i la dedicatòria, amb un límit de 280 caràcters que obliga a dir el que és important sense allargar-se. Sense registre ni compte pel mig.
Enllaços que es veuen bé a qualsevol xarxa
Cada rosa enviada genera un enllaç únic amb les seves pròpies etiquetes Open Graph: en compartir-lo per WhatsApp, X, Facebook o Telegram (els quatre canals amb botó directe), o en enganxar-lo a Instagram, LinkedIn o qualsevol altre lloc, es mostra una vista prèvia amb la rosa i el missatge en comptes d'un enllaç pelat.
Bilingüe, sense fricció
Tota l'experiència està disponible en català i castellà, amb un selector d'idioma sempre a la vista. Cada rosa guarda l'idioma en què es va crear, així que qui la rep la llegeix en el mateix idioma amb què es va enviar.
Responsive de debò
El disseny està pensat per al mòbil des de la primera línia de CSS, perquè és allà on la majoria de la gent va obrir i compartir la seva rosa. El sobre, la tipografia i les animacions es comporten igual de bé en una pantalla de 380 px que en un monitor d'escriptori.
Per sota del capó
Next.js amb App Router al frontend, MongoDB per guardar cada rosa (remitent, destinatari, dedicatòria i idioma) amb un índex TTL que l'esborra automàticament als 30 dies, i IDs curts generats amb nanoid perquè l'enllaç sigui fàcil de compartir. Un límit de peticions per IP evita l'spam de roses.
Desplegat a Vercel, amb domini propi a rosesstjordi.cat.
Resultats i aprenentatge
El projecte va connectar amb la gent molt més del que s'esperava: més de 500 roses enviades durant la campanya, prop de 5.000 visites reals (la majoria arribades de forma orgànica pel mateix efecte de compartir) i tendència a Reddit Catalunya aquell mateix dia, una cosa que no es buscava activament i que demostra el boca-orella que va generar l'experiència.
Aquest projecte confirma una cosa en què creiem: els petits detalls de disseny i d'interacció (una animació ben resolta, una transició sense ensurts, una estètica amb caràcter propi) són els que converteixen una web funcional en una experiència que la gent vol compartir amb els altres.