Lo sviluppo di un sito web è un processo che richiede una pianificazione meticolosa e una gestione efficace di diverse fasi e competenze.

Esaminerò in dettaglio le fasi principali di questo processo, attraverso la mia esperienza, dal kickoff meeting al go live, includendo le successive review e applicando il modello del Double Diamond.

Questo metodo guida la progettazione di prodotti, servizi o esperienze verso la realizzazione di soluzioni digitali che rispondano esattamente alle esigenze del cliente e del mercato.

 

Modello del Double Diamond

Il modello del Double Diamond è un processo di progettazione sviluppato dal British Design Council UK che suddivide il processo di design in quattro fasi:

1. Discover. Scoperta: fase (analitica divergente) di comprensione del problema e delle esigenze
2. Define. Definizione: fase (analitica convergente) di analisi, definizione del problema e requisiti di progetto
3. Develop. Sviluppo: fase (creativa divergente) di progettazione della soluzione
4. Deliver. Consegna: fase (creativa convergente) di controllo e testing

 

Questo approccio permette di esplorare ampiamente le soluzioni possibili (divergenza) e poi affinare e convergere verso la soluzione migliore (convergenza).

 

© Immagini: freepick e shutterstock

 

 

Definizione del problema attraverso una case history

In questo articolo esplorerò le fasi di sviluppo di un sito web attraverso la Case History del restyling del sito Accademia Bizantina.

Il principale problema, che ha portato il cliente alla decisione di avventurarsi nel restyling della piattaforma web, era una importante limitazione tecnologica nella gestione, facilità di aggiornamento e inserimento dei contenuti.

Questo problema è emerso durante la fase di Discovery, dove abbiamo approfondito le necessità operative e gli obiettivi strategici del progetto.

Non secondario, era in atto un completo redesign della Brand Identity, che richiedeva un aggiornamento di immagine stilistica che riflettesse le nuove scelte comunicative.

 

 

fase 1. Discover (kickoff meeting e customer discovery)

Il kickoff meeting rappresenta il punto di partenza del progetto. Il suo avvio.

Durante questa fase, vengono riuniti tutti gli stakeholder coinvolti per discutere gli obiettivi del sito, i requisiti, le aspettative e il contesto del progetto.

È fondamentale valutare sia le esigenze consapevoli, esplicitate dal cliente nel primo incontro commerciale ed riportate nell’offerta preliminare, sia esplorare quelle inconsapevoli che emergono solo attraverso un’analisi approfondita.

Indagare questa fase con attenzione permette di andare affondo alle esigenze e quindi aspettative del cliente ma anche di allineare l’offerta preliminare a quella esecutiva.

Vengono approfonditi i bisogni degli utenti finali attraverso riunioni di confronto tra gli stakeholder coinvolti, in particolare i responsabili della comunicazione e gestione del sito oltre ad una approfondita ricerca.

Comprende:

• interviste
• ricerche
• osservazioni del contesto
• domande

 

L’obiettivo è mantenere una mente aperta e curiosa per comprendere le necessità e i comportamenti degli utenti per progettare un’esperienza piacevole e soddisfacente per l’utente (UX).

 

Esempio pratico:

Durante il kickoff meeting per il redesign del sito Accademia Bizantina, abbiamo esaminato non solo i requisiti di funzionalità specifiche come la necessità di un calendario eventi e una sezione dedicata alla discografia, ma anche esigenze più sottili, come la necessità di trasmettere l’atmosfera unica delle loro performance attenendoci al restyling della nuova Brand Identity .

 

fase 2. Define (definizione della strategia e progettazione del design)

In questa fase, le informazioni raccolte vengono analizzate e sintetizzate in un documento per trarne conclusioni e definire chiaramente il problema e delineare i requisiti del progetto.
È qui che viene delineata una chiara comprensione di cosa deve essere fatto.

Comprende:

• analisi dei dati
• mappe dell’esperienza utente
• progettazione della soluzione

 

