Animality
Implementazione del sito web per un’iniziativa globale a favore degli animali
Sul progetto Animality e sul nostro ruolo
Il progetto Animality è nato dalla passione della Fondazione Centaurus per la protezione degli animali e dal desiderio di creare uno spazio online che mettesse in collegamento i centri di assistenza agli animali di tutto il mondo. L’obiettivo di questa piattaforma educativa e benefica è fornire contenuti video che documentino le attività a favore degli animali, senza confini e su scala globale. Tuttavia, per trasformare questa visione in realtà, era necessario compiere il primo passo: creare un sito web che presentasse i principi e le finalità del progetto.
Ulteriori dettagli sulla piattaforma nel nostro case study:
https://www.efresh.com.pl/portfolio/animality/
Fase 1: Analisi delle esigenze e delle funzionalità
Data la natura prosociale ed educativa del progetto, abbiamo sviluppato il brief di progettazione attraverso workshop. Abbiamo esplorato le esigenze in due tipi di workshop: in primo luogo, lavorando con i dipendenti della Centaurus Foundation che si prendono cura degli animali da oltre 18 anni; e in secondo luogo, parlando con i donatori presenti nel database della Fondazione, che conta oltre 1 milione di donatori. Questo ci ha permesso di comprendere cosa li motiva, quali obiettivi vogliono raggiungere e perché investono tempo e denaro nell’aiutare gli altri. La fase di analisi intensiva si traduce in genere in mappe mentali, flussi utente e nella creazione di idee per funzionalità uniche.
Fase 2: Modellazione delle soluzioni in base alle esigenze delle singole personas
L’obiettivo definito nei workshop era progettare un sito web come spazio in grado di creare i primi legami emotivi tra Animality e gli utenti. Ci siamo concentrati su come presentare il progetto, catturare l’attenzione e mantenere vivo l’interesse prima del lancio completo della piattaforma.
Persona A: potenziali donatori
Persona B: centri di assistenza agli animali e creatori di contenuti
Persona C: stakeholder come media, potenziali sponsor e agenzie PR
Dopo aver analizzato passo passo le esigenze di ciascuna persona, abbiamo iniziato a pianificare la tematica dei contenuti.
Fase 3: Dallo schizzo alla struttura – mockup low-fidelity e progettazione della homepage
Le conclusioni raccolte in precedenza sono state trasformate nei primi schizzi, generando mockup low-fidelity che hanno permesso di testare rapidamente la struttura del sito e la logica dei contenuti. L’attenzione principale è stata rivolta alla homepage, poiché è il primo punto di contatto dell’utente con il mondo Animality. Senza elementi superflui: solo griglie in bianco e nero per evidenziare ciò che è realmente importante.
Prototipo desktop high-fidelity desktop
Dopo l’approvazione della homepage (desktop e mobile), abbiamo realizzato 22 view uniche di sottopagine e 13 view aggiuntive. A questo punto, il sito ha iniziato a mostrarsi come sarebbe dovuto apparire nella realtà, con tipografia, colori e stile definiti fin dall’inizio, coerenti con le specifiche funzionali.
Grazie ai view cliccabili, abbiamo potuto osservare come gli utenti si muovono all’interno del sito, cosa cattura la loro attenzione e dove potrebbero perdersi. Il prototipo funge da strumento di test e documentazione, costituendo la base per l’implementazione.
Funzionalità del sito web prima del lancio della piattaforma:
- Blog avanzato – un’anteprima dei contenuti che saranno pubblicati una volta avviata la piattaforma
- Modulo di gestione dei webinar – per migliorare il contatto con i partecipanti, organizzare eventi e costruire database di iscritti
- Newsletter – integrata con un sistema di gestione dei consensi conforme al GDPR
- Modulo carriere – per incentivare i centri e i creatori di contenuti di tutto il mondo a collaborare con Animality
- “Idea Box” – uno spazio in cui ogni utente-volontario può proporre idee e iniziative a favore degli animali
Progettazione dei mockup per la versione desktop
Abbiamo progettato il layout del sito web che presenta il progetto Animality. Il nostro compito non si limitava alla parte visiva, ma includeva anche la proposta di funzionalità essenziali per la fase di lancio e di funzionalità sviluppabili in fasi successive. Siamo stati inoltre responsabili dell’implementazione del sito, affidata al nostro team di sviluppo eFresh.
Prototipo mobile high-fidelity interattivo
Dal punto di vista visivo, volevamo creare un’esperienza divertente e immersiva, una sorta di pausa in un mondo migliore, mentre dal punto di vista funzionale abbiamo puntato alla semplicità tipica delle app mobili.
Per noi, il prototipo mobile non è stato un semplice ridimensionamento della versione desktop: è una storia a sé. Abbiamo ridefinito le priorità, adattato le interazioni e progettato un’esperienza leggera, veloce e intuitiva, anche in movimento, tra un incontro e l’altro o durante il tragitto verso un rifugio.
Il prototipo interattivo ha permesso di verificare come gli utenti percepiscono il flusso mobile: dove cliccano, cosa ignorano e cosa genera l’effetto “ok, funziona”. La valutazione finale sull’esperienza resta naturalmente a voi.
Progettazione dei mockup per la versione mobile
Nell’era dominata da smartphone e tablet, la priorità era garantire agli utenti un accesso comodo alla piattaforma in ogni contesto.
Durante la progettazione di Animality, un elemento chiave è stato creare un interfaccia intuitiva ed esteticamente gradevole, ottimizzata per dispositivi mobili. In questo modo, Animality assicura un’esperienza fluida e piacevole su qualsiasi device.
Implementazione delle versioni desktop e mobile
A causa della natura specifica del progetto (il sito web rappresentava solo una parte dell’ecosistema Animality), il processo di sviluppo ha richiesto circa 4 mesi. Il sito fungeva da vetrina della piattaforma, rimanendo accessibile prima del login.
Il lavoro di implementazione è stato suddiviso in sprint (ogni sprint aveva 5 giorni lavorativi), di cui: 4 giorni lavorativi per gli sviluppatori, 2-4 ore per i test di controllo qualità da parte del tester, 2-4 ore per le correzioni e 4 ore per i test lato cliente. In ogni sprint, abbiamo pianificato un breve periodo di tempo per le correzioni, dato l’ambito di lavoro relativamente ridotto; in caso di completamento più rapido, abbiamo avviato lo sprint successivo.
Gestione e controllo dei progressi:
- Nel sistema Monday.com abbiamo creato una board condivisa con Cliente e team, per monitorare l’avanzamento del progetto
- Il Cliente revisionava ogni sprint e forniva feedback nei commenti dedicati
- La chiusura dello sprint, il protocollo di consegna e la rendicontazione dei lavori avvenivano interamente da remoto
- Al termine dell’implementazione completa, ci sono voluti circa 4-5 giorni per testare la versione BETA, pronta per l’inserimento dei contenuti
Documentazione integrativa o aggiuntiva
Dietro ogni interfaccia ben progettata c’è sempre qualcosa di meno visibile, ma fondamentale: la documentazione di implementazione. Nel nostro lavoro, di solito comprende:
Specifiche dei contenuti – indicazioni per i developer su come costruire i contenitori di testo (numero di caratteri, comportamenti come “espandi/riduci”), definizione delle dimensioni e risoluzioni di immagini e video, dimensioni massime dei file
Specifiche campi editabili/non editabili – indicazioni rivolte sia ai developer che al Cliente, per stabilire quali campi possono essere modificati direttamente dal pannello amministrativo e quali richiedono l’intervento di un developer
Specifiche delle integrazioni – descrizione delle connessioni con sistemi esterni; per Animality abbiamo dettagliato le regole di integrazione con sistemi di pagamento internazionali (ad esempio PayPal, PayU)
Design system – il team UX/UI ha creato un design system per la piattaforma e l’app, assicurando coerenza visiva su tutto il sito web: uso dei bottoni, costruzione delle sezioni e gestione delle grafiche
Preparazione per la pubblicazione del sito web
In ogni implementazione, il processo di preparazione alla pubblicazione è quasi sempre simile. Il nostro obiettivo è garantire la qualità e prevenire errori nel passaggio alla versione LIVE.
- Versione BETA – sviluppata come ambiente completo per l’uso da parte di amministratori e redattori del Cliente, con tutte le funzionalità. Su questa versione il Cliente ha lavorato per completare i contenuti
- Formazione e supporto per l’amministratore – durante la fase BETA forniamo formazione standard e assistenza al team del Cliente per qualsiasi problema
- Inserimento dei contenuti nelle versioni linguistiche – in questo caso la piattaforma è disponibile in due lingue
- Test manuali sull’ambiente di staging, inclusi moduli, link ai social media e altre integrazioni
- Ottimizzazione della velocità di caricamento del sito
- Ottimizzazione SEO, attivazione di database per remarketing e monitoraggio delle metriche del sito
Supporto tecnico e sviluppo
Offriamo sempre supporto post-implementazione, pianificando le attività di sviluppo con 3 mesi di anticipo, monitorando lo stato dei lavori e comunicando in modo continuo tramite il sistema Monday.com e incontrandoci periodicamente per workshop volti a migliorare il sito web creato.
Cosa garantiamo durante il supporto continuativo:
- Continuità della conoscenza del team – nonostante eventuali cambiamenti del personale nel corso di una lunga collaborazione,
- Design system / design lab / prototipi cliccabili – manteniamo i principali progetti grafici pronti per modifiche e sviluppi futuri,
- Ambiente di test 1:1 e repository del codice – conserviamo una copia del sistema nell’ambiente di test e gestiamo un archivio del codice,
- Aggiornamenti e manutenzione costante – assicuriamo aggiornamenti regolari e affidabilità del funzionamento.
Incluso nel prezzo del progetto: trasferimento completo dei diritti d’autore sui progetti e sul codice, con possibilità di apportare qualsiasi modifica.
Hai una visione che vuoi realizzare?
Contattaci e ti aiuteremo a costruire un marchio che conquisterà il mercato.