it

Accredia – Digital Trasformation

L’Ente Italiano di Accreditamento // 2016-2017

Accredia è l’unico Ente designato dal Governo italiano ad attestare competenza, indipendenza e imparzialità degli organismi che verificano la conformità di beni e servizi. Un progetto di co-design realizzato con tutto il team interno del committente, applicando tutti i passaggi fondamentali dello Human Centered Design.

Co-Design ~ Experience Design ~ Front-end Visita il sito

Il cliente


Il progetto parte dalla volontà di veicolare al meglio il concetto dell’accreditamento, strumento necessario per garantire prodotti e servizi certificati da soggetti competenti e imparziali.

Necessario quindi il passaggio a un nuovo portale costruito sui bisogni degli utenti, frutto del lavoro di un Team allargato, che ha visto nois3 nel ruolo di realizzatori, ma anche di facilitatori.

Cliente Immagine

Context Assessment


Abbiamo iniziato con l’analisi del traffico del sito attuale (analytics), che ci ha fornito dati molto utili a capire la user journey sulla piattaforma ereditata. Un dato interessante emerso è legato alla posizione di due call to action: Documenti e Banche Dati. Si sono indagati quindi gli intenti di ricerca (search intent) cercando di mettere a sistema le parole chiave con i contenuti del sito.

Essendo Accredia l’Ente unico nazionale il concetto di benchmark sui competitor è venuto a cadere, ma abbiamo impostato una ricerca competitiva che ci permettesse di conoscere gli approcci altrui per avere un terreno di comparazione: in questo caso abbiamo analizzato gli Enti omologhi esteri, da cui abbiamo mutuato delle necessità specifiche sull’organizzazione del contenuto.

we love details - this is a zoom for this web view

Discovery Workshop


A valle del lavoro di analisi sono seguite le diverse attività del Discovery Workshop: tecniche e metodologie di co-design, inclusive e partecipative, per capire il contesto e realizzare soluzioni compatibili e soddisfacenti per gli utenti finali.

Nel caso in questione sono stati affrontati due Discovery Workshop in due diverse città, in cui abbiamo realizzato le stesse attività per dare coerenza ai risultati.

Discovery Workshop Image

Information Architecture


Dalle interviste qualitative a utenti e stakeholder principali con i quali interagisce l’Ente, abbiamo raccolto diversi insight per la creazione di Personas e User Story.  Seguendo le linee guida prodotte e dopo una fase di Content Inventory, abbiamo progettato l’Information Architecture: definito i diversi tipi di contenuto necessari (Content type) con relativi campi, caratteristiche (Custom Field) e tassonomie (Taxonomy), la mappa del sito con i menu da utilizzare in ogni sezione, e infine strutturato l’essenza dei vari tipi di pagina, concentrandoci sulla necessità di assolvere e rispondere alle User Story che abbiamo individuato come prioritarie.

Information Architecture

Wireframe


Creando spesso progetti digitali basati su sistemi di gestione di contenuto (CMS), per noi è impossibile prevedere le possibili declinazioni strutturali e visive di un progetto.

La fase di wireframing infatti è quella in cui il lavoro fatto sull’IA e sulla scrittura dei contenuti viene utilizzato per mettere a servizio gli spazi gerarchicamente organizzati del contenuto stesso, e non viceversa.

we love details - this is a zoom for this web view

Atomic Design


Il Design System sviluppato è partito dagli elementi base della Interfaccia Utente (UI), coerentemente con il manuale di Brand – opportunamente declinato per le applicazioni Digitali. Siamo poi andati a creare molecole di elementi armoniosamente composte (Widget) che potessero funzionare visivamente, per creare pagine intere che assolvessero alle esigenze comunicative, rispettassero la gerarchia delle informazioni e aiutassero le persone a trovare le informazioni ricercate.

we love details - this is a zoom for this web view
Atomic Design Image

Test di Usabilità


Le varie fasi del processo di progettazione sono state messe alla prova in due diverse sessioni di test di usabilità. Abbiamo somministrato ad alcuni utenti (interni ed esterni) dei task e raccolto indicazioni di miglioramento, sia di interazione che di labeling (etichette di navigazione).

we love details - this is a zoom for this web view

Glitch


La styleguide diventa un vero e proprio Tema per il CMS WordPress, grazie al nostro tema base Glitch. Questo permette una grande flessibilità e modularità, in quanto tutte le pagine possono essere composte dai vari widget già predisposti. I widget permettono all’editore di inserire solo le informazioni necessarie senza il rischio di rompere il design.

Glitch Image 1
Glitch Image 2

Ti piace come lavoriamo? Contattaci!

Passa a trovarci anche su Facebook e Twitter.
Please, rotate the screen
or view the website on other screen.