La scuola online di italiano by Treccani

Definire il progetto

Al timone di Giulia c’è un amico di vecchia data: Matteo Colò, già fondatore e CEO di Wanderio e Diana Marano, in precedenza Executive Director di una scuola di italiano a San Francisco. Matteo e Diana hanno scelto Moze per lo sviluppo della piattaforma digitale di Giulia, chiedendoci di aiutare il loro team nella progettazione dell’esperienza utente e nello sviluppo full-stack del sito web e-commerce.

Dovevamo comprendere innanzitutto il percorso dell’utente e i processi operativi da digitalizzare, così da facilitare il lavoro dello staff e degli insegnanti. Abbiamo deciso di partire con un Co-design Workshop, il processo che abbiamo creato in Moze dopo anni di esperienza nell’accompagnare imprenditori nella progettazione di un nuovo prodotto digitale e nel compiere le scelte più adatte al suo sviluppo.

Attraverso sessioni di co-progettazione svolte in videoconferenza, abbiamo approfondito il contesto e gli obiettivi del progetto e definito i requisiti operativi di studenti, insegnanti e staff amministrativo. Questo ci ha permesso di individuare la soluzione tecnologica più appropriata per un primo rilascio e di predisporre un piano di lavoro Agile, organizzato in sprint.

Progetto a forfait? Meglio gli sprint.

Uno tech stack innovativo per partire Lean

Il team di Giulia sa che una startup deve essere veloce. Abbiamo ragionato con loro per capire quale fosse lo stack tecnologico in grado di abilitare la scuola a vendere e gestire lezioni online in modo rapido e senza eccessive complicazioni.

Un gestionale senza intoppi: Airtable. Quale back office utilizzare per gestire le informazioni delle classi, dei clienti e degli insegnanti? Anziché imbarcarsi in un lungo percorso per trovare il software gestionale più adatto, il team di Giulia ha proposto di usare Airtable, una piattaforma low-code che permette di realizzare applicazioni interne ed interagire con i suoi dati tramite API.

Fare e-commerce low-code: Next.js, Airtable API e Stripe

Accettare subito pagamenti online. Stripe Checkout è la soluzione low-code per creare pagine di pagamento personalizzate ospitate su Stripe. È altamente customizzabile attraverso le sue API e consente di accettare una grande quantità di metodi di pagamento.

Una piattaforma per l’apprendimento: Disco. Volevamo dare agli studenti la possibilità di disporre di una piattaforma di e-learning completa, arricchita da funzionalità di interazione tra colleghi e insegnanti tramite messaggistica. Abbiamo scelto Disco, un servizio Cloud personalizzabile che offre nativamente molte di queste funzionalità.

Un sito web dalle grandi potenzialità di integrazione e con performance eccezionali: Next.js e Vercel. Per sviluppare il sito e-commerce abbiamo scelto Next.js, un framework open source che estende React. È una tecnologia altamente flessibile che consente di beneficiare nativamente di:

• Supporto nativo per l’indicizzazione dei motori di ricerca grazie al Server Side Rendering e all’Incremental Static Regeneration.
• Performance eccellenti grazie al contenuto staticizzato e offerto sulla CDN di Vercel.
• Capacità di sviluppo server in Node.js grazie alle funzioni serverless. Da un punto di vista architetturale, queste funzioni sono state essenziali per interagire con le API di Airtable e con le API server-side di Stripe Checkout.

Un CMS flessibile e potente. Sanity è una piattaforma Cloud che consente un’altissima personalizzazione della struttura del contenuto. Sanity si caratterizza per l’approccio headless, che consente di realizzare una UX totalmente custom, e per il modello SaaS, che riduce i costi di manutenzione.

CMS tradizionale vs headless

Progettare la Brand Identity di una startup tra tradizione e innovazione

Giulia partiva da zero ed era necessario definire rapidamente un logo, la tipografia, lo schema colori e l’immaginario visivo del brand. Come progettare al meglio una nuova identità? Come comunicare in modo attrattivo l’esperienza di apprendimento della lingua italiana, conciliando gli elementi di innovazione digitale e il supporto istituzionale di un marchio del calibro di Treccani?

Abbiamo scelto di costruire la personalità del brand Giulia coniugando uno stile elegante e raffinato con elementi visivi giocosi e leggeri. Ne è nata un’identità femminile, capace di parlare con tono amichevole ma non senza quel tocco di autorevolezza proprio del brand Treccani. 

Abbiamo scelto come carattere tipografico primario MADE Mirage, un serif moderno ed elegante, e progettato una palette cromatica ricca di sfumature, dai toni caldi e accoglienti. 

Abbiamo incentrato il linguaggio visivo sulla figura umana e su aspetti iconici dell’Italia e dello stile di vita italiano, per rendere desiderabile il brand permettendo alle persone di immedesimarsi in esso. A questi elementi fotografici fanno da contorno illustrazioni delicate, che aiutano a immaginare un percorso di apprendimento piacevole e leggero.

Il sito e-commerce: raccontare la scuola

Giulia offre un servizio digitale: abbiamo scelto di dare ampia rilevanza all’illustrazione di un corso online, per far immedesimare da subito l’utente in quella che sarà la sua futura esperienza di apprendimento. Allo stesso tempo, abbiamo inserito nella home page alcuni elementi visivi capaci di costituire un forte richiamo alla presenza istituzionale di Treccani, che si lega perfettamente alla narrazione culturale del nostro paese.

La presentazione dei corsi e l’acquisto online

I corsi di italiano vengono erogati tramite lezioni online di gruppo. Ciascun corso dura tre mesi e si svolge sempre in un determinato giorno e orario, dal lunedì al sabato. Abbiamo progettato dei filtri in grado di facilitare all’utente la scelta del giorno della settimana e della fascia oraria preferiti. I risultati vengono esposti in modo dinamico, in base al fuso orario dell’utente rilevato automaticamente dal sito. L’utente è poi in grado di completare l’acquisto in maniera estremamente intuitiva, grazie alla pagina di checkout implementata tramite Stripe.