Il mondo di Focus Junior sul web: più di un sito, una community progettata a misura di ragazzi.
Il progetto
Grüner+Jahr/Mondadori (G+J/M) è la casa editrice di importanti periodici cartacei e web (www.mondadori.it) tra cui Nostrofiglio.it, Focus, Focus Storia, iFocus e Geo. Per il mondo dei ragazzi ed in particolare per Focusjunior.it, G+J/M ci ha chiamati a riprogettare completamente il sito esistente, studiando non solo una nuova interfaccia, ma l’intera esperienza d’uso del sito al fine di creare un ambiente divertente, istruttivo e in cui i bambini e ragazzi dagli 8 ai 13 anni possano socializzare ed esprimersi in sicurezza.
Come già in passato per i progetti Jacktech e NostroFiglio, abbiamo lavorato insieme ad Ideato, andando così ad abbracciare l’intero spettro di skills necessarie al progetto, dalla progettazione della user experience allo sviluppo backend ad hoc, passando per visual design e frontend, traendo inoltre beneficio dalle metodologie agili condivise che ci consentono di lavorare a cicli brevi e con grande integrazione tra team di design e team di sviluppo.
Kick-off e obiettivi
Come da prassi, i responsabili della web unit G+J/M hanno redatto e ci hanno consegnato un brief del progetto FocusJunior.it, con richieste specifiche, riferimenti a stili grafici e grafici Gantt. Siamo partiti a lavorare proprio da qui, dal brief stesso. Nella prima riunione abbiamo portato il team di G+J/M a chiarire gli obiettivi di business e le scelte strategiche che dovevano permeare ogni scelta di design per il nuovo progetto.
Da qui sono emerse queste esigenze:
Rilanciare la rivista tramite il sito, sfida difficile per lo stato attuale dell’editoria periodica
Aumentare e fidelizzare la base di utenza del sito, permettendo anche di navigare da mobile
Incentivare la navigazione tra le pagine del sito
Fornire motivazioni all’utente per aumentare la permanenza sul sito
Raggiungere gli obiettivi di revenue del committente
L’esperienza di formalizzazione e pulizia del brief è stata una delle tante che ha guidato Ilaria e Marianna a presentare a BetterSoftware 2013 il talk “Cosa manca ad un Brief”.
Esplorazione
Fino dall’iterazione 0 di esplorazione abbiamo coinvolto tutto il team di progetto, includendo oltre ad Ideato, il project manager, i redattori, il marketing e le persone che lavorano a stretto contatto con i lettori della rivista e gli utenti del sito. Abbiamo fatto emergere le diverse esigenze, proprie dei vari ruoli aziendali e dei vari attori, e abbiamo cercato di farle convergere verso gli obiettivi condivisi e strategici.
"FocusJunior.it ha infatti due attori principali: i ragazzi, detti focusini, ed i redattori che mettono a loro disposizione contenuti e servizi. Entrambi sono utenti ed entrambi ne costituiscono la linfa vitale, generandone i contenuti. Intorno a questi attori abbiamo portato avanti l’intera progettazione."
Abbiamo creato un’architettura logica e semantica dei contenuti che ci ha permesso di disegnare una site map primordiale. Questa ci è stata di grande aiuto dal momento che dovevamo riuscire ad integrare sezioni esistenti sul vecchio sito con sezioni del tutto nuove, sia editoriali che di carattere user-generated.
La mappa ci ha agevolato nella scrittura delle User Stories (la definizione di un’azione svolta da un attore all’interno del sito, al fine di soddisfare una propria esigenza) insieme al team di sviluppo e al cliente.
Sempre insieme al team, abbiamo ordinato le priorità di ciascun blocco di contenuto e funzionalità, analizzando i vincoli dati da deadline redazionali o d’azienda, e quelli dati da integrazioni con servizi esterni e tempi di sviluppo delle features.
"Ne è scaturita una roadmap composta di due grosse release: la prima detta editoriale, la seconda detta di community."
Fase editoriale
In questa prima fase, dovevamo:
Progettare e realizzare la nuova esperienza d’uso del sito
Declinare il brand Focus Junior in un linguaggio visivo fresco e piacevole per un target di ragazzi dagli 8 ai 13 anni, e al tempo stesso solido e consistente in un progetto responsive destinato a tutti i device
Realizzare le sezioni con contenuti editoriali pubblicati dalla redazione
Implementare le sezioni di contenuto inserito dai ragazzi e dare loro la possibilità di commentare sia gli articoli inseriti da loro sia quelli redazionali
Permettere ai bambini di creare un piccolo account con un avatar personalizzabile per dare loro modo di avere un’identità come focusini e cominciare ad avere feature propedeutiche all’evoluzione della community
I punti delineati sono, a prima vista, molto lineari.A differenza della maggior parte dei siti, Focusjunior.it si rivolge ad una fascia di utenza che deve essere protetta e tutelata: abbiamo infatti previsto la registrazione autorizzata da un genitore ed ogni contenuto generato dai ragazzi deve essere controllato e moderato dalla redazione. Anche azioni comuni e semplici come l’upload di un’immagine in un post o l’upload di un avatar comportano delle problematiche, anche legali, diverse in Focusjunior.it, trattandosi di utenti minorenni che vanno tutelati nei due sensi: dal rischio di diffusione e uso improprio delle proprie fotografie (avatar) e di esposizione a materiale non adeguato (contenuti user-generated non filtrati). A questo fine abbiamo realizzato, con l’aiuto di una disegnatrice, una famiglia di personaggi illustrati, che gli utenti possono scegliere come avatar, mantenendo la funzionalità e la componente sia ludica che di identità, ed al tempo stesso risolvendo la problematica legale. Allo stesso modo, la redazione ha prodotto degli avatar per ciascuno dei giornalisti, parlando lo stesso linguaggio grafico dei ragazzi, diventando anche loro degli abitanti del mondo di Focusjunior.it.
Il lavoro di visual design ha dovuto integrarsi con un importante evento: la pubblicazione del restyling grafico della rivista cartacea. Le tempistiche dei grafici di G+J/M erano disallineate rispetto al flusso di lavorazione del sito, quindi abbiamo dovuto cominciare a ragionare su una styleguide iniziale che permettesse di procedere con l’elaborazione dei primi prototipi. Successivamente, una volta ricevute le bozze dai grafici, abbiamo aggiornato questa styleguide facendo evolvere il visual design in modo coerente con il nuovo linguaggio visivo della rivista, declinandolo per la fruizione web cross-device.Anche in questo caso, siamo riusciti a trasformare criticità in opportunità: in attesa delle loro bozze siamo riusciti a creare prototipi di pagine, completi di interazioni Javascript, per testare l’esperienza d’uso e a definire le linee guida visive per call to action, tipografia e colori identificativi delle diverse sezioni, (link a prototipo gallery?), lavorando iterativamente e incrementalmente, abbandonando il consueto “big reveal” cui è abituato il mondo dell’editoria.
Ci siamo concentrati anche a risolvere le problematiche di integrazione dell’advertisement, lavorando a stretto contatto con il reparto marketing, la concessionaria pubblicitaria e il team di sviluppo, per riuscire a gestire la principale forma di monetizzazione del sito, i banner, in un contesto di responsive design.
Per completare la definizione del visual design è stata rivolta grande attenzione all’uso colore ed alle immagini. Focusjunior.it doveva avere un tono allegro, divertente ma non stucchevole nè ingenuo: dovevamo riuscire a parlare sia ai bambini di 8 anni sia ai ragazzini più grandi di 13 o 14 anni.
La fase editoriale è stata rilasciata a febbraio 2014 insieme al numero 121 di Focus Junior: un volto tutto nuovo, su carta e sul web.
Per Focus Junior, questo evento ha dato nuova vita ai contenuti pubblicati su web e su carta. Il notevole aumento dei nuovi utenti, delle pagine viste e degli accessi dai dispositivi dimostra che i giovani focusini apprezzano il nuovo stile di Focusjunior.it e amano godersi i contenuti non solo da PC ma anche da tablet e smartphone.
Fase 2: la community
Una sfida. Da brief, l’idea era quella di creare un piccolo Facebook dedicato ai ragazzi, ma i limiti connessi alle problematiche di privacy, sicurezza e moderazione dei contenuti erano veramente importanti, così come i constraint di budget.Anche qui la criticità è diventata opportunità, e abbiamo ricominciato dagli obiettivi strategici (piuttosto che dalla soluzione che il brief suggeriva) e dai vincoli per trovare il prodotto minimo di valore per il cliente ed i suoi utenti.
In questo caso il valore consisteva nel dare modo ai ragazzi di entrare in contatto tra loro, di poter avere una propria pagina con i contenuti più amati del sito di focusjunior.it, da cui seguire le attività dei focusini preferiti, ritrovare tutti i propri post, le storie, barzellette ed indovinelli pubblicati nel tempo e ricevere le notifiche dei commenti o dei “mi piace”.
In breve: permettere ai ragazzi di partecipare alla vita del mondo Focusjunior.it.
Così è nato il nuovo profilo utente avanzato.
Abbiamo scelto il pattern di follow e unfollow (simile a Twitter) per la creazione delle relazioni tra i ragazzi. L’abbiamo preferito al concetto di amicizia poichè più rapido, aperto e meno esposto a rischi di bullismo o problemi di timidezza che, tra ragazzi, potrebbero diventare bloccanti ed una possibile fonte di delusioni o piccoli traumi, oltre che ad essere possibile motivo di abbandono della community.
Il concetto di follow apre anche la possibilità di instaurare elementi base di competizione e gioco mostrando i focusini più seguiti. Elementi di coinvolgimento che nel tempo potranno evolvere in veri e propri pattern di gamification con premi e riconoscimenti.
Lo stesso ragionamento vale per il tracciamento dei contenuti pubblicati dai ragazzi: mostrandoli sulle loro pagine, si innesca nei follower la voglia di partecipare, di pubblicare a loro volta le storie, indovinelli, barzellette e perchè no, di battere gli amici postandone di più. Tutto ciò aumenta nei ragazzi la voglia di navigare, si traduce in click e permanenza sul sito, tutte KPI fondamentali per gli obiettivi strategici e di monetizzazione di G+J/M.
Da febbraio 2014 ad oggi è stato rilevato un consistente aumento degli utenti e delle pagine viste. A conferma dell’importanza dell’obiettivo strategico di permettere la fruizione da mobile, abbiamo potuto verificare che i ragazzi accedono sempre di più con tablet è smartphone, rendendo fondamentale il lavoro svolto in ottica responsive.
Valore oltre ai risultati. Il lavoro day by day: user stories, iteration meeting, iterazioni e team agili che scardinano una mentalità waterfall basata su Gantt.
Lavorando costantemente in team con il cliente, insieme ad Ideato, abbiamo a poco a poco introdotto elementi di metodologie agili in un contesto tradizionalmente legato a meccanismi waterfall di gestione dei progetti e a strutture a silos, abituati al “visto, si stampi”. Benchè imperfetto, siamo riusciti a mettere in piedi un processo agile fatto di appuntamenti costanti che permettessero di avere sempre sotto l’occhio di tutti l’andamento del progetto, dando modo ai vari stakeholders di esprimere bisogni e perplessità, passando da un roadmap predefinita e rigida ad una più flessibile e che accoglie il cambiamento.
Al termine della prima fase, quella editoriale, abbiamo ospitato il team nel nostro studio per fare una retrospettiva che esplicitasse pain points e successi di quanto svolto fino a lì, in modo da porre basi migliori e più consapevoli per la seconda parte del progetto. Cercando di dare al team strumenti efficaci per affrontare il progetto, abbiamo apportato implicitamente elementi di cultura lean in un’azienda abituata a ragionare in maniera waterfall ed il risultato è stato che cliente è diventato, a tutti gli effetti, parte attiva nel processo di design.
Focusjunior.it non è stato affatto un gioco da ragazzi :)
