fbpx

APRE

Prima e unica realtà del suo genere in Italia, APRE Agenzia per la Promozione della Ricerca Europea, ha l’obiettivo di sostenere e agevolare la partecipazione italiana ai Programmi per il finanziamento di ricerca e innovazione (R&I) dell’Unione Europea, attraverso servizi di informazione, formazione e assistenza.
Dal 1990 opera come associazione senza scopo di lucro con finalità di interesse pubblico, per offrire supporto gratuito a chiunque ne faccia richiesta. Attualmente conta oltre 140 soci, tra i principali attori R&I nel panorama nazionale.
Per loro abbiamo operato un completo restyling e ridistribuito tutti i contenuti del loro vecchio sito, nell’ottica di migliorare l’user experience. I loro obiettivi principali erano promuovere il programma Quadro Ricerca & Innovazione e i servizi APRE ad esso collegato, promuovere le iscrizioni agli eventi APRE secondo un calendario sempre aggiornato e promuovere le iscrizioni ai loro corsi di formazione.

Cliente
APRE
Data
Aprile 2021
Sito web
Visita
Titolo_ANALISI E SVILUPPO

Sitemap

Come primo step, abbiamo analizzato in profondità la vecchia piattaforma per capire le nuove funzionalità che avremmo dovuto sviluppare ma soprattutto le criticità che andavano corrette e su cui era necessario intervenire.
Insieme al team di Graphic Design e Comunicazione, durante la fase di progettazione della struttura e wireframing ,abbiamo lavorato per rendere la nuova piattaforma user-friendly e mobile-first, cercando di mantenere il minor numero di pagine possibile nel menù principale di navigazione, proprio per rendere più semplice il percorso dell’utente.

La nuova piattaforma di APRE di conseguenza ha quindi subito una sostanziale novità a livello di configurazione rispetto al sito precedente: è ora un unico grande network che connette tra di loro i contenuti di APRE dai Programmi Quadro, creando – al momento – due altri siti su domini di terzo livello: Horizon 2020 e Horizon Europe.
Questi ultimi saranno immediatamente raggiungibili da una top bar sopra al menu principale (ancorato in alto e quindi sempre accessibile scorrendo le varie pagine) dove rimarranno in evidenza insieme all’accesso all’area riservata degli utenti registrati, riprogettata da capo anch’essa.

 

TECNOLOGIE UTILIZZATE

Framework: Bootstrap
Framework JS: GSAP, Backbone.js
Librerie Javascript: underscore.js, Lightbox, moment.js e jQuery
Plugin WP: Revolution Slider, GeoDirectory, ACF PRO e WPBakery (presente solo su alcune pagine gestite dagli operatori APRE)

 

CONNESSIONI API
Abbiamo lavorato all’introduzione delle connessioni attraverso API, fornite da terze parti, per la gestione e l’aggiornamento costante della sezione eventi, corsi di formazione, la modalità di login/modifica profilo/registrazione e le modalità di pagamento presenti durante l’iscrizioni a un nuovo corso.

gif prima dopo struttura sito

Qui sopra, il punto di partenza per la struttura immaginata del cliente e la struttura finale ragionata e rivista in ottica di UX e funzionalità

Immagine 5

Prima di iniziare a realizzare il design vero e proprio del nuovo sito, abbiamo analizzato la nuova brand identity

di APRE per creare una style guide che richiamasse con coerenza e logica tutti gli elementi e i colori istituzionali

dell’azienda declinandoli per il web e le esigenze proprie di un sito internet.
Questo documento riassuntivo ha aiutato l’intero team di lavoro a mantenere il fil rouge dell’identità visiva per

tutte le circa 40 pagine prototipate di un sito, questo, assai ramificato e con numerose pagine strutturate in modo

anche molto diverso tra loro per la natura dei contenuti trattati.

Style Guide

style guide points

 

 

 

1. le sezioni APREsoci e APREformazione sono da sempre aree caratterizzate rispettivamente dall’azzurro dal giallo.

2. area riservata e moduli di registrazione riviste anche nell’ottica di una buona privacy policy.

3. barra indicatrice della lunghezza della pagina, per sapere a colpo d’occhio a che punto si è con la lettura.

4. stile ed elementi visivi ripresi dalle pubblicazioni stampate e riadattati per header e footer.

5. le dimensioni dei caratteri per tutti i titoli, le didascalie e i paragrafi di testo nel sito, fanno fede a una scala tipografica definita a monte che stabilisce anche le gerarchie di contenuto.

palette e tipo
gif prima dopo homepage

Project Team

Creative Agency    Wider View
Client    APRE – Agenzia per la Promozione della Ricerca Europea
​​​​​​​
Account    Flavio Lenoci
Project Manager & UX Designer    Danilo Domenichetti
UI Designer & Web Designer    Sabrina Mencarelli
Front-end Developer    Roberto Rescigno, Tommaso Constantini
Back-end Developer    Sidrit Trandafili

Let's have a chat

For information, price quotation requests, collaboration or courses, do not hesitate to write!

Contact us