Tutti i contenuti di questo progetto sono proprietà di
Belt School
Overview
- Ruolo
- UX/UI designer
- Team
- SEO
- Copywriters
- Developers
- Tool
- Figma
- Adobe Creative Cloud
- Elementor
- Link
- Live sito web
Problema
Belt School è una scuola privata di inglese di Perugia. Tutto parte dal posizionamento del vecchio sito e dalla SEO: per posizionarsi meglio serviva una struttura nuova, leggibile da Google e dagli agenti AI. Il design andava ripensato di conseguenza. I testi stavano sopra forme diagonali e riquadri colorati, e le informazioni importanti non arrivavano subito. Il tutto senza allontanarsi dai colori e dall'identità della scuola.
Soluzione
Abbiamo rifatto il sito insieme al team SEO, che ha costruito sitemap, parole chiave e nuove pagine. Su quella base ho progettato struttura e interfaccia puntando a un'esperienza più immediata, intuitiva e leggibile. I colori e l'identità sono gli stessi, ma non ci sono più forme diagonali o riquadri dietro i titoli. Le tabelle, fitte di contenuto, restano leggibili anche su mobile.
Contesto e cliente
Chi è Belt School
Belt School è una scuola privata di inglese di Perugia, attiva in Umbria dal 1990. Organizza corsi per bambini, ragazzi e adulti, in sede e online, e prepara agli esami di certificazione: per Pearson e Trinity è anche ente certificatore accreditato. Accanto ai corsi ci sono campus e vacanze studio, formazione per scuole e aziende e convenzioni con enti pubblici e ordini professionali.
Obiettivi del progetto
- Struttura SEO-oriented, costruita sulla sitemap del team SEO per migliorare il posizionamento del sito.
- Leggibilità per persone, Google e agenti AI, togliendo forme diagonali e riquadri dietro i titoli.
- Mantenere colori e identità di Belt School, senza allontanarsi troppo dal sito precedente.
- Informazioni chiave subito evidenti, grazie a una gerarchia dei contenuti più netta.
- Tabelle leggibili anche su mobile, nonostante la quantità di contenuto.
Analisi e punto di partenza
Il vecchio sito
Il vecchio sito aveva un'identità visiva forte: blu e rosso corallo, foto di aule e attività e un taglio grafico molto riconoscibile, che il cliente voleva mantenere. Il problema era come questa identità si sovrapponeva alla lettura dei contenuti, e a guardarlo bene le ragioni principali sono quattro:
- Testo su forme e riquadri. I titoli stavano in maiuscolo dentro riquadri bianchi o rossi, e i testi si appoggiavano su fondi tagliati in diagonale e su fasce colorate. Riconoscibile ma faticoso da leggere.
- Paragrafi fitti su fondo scuro. In pagine come Chi siamo e nei corsi per adulti e ragazzi il testo è piccolo, bianco su blu, e si accumula in blocchi lunghi.
- Sempre la stessa apertura. Nella maggior parte delle pagine si parte con la foto, il pannello blu inclinato e la fascia rossa con i contatti. Cambiano titolo e immagine, il resto resta uguale.
- Contenuti da tabella senza tabella. Formule e orari del Summer Camp, frequenza e durata dei corsi, la giornata tipo: sono dati da confrontare, ma stavano in box, card ed elenchi puntati.
Il punto di partenza: il team SEO
A monte c'è il lavoro del team SEO: la ricerca, la sitemap con parole chiave, le pagine nuove, il blog e delle tabelle pensate per essere lette bene anche dagli agenti AI. Il design è partito da lì.
Struttura e navigazione
Con la sitemap del team SEO le pagine sono cresciute parecchio, tra sottomenu e pagine interne. Il sito è costruito su Elementor, quindi il design doveva stare dentro i suoi widget e le sue regole, con un po' di CSS dove serviva. Le parti che hanno richiesto più lavoro sono la struttura dell'header, da cui passano tutte le pagine, blog e le tabelle.
Per il team SEO le tabelle erano fondamentali, perché ci dovevano fare dei test, e alcune erano davvero piene di contenuto. Il problema era il responsive: su mobile, così com'erano, non si leggevano.
Ho provato diverse strade partendo dagli sketch, confrontandole con il team SEO e con il developer, per capire limiti ed eventuali problemi a cui non stavo pensando. Dove si poteva, abbiamo accorciato i testi.
Le tab non funzionavano bene ovunque: con parole chiave così lunghe, in certe tabelle la disposizione diventava illeggibile.
Abbiamo scartato anche la prima colonna fissa con scorrimento orizzontale, perché le righe si allungavano troppo.
Alla fine abbiamo tenuto un solo tipo di tabella su desktop e due varianti su mobile. In entrambe ogni riga diventa una card: con le tab dove funzionano, una sotto l'altra dove no. La pagina mobile è più lunga del previsto, ma il team SEO aveva bisogno di vedere tutte le parole chiave.
Il menu principale ha sette voci, tre con sottomenu, e in alto una barra con orari, contatti e quattro link di servizio. In tutto, più di venti pagine raggiungibili.
La logica: sotto, più in evidenza, i servizi principali, sopra, le pagine di contesto e informazione. Chi siamo e Test online fanno eccezione, invertiti per volere del cliente, che ha preferito dare risalto al presentarsi.
Su mobile diventa un hamburger e la logica resta, con una linea a separare le voci principali dalle altre. Il Test online passa da link nella barra in alto a pulsante accanto all'hamburger.
A lavori avviati abbiamo aggiunto al blog una pagina per ogni autore e autrice: Belt School è molto presente sui social, dove le persone si vedono di continuo, e raccontare chi scrive aiuta a creare fiducia e a far tornare i lettori.
UI & soluzione finale
Tipografia e colori
Font e colori di Belt School arrivano dalla brand identity e il cliente voleva mantenerli: Raleway per tutti i testi, il blu, il corallo e due neutri chiari. Il mio lavoro è stato decidere come usarli sul nuovo sito: una scala tipografica per desktop, laptop, tablet e mobile e una regola semplice sui colori, cioè testo bianco sui fondi blu e corallo, mai corallo sul blu.
Rosso corallo #B94C4C
Blu #1C3D70
Grigio chiaro #F6F6F6
Bianco #FFFFFF
Soluzione finale
Il sito è nato sulla sitemap costruita dal team SEO, pensata per essere letta bene da persone, Google e agenti AI. Ho tradotto quella struttura in un'interfaccia più diretta: via le forme diagonali e i riquadri dietro i titoli, informazioni chiave subito visibili nelle varie sezioni, e un header che mette in evidenza i servizi principali lasciando più in alto le pagine di contesto.
Colori e identità di Belt School restano quelli di sempre. Il lavoro più delicato sono state le tabelle: diventano card su mobile, con le tab dove il contenuto lo permette, per restare leggibili anche dove le parole chiave sono tante.
Mockup
Risultati e riflessioni finali
È ancora presto per avere dati reali: al team SEO serve tempo per raccogliere numeri e fare le prime analisi. Se e quando arrivano, questa parte si aggiorna.
Guardando indietro, il compromesso di cui vado più fiero è anche quello che mi ha convinto meno all'inizio: trasformare le tabelle in card su mobile ha risolto la leggibilità, ma ha allungato la pagina più di quanto avrei voluto. Era la scelta giusta per le esigenze del team SEO, e i test con loro e con il developer mi hanno aiutato a fidarmi di una soluzione che da sola non avrei scelto subito.
