Accredia: proudly powered by co-design & WordPress

ACCREDIA
+
PROUDLY POWERED BY CO-DESIGN & WORDPRESS
ACCREDIA - DIGITAL TRANSFORMATION

Carlo Frinolli
CEO + HEAD OF DESIGN
Experience Designer, Founder e CEO di
nois3, lavoro, insegno e vivo a Roma –
non necessariamente in quest’ordine.
Via Alberto da Giussano 62/D
00176 Roma (IT)
+39 06 29 66 60
@wearenois3
hello@nois3.it
www.nois3.it
@carlofrinolli
@carl0s_
@carlo.frinolli
c@nois3.it

“Accredia è l'Ente designato dal governo italiano ad
attestare la competenza, l'indipendenza e l'imparzialità
degli organismi e dei laboratori che veriﬁcano la conformità
dei beni e dei servizi alle norme.
—ACCREDIA.IT/CHI-SIAMO
Avete presente chi controlla il controllore?
Ecco.

DIGITAL DESIGN THINKING.
+
We design responsive websites
and digital strategies
to connect organizations
to their customers.

Introduzione
IL LAVORO SVOLTO AD OGGI
CONTEXT
ANALYSIS
RESEARCH & 
WORKSHOP
Da dove siamo partiti e dove ci troviamo oggi.
In questa breve presentazione percorriamo  
il lavoro svolto per la ristrutturazione  
e la rivisitazione del sito istituzionale  
di Accredia - Ente Italiano di Accreditamento.
INSPIRATION, MOOD &
INTERFACE DESIGN
INFORMATION 
ARCHITECTURE
WORDPRESS  
& FRONTEND DEVELOPMENT

PRIMA E DOPO
+
DA DOVE SIAMO PARTITI E PERCHÉ

Nonostante la veneranda età
siamo partiti nell’analisi da qui
cercando di capire cosa funzionasse
e cosa fosse migliorabile per gli utenti.
Il sito del 2009
STABILIRE UN PUNTO BASE PER I CONFRONTI

Everybody lies scrolls
“—HUGE - DESIGN AGENCY
We wanted to know how page design impacts these
user behaviors and to what extent visual cues help
users scroll below the fold.

Chartbeat, a data analytics provider, analysed data from 2 billion visits and found that
“66% of attention on a normal media page is spent below the fold.” - What You Think You
Know About the Web Is Wrong
Usability expert Jakob Nielsen’s eye-tracking studies show that while attention is
focused above the fold, people do scroll down, especially if the page is designed to
encourage scrolling. - Scrolling and Attention
Mito sul web: le persone non scrollano
LE RICERCHE DIMOSTRANO IL CONTRARIO!

“Ah quindi j’avete rifatto er sito…?
— ANONIMO DI ROMA SUD
No, direi non solo.
Il sito è la superﬁcie e ovviamente è fatto con WordPress.

MICROINTERACTIONS
USER FLOWS
& WIREFRAMING
INFORMATION ARCHITECTURE
USER RESEARCH
& DISCOVERY WORKSHOP
CONTEXT ASSESSMENT
UI, DESIGN SYSTEM
WORDPRESS DEVELOPMENT
PERCEZIONE UTENTE
Whola lotta UX

“We got to where we are now because we
undertook research.
— BARRETT JOHNSON
Siamo arrivati qui perché abbiamo iniziato un percorso di ricerca
sugli stakeholder, sugli utenti e le loro esigenze e bisogni.
Il Co-Design ha facilitato questo percorso e ha allargato il team.
Questo caso di studio è un lavoro di tutti noi.

CO-DESIGN
+
LI ABBIAMO COINVOLTI PRIMA DI PROGETTARE

Come designer facciamo consulenze ai nostri clienti,
abbiamo competenze, ma non abbiamo conoscenza su tutti i campi.
Per questo coinvolgere i clienti per tutto il processo è fondamentale.
Un marchio di fabbrica
CO-PROGETTARE PER UNA MAGGIORE SODDISFAZIONE

+
to their customers.
DUE DISCOVERY
WORKSHOP
+
MILANO E ROMA

I brief sono un punto di partenza tipico.
Sono poco signiﬁcativi per un consulente.
Bisogna capire, scavare, comprendere
e indagare identità e obiettivi al di là
di una litania.
Questi sono i discovery workshop.
Discovery workshop
IL NOSTRO CALCIO D’INIZIO
+

+
MILANO E ROMA
USER RESEARCH
& INTERVIEWS

TODO SLIDE PERSONAS COME ARCI

“Passo un intero mese a uploadare nell’area riservata
file che servono per le riunioni dei gruppi di lavoro, uno
per uno. Questa è la mia attività principale
—LORENZO DI NENNO - ACCREDIA
Nelle interviste Lorenzo ci ha spiegato quale fosse la sua attività
quotidiana, per comprendere il workflow di backoffice, oltre allo
User Journey.

CONTEXT ANALYSIS
+
COSA SUCCEDE NEL CONTESTO IN CUI OPERA ACCREDIA E COME SI RIFLETTE IN RETE

Distribuzione delle visite
ACCREDIA HA TRE SEDI, ATTORNO A QUESTE 
IL MAGGIOR TRAFFICO

User ﬂow…
POCO SIGNIFICATIVO
La strutturazione degli URi
non parlanti fa in modo
di rendere non signiﬁcativa
l’analisi delle visite.