Progettazione del Design

Il design è una componente centrale, che richiede un’attenzione particolare ai dettagli e una visione strategica.

 

 

 

Per Accademia Bizantina, il design doveva riflettere l’eleganza e la tradizione dell’ensemble musicale, mantenendo al contempo una navigazione intuitiva e in linea con la nuova immagine.

In questa fase sono stati essenziali i momenti di confronto con la Creative Director che stava guidando il redesign della Brand Identity, per riuscire a ricreare un layout che integrasse le esigenze di comunicazione visiva a quelle informative.

Abbiamo sviluppato l’architettura dell’informazione attraverso un primo wireframe con Balsamiq e definito tutta la riprogettazione della struttura informativa.

Abbiamo poi progettato il layout grafico con Figma, permettendo al cliente di visualizzare e interagire con il prototipo del sito.

Durante questa fase, è stato essenziale raccogliere feedback continui dal cliente e dai collaboratori e iterare il design fino a raggiungere un equilibrio perfetto tra estetica e funzionalità.

 

 

fase 3. Develop (pianificazione della roadmap e sviluppo)

In questa fase, con una chiara comprensione delle esigenze del cliente e degli utenti, si definisce la roadmap dettagliata che suddivide il progetto in fasi con task temporali specifici assegnati al team.

Questa pianificazione include la definizione delle milestone, la distribuzione delle risorse e la gestione del budget.

Successivamente, si passa alla fase di sviluppo, dove il team tecnico trasforma il design in un sito web funzionale.

 

Comprende:

• pianificazione delle attività di sviluppo
• sviluppo della soluzione

 

 

Esempio pratico:

Per la progettazione del nuovo sito di Accademia Bizantina, ho pianificato lo sviluppo in sprint settimanali, utilizzando un approccio agile.

Il team di sviluppo ha lavorato sul backend per implementare un sistema di gestione dei Custom Post Type come gli eventi e la discografia, mentre il frontend si concentrava sui contenuti, il layout responsive e sull’ottimizzazione delle performance del sito.

Per la pianificazione del workflow e il controllo di gestione abbiamo utilizzato il gestionale di Project Management ClickUP unito a Everhour per una dettagliata reportistica di stato di avanzamento.

 

fase 4. Deliver (testing, go live e continuous improvement)

Una volta completato lo sviluppo, il sito passa attraverso una rigorosa fase di controllo e testing per identificare e risolvere eventuali bugfixing e problemi di performance.
Vengono eseguiti su differenti device test funzionali, di usabilità, dove necessario di sicurezza e di carico per garantire che il sito funzioni correttamente in ogni condizione.

Comprende:

• analisi dei risultati

Esempio pratico:

Per Accademia Bizantina, abbiamo condotto test di usabilità coinvolgendo il cliente e i suoi collaboratori.
Parallelamente, il team tecnico ha eseguito test funzionali e di performance per assicurarsi che il sito fosse correttamente ottimizzato e indicizzato.

 

Go Live

Dopo aver superato con successo la fase di testing, il sito è pronto per essere lanciato.
Questa fase include la migrazione del sito dall’ambiente di sviluppo a quello di produzione, la configurazione dei server e l’implementazione di eventuali strategie di lancio e marketing.

 

Esempio pratico:

Il go live del sito Accademia Bizantina è stato organizzato in modo che fosse coordinato al lancio delle attività di marketing gestite dal reparto comunicazione del cliente che includevano annunci su social media, email marketing e comunicati stampa.

Abbiamo implementato strumenti di analisi come Google Analytics, e altri strumenti di tracciamento per monitorare le performance del sito fin dal primo giorno.

 

Continuous Improvement

Il lavoro non si conclude con il go live.
È fondamentale monitorare costantemente le performance del sito e raccogliere feedback dagli utenti per identificare aree di miglioramento.

