Animality
Consulenza e progettazione di siti web
Informazioni sul Progetto Animality e sul nostro ruolo
Il Progetto Animality nasce dalla passione della Fondazione Centaurus per la protezione degli animali e dal desiderio di creare uno spazio online che colleghi i centri per il benessere degli animali in tutto il mondo. L’obiettivo di questa piattaforma educativa benefica è condividere materiali video che documentino gli sforzi per il benessere degli animali, senza confini, su scala globale. Tuttavia, affinché questa visione diventasse realtà, il primo passo era necessario: creare un sito web che presentasse gli obiettivi del progetto.
Maggiori informazioni sulla piattaforma stessa nel nostro caso di studio: Animality_piattaforma di streaming video e applicazione mobile.
Fase 1: Analisi dei bisogni e delle funzioni
Data la natura prosociale ed educativa del progetto, abbiamo sviluppato il brief di progettazione attraverso workshop. Abbiamo esplorato i bisogni 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 desiderano raggiungere e perché investono tempo e denaro nell’aiutare gli altri. La fase di analisi intensiva si traduce in genere in mappe mentali, diagrammi di flusso utente e nella creazione di idee per funzionalità uniche.
Fase 2: Modellare le soluzioni in base alle esigenze delle singole personalità
L’obiettivo del workshop era progettare un sito web che fungesse da spazio per costruire le prime connessioni emotive di Animality con gli utenti. Abbiamo riflettuto su come presentare il progetto, come attirare l’attenzione e come mantenere vivo l’interesse fino al lancio della piattaforma su larga scala.
Persona A: Potenziali donatori
Persona B: Centri di soccorso per animali e creatori di contenuti
Persona C: Parti interessate come media, potenziali sponsor, agenzie di pubbliche relazioni, potenziali
Dopo aver analizzato passo dopo passo le esigenze delle singole Persona, abbiamo iniziato a pianificare gli argomenti dei contenuti.
Fase 3: Dagli schizzi alla struttura – Mockup a bassa fedeltà e design della homepage
Abbiamo trasformato le informazioni raccolte in precedenza in schizzi iniziali: sono stati creati mockup a bassa fedeltà che ci hanno permesso di testare rapidamente la struttura della pagina e la logica dei contenuti. Ci siamo concentrati principalmente sulla homepage, poiché doveva essere il primo passo per introdurre gli utenti al mondo di Animality. Nessun fronzolo superfluo: solo griglie in bianco e nero che mostravano ciò che era veramente importante.
Prototipo desktop cliccabile ad alta fedeltà
Dopo aver approvato le versioni home (desktop e mobile), abbiamo progettato 22 visualizzazioni di sottopagine uniche e 13 visualizzazioni aggiuntive. A questo punto, il sito web ha iniziato ad apparire come previsto, con la tipografia, i colori e lo stile che avevamo in mente fin dall’inizio, nonché i presupposti funzionali.
Grazie alle visualizzazioni cliccabili, siamo stati in grado di vedere come gli utenti avrebbero navigato nel sito, cosa avrebbe catturato la loro attenzione e dove avrebbero potuto perdersi. Il prototipo funge da strumento di test e documentazione e costituisce la base per l’implementazione.
Funzionalità del sito web prima del lancio della piattaforma:
- Un ampio blog che offre un’anteprima dei contenuti che verranno pubblicati dopo il lancio della piattaforma.
- Un modulo di gestione dei webinar che consente un migliore contatto con i partecipanti, l’organizzazione di webinar e la creazione di database dei partecipanti.
- Una newsletter integrata con il database di gestione del consenso, in linea con i requisiti del GDPR.
- Un modulo di carriera che incoraggia i centri di tutto il mondo e i creatori di contenuti a collaborare con Animality.
- Una “Ideas Box” è uno spazio in cui ogni utente volontario può contribuire proponendo una soluzione interessante per gli animali.
Mockup desktop
Abbiamo progettato il layout del sito web per il progetto Animality. Il nostro compito non era solo quello di creare il design visivo del sito, ma anche di proporre le funzionalità necessarie per il lancio e lo sviluppo del progetto, che potessero essere implementate nelle fasi successive. Siamo stati anche responsabili dell’implementazione del sito, gestita dal nostro team di sviluppo eFresh.
Prototipo mobile cliccabile e ad alta fedeltà
La versione mobile è stata fondamentale per l’intero progetto, poiché Animality si rivolge a persone che non siedono necessariamente alla scrivania. Volevamo che rappresentasse visivamente il divertimento, una piacevole evasione, un mondo migliore per loro, avvicinandosi funzionalmente alla semplicità delle app mobili.
Per noi, un prototipo mobile non è solo una questione di scalabilità: è tutta un’altra storia. Abbiamo dato priorità diverse rispetto alla versione desktop e le interazioni sono state gestite in modo diverso. Volevamo che il sito fosse leggero, veloce e intuitivo, anche in movimento, tra una riunione e l’altra o mentre si recavano al rifugio.
Il prototipo cliccabile ci ha permesso di vedere come gli utenti percepiscono il flusso mobile. Dove cliccano? Cosa saltano? E cosa innesca la risposta “OK, funziona”? Starà a voi giudicare se funziona bene.
Mockup per dispositivi mobili
Nell’era del predominio di smartphone e tablet, garantire agli utenti un accesso agevole alla piattaforma in qualsiasi condizione era una priorità.
Nella progettazione di Animality, un elemento chiave è stato creare un’interfaccia intuitiva ed esteticamente gradevole, adatta ai dispositivi mobili. Questo garantisce un’esperienza fluida e intuitiva su qualsiasi dispositivo.
Documentazione di supporto
Dietro ogni interfaccia ben progettata si nasconde qualcosa di meno spettacolare, ma cruciale: la documentazione di implementazione. Nel nostro lavoro, in genere include:
Specifiche del contenuto – ovvero descrivere allo sviluppatore quali sono le linee guida tecniche per la creazione di contenitori di testo (numero di caratteri, comportamento, ad esempio compressione-espansione), definendo le dimensioni di foto e video (dimensioni, risoluzione, dimensione massima del file).
Specifica modificabile-non modificabile – una descrizione destinata sia agli sviluppatori che al Cliente, che specifica quali campi saranno modificabili e implementabili dal pannello di amministrazione (direttamente dal dipendente del Cliente) e quali richiederanno l’eventuale assistenza dello sviluppatore
Specifiche di integrazione – una descrizione dell’integrazione con sistemi esterni. Nel caso di Animality, abbiamo dovuto descrivere le regole per l’integrazione con i sistemi di pagamento internazionali (inclusi PayPal e PayU)
Sistema di progettazione – il team UX_UI ha sviluppato un sistema di progettazione per la piattaforma e l’app. Per garantire la coerenza in tutto il sito web, abbiamo utilizzato le stesse regole per l’utilizzo di pulsanti, la creazione di sezioni e la grafica.
hai una visione che vuoi realizzare?
Contattaci e ti aiuteremo a costruire un marchio che conquisterà il mercato.