Siti affini
IN BASE AL TRAFFICO CONDIVISO*
Non ci sono dei siti che
condividono un’alta
percentuale del traffico di
Accredia. Tuttavia, anche
quelli che ne condividono
una piccola parte sono affini
al settore e indicano un
corretto posizionamento.
*Dati SimilarWeb e Alexa

A differenza di molti altri progetti seguiti
Accredia è un portale assolutamente
Desktop first.
Il traffico mobile arriva a un risicato 13%.
Mobile first?
UN PORTALE IN CONTROTENDENZA
Mobile Desktop

INFORMATION ARCHITECTURE
+
HOW WE ALL MADE SENSE OF THEIR MESS* 😝
* HOW TO MAKE SENSE OF ANY MASS - ABBY COVERT

Accredia.it è un sito di documentazione, procedure e informazione sul
tema della certiﬁcazione accreditata.
Trovabilità e ricercabilità sono state due chiavi fondamentali  
per il nostro lavoro.
Leggere, capire, organizzare
TONNELLATE DI CONTENUTI DA RENDERE ACCESSIBILI

Information Architecture
CONTENT INVENTORY, CARD SORTING E ALTRE AMENITÀ
SITEMAP
CONTENT TYPE 
MAP
SECTION MAP
Questo lavoro di raccolta, organizzazione, riscrittura e
razionalizzazione dei contenuti ci ha impegnati
per circa 3 mesi di lavoro.
È stata la sﬁda più importante e più impegnativa
dell’intero progetto.

ACCREDIA - DIGITAL TRANSFORMATIONACCREDIA - DIGITAL TRANSFORMATION

INSPIRATION, MOOD &
DESIGN SYSTEM
+
IL MODO IN CUI VESTONO DIGITALMENTE

WIREFRAMING & USERFLOWS
+
LE FONDAMENTA, GLI SPAZI E I FLUSSI

Wireframing: definire ingombri, gerarchie e spazi
Questa è la fase più malintesa di un progetto come questo.
Spesso si dice che “abbiamo fatto la UX” intendendo dire che sono stati fatti
dei wireframe per definire spazi e gerarchie.
È una fase fondamentale che genera prototipi testabili e quindi
una delle prime fasi di raccolta dell’efficacia della progettazione.
MISUNDERSTOOD USER EXPERIENCE

USABILITY TEST
+
ROMA E MILANO

+
to their customers.

Abbiamo organizzato due sessioni
di test di usabilità su prototipi interattivi
(su InVision) per veriﬁcare il prima possibile,
prima della implementazione,  
l’efﬁcacia di alcune soluzioni.
Prototype testing
FAIL FASTER TO SUCCEED SOONER

Le persone coinvolte hanno avuto difﬁcoltà
a riconoscere alcune etichette di navigazione
e alcuni elementi di interfaccia utente.
Queste ci hanno suggerito modiﬁche che ora sono online.  
Ci hanno confermato invece una grande familiarità  
con le Call To Action principali, quali Documenti e Banche Dati.
Risultato?
LE COSE CHE ABBIAMO CAPITO SUI NOSTRI PROTOTIPI

WORDPRESS: BEDROCK + GLITCH
+
PERCHÉ WORDPRESS È POTENTE, MA CON UN PO’ DI SALSA…

I principali motivi per cui
lo abbiamo adottato sono
composer e capistrano.
Gestione delle dipendenze
e deploy per collaborazione e prevedibilità.
A quick comparison
NON È LA GARA A CHI CE L’HA PIÙ FIGO

E il tema?
SENSO, STRUTTURA E SCELTE DI GLITCH

Cos’è e cosa non è
È LA BASE DI OGNI NOSTRO PROGETTO
NO VISUAL 
COMPOSER
DESIGN SYSTEM
FRIENDLY
NATIVAMENTE
RESPONSIVE
SEO 
FRIENDLY
FLESSIBILE
E ADATTABILE
È basato su Advanced Custom Fields Pro,
implementa una logica a sezioni orizzontali
e per noi è la naturale implementazione  
del concetto di Design System.

+
to their customers.
Sezioni orizzontali
CONTENT FIRST AND DRAG’ N DROP
L’amministratore può gestirsi il solo
il contenuto senza preoccuparsi
dell’aspetto visivo: una volta
deﬁnito nel design system,
si vedrà come deciso.

Microinteractions
GUIDARE CON ESSENZIALITÀ

Oddio, più o meno.
Il giorno del lancio di un altro progetto,
TPI.it, abbiamo raggiunto numeri
simpatici con server non esoterici e
velocità interessanti.
Un solo template di pagina
ALLORA SARÀ LENTO O CADRÀ!

Perché avete usato ACF Pro?
Non è Open Source!
È VERO 😢 
MA HA DELLE CARATTERISTICHE CHE CI AIUTANO

BACKOFFICE
+
DI AREE RISERVATE E TEMPO RISPARMIATO

Domande?

Grazie per l’attenzione

Accredia: proudly powered by co-design & WordPress

Recommandé

Recommandé

Contenu connexe

Similaire à Accredia: proudly powered by co-design & WordPress

Similaire à Accredia: proudly powered by co-design & WordPress (20)

Plus de nois3

Plus de nois3 (20)

Accredia: proudly powered by co-design & WordPress