Questa fase include aggiornamenti regolari, aggiunta di nuove funzionalità e ottimizzazione continua, gestita con una collaborazione di assistenza tecnica continuativa.

 

 

Tempi e risorse per un progetto come Accademia Bizantina

Lo sviluppo di un sito web richiede un investimento significativo in termini di tempo, costi e risorse.

Può variare a seconda della complessità del sito.

Di seguito una panoramica di cosa aspettarsi:

Tempi di sviluppo del sito web Accademia Bizantina

• Kickoff Meeting e Customer Discovery: 8 settimane
• Progettazione del Design: 8 settimane
• Sviluppo: 8 settimane
• Testing e Go Live: 4 settimane
• Continuous Improvement: Continuo

La fase di sviluppo è preceduta da una fase di trattativa commerciale che puo durare anche mesi prima di concretizzarsi.

I tempi sono comprensivi delle attese di controllo e conferme di ogni step.

Team multidisciplinare minimo necessario per lo sviluppo di un sito web

• Project Manager: Gestisce il progetto e coordina il team
• UX/UI Designer: Progetta l’esperienza utente e l’interfaccia grafica del sito
• Sviluppatori Frontend e Backend: Realizzano lo sviluppo tecnico il sito
• Copy/Content Strategist: Cura i contenuti del sito
• SEO Specialist: Cura ottimizzazione e performance del sito in collaborazione con le figure piu tecniche
• Marketing Specialist: Pianifica le strategie di lancio e promozione

 

 

Risultato finale:

Lo sviluppo di un sito web è un processo continuo e iterativo che richiede una gestione attenta e una collaborazione efficace tra tutti gli stakeholder.

Il modello del Double Diamond è un valido strumento per assicurare che ogni fase del progetto sia attentamente esplorata e raffinata per ottenere i migliori risultati possibili.

Ogni fase del processo, dalla valutazione delle esigenze inconsapevoli durante il kickoff meeting al continuous improvement dopo il go live, è indispensabile per creare un prodotto che soddisfi non solo le aspettative del cliente, ma anche quelle degli utenti fruitori.

 

Il mio ruolo è assicurare che un approccio strategico e centrato sull’utente sia la chiave per la realizzazione efficace di un progetto digitale.

Per il progetto Accademia Bizantina mi sono occupata della gestione di tutto il processo di sviluppo come Project Manager in collaborazione col team operativo della digital agency SimpleNetworks.

 

Nel caso di Accademia Bizantina una attenta gestione del processo di sviluppo ha portato questi risultati:

1. Facilità di aggiornamento e inserimento dei contenuti

Prima del restyling, il sito presentava una gestione complessa e poco intuitiva per l’aggiornamento dei contenuti. Questo problema rendeva difficile per il team di Accademia mantenere il sito aggiornato con le ultime notizie, eventi e contenuti multimediali. Con il nuovo sito, abbiamo implementato un sistema di gestione dei contenuti (CMS) user-friendly, che permette una facile aggiunta e modifica dei contenuti senza richiedere competenze tecniche avanzate. Questo miglioramento ha aumentato l’efficienza operativa.

2. Miglioramento della User Experience (UX)

Il vecchio sito non offriva un’esperienza utente ottimale, con una navigazione poco intuitiva e un design non responsivo che non si adattava bene ai dispositivi mobili. Il restyling ha migliorato significativamente la UX, rendendo il sito facilmente navigabile e accessibile da qualsiasi dispositivo. Questo ha contribuito a migliorare l’engagement degli utenti e a ridurre il tasso di abbandono.

3. Branding e comunicazione visiva

Il design precedente del sito non rifletteva adeguatamente la nuova immagine di Accademia Bizantina.
Con il nuovo design, abbiamo creato un layout visivamente accattivante che integra la nuova Brand Identity alle scenografie delle loro esibizioni.
Questo ha rafforzato l’identità del brand e ha aiutato a comunicare meglio l’unicità dell’ensemble musicale.