Osservatori Digital Innovation

Progettare il nuovo ecommerce web, l’idenitità social e i supporti offline

Gli Osservatori Digital Innovation della School of Management del Politecnico di Milano nascono nel 1999.
Oggi sono un punto di riferimento qualificato sull’Innovazione Digitale in Italia che integra attività di Ricerca, Comunicazione e Aggiornamento continuo.

Ricostruire il core digitale. La piattaforma e-commerce per l’acquisto one shot o di abbonamenti ai contenuti

La mission della piattaforma è produrre e diffondere conoscenza sulle opportunità e gli impatti che le tecnologie digitali hanno su imprese, pubbliche amministrazioni e cittadini, tramite modelli interpretativi basati su solide evidenze empiriche e spazi di confronto indipendenti, pre-competitivi e duraturi nel tempo, che aggregano la domanda e l’offerta di Innovazione Digitale in Italia.

Ci siamo occupati di

Sviluppo UI UX
Sviluppo front-end [Blog]
Art Direction on/offline identity
Art Direction servizio fotografico

Tecnologie

Sketch
Invision
Html / css

Team Rawfish

Durata

4 mesi

I volumi prodotti annualmente

200

Pubblicazioni

200

Workshop e webinar

490

Partner e Sponsor

200k

Utenti abbonati

Iniziamo dai dati: inquadriamo il contesto studiando le user journey e i pain point per orientare gli obiettivi

Il kickoff e i primi incontri successivi si sono concentrati sull’a condivisione dei dati analitici elaborati assieme agli stakeholder per identificare i paint point e circoscriverli. I risultati ci hanno permessi di tratteggiare i “do & don’t” da adottare ed evitare nella ristrutturazione della gerarchia dei contenuti, oltre alla loro potenziale rappresentazione ottimale nella fase di co-design.

Attenta analisi dei conversion point: le aree, pagine le call to action con la specifica funzione di generare un’azione da parte dell’utente.
Lo studio è funzionale alla condivisione, nei mockup realizzati, delle aree strategiche per il Cliente.

Gli obiettivi alla base del progetto di ricostruzione del sito sono:

Maggiore conversione

Favorire la conversione degli utenti

Aumentare gli acquisti

Aumentare l’acquisto degli piani d’abbonamento

Ottimizzazione ricerca

Migliorare l’esperienza utente nella ricerca di un contenuto

Mobile first

Rendere mobile first la piattaforma tramite l’ottimizzazione dell’esperienza mobile

Migliore area utente

Curare la sezione privata utente, presentando in maniera organica tutti i contenuti acquistati e gratuiti

Gerarchia dei contenuti e tone of voice

Evidenziare i punti di forza degli Osservatori nel presentare le offerte formative

Strutturazione gerarchica dei dati e definizione dei flussi di navigazione

La struttura gerarchica delle informazioni è stata rielaborata alla radice, portando in evidenza le sezioni strategiche rispetto a quelle di secondo livello.
Definizione dei menù di navigazione e delle informazioni in page sono state elaborate con una serie di workshop con il team di Osservatori.
L’approccio lean e le veloci iterazioni hanno permesso di definire in breve tempo la struttura condivisa dei dati e la loro rappresentazione nella fase di co-design, producendo i template wireframe.

Processione iterativo di sviluppo della User Interface: Definizione del primo Design System atomico

La costruzione del primo Design System ufficiale di Osservatori.net ha permesso al nostro team di Design di costruire i template finali mantenendo coerenza stilistica nella rappresentazione dei vari elementi.

La palette colori ufficiale è stata arricchita di tinte individuate per ampliare la comunicazione visiva con colori complementari per rappresentare: categorie, stati, elementi secondari, ecc.

Il valore aggiunto si è tradotto in tempi di produzione più brevi per il tema Rawfish e una migliore collaborazione con il team di Sviluppo che poteva contare su template matrice chiari e scalabili secondo le regole condivise.

Sviluppo dei template in ottica mobile first

L’iter condiviso per la costruzione dei template è stato pensarli prima per la fruizione su dispositivi mobile. Nessun dettaglio è stato semplicemente adattato ma l’experience di onboarding, pagamento, fruizione dei contenuti è stato rianalizzato in base al dispositivo. Tramite test A/B dei template è stato possibile ricevere riscontri qualitativi sui quali presentassero la migliore gerarchia dei contenuti in base agli obiettivi della pagina.

MyHomeAggregatore dei contenuti acquistati, delle attività e dei dati dell’utente

Una volta eseguito l’accesso dall’area pubblica, l’utente accede alla versione privata del portale dove oltre alle funzioni pubbliche condivise (es: ricerca contenuti), trova come homepage la sezione personale MyHome contenente i propri prodotti acquistati, la gestione delle newsletter e dei dati personali e di pagamento.

Menù di navigazione responsivo

Il menù mobile si ispira all’experience del mondo app nativo mobile. Presenta le voci a scorrimento orizzontale e ne mantiene grandezza del carattere e contrasto con lo sfondo per restituire la migliore leggibilità.

Dettaglio prodotto.Gerarchia dei contenuti desktop e mobile

La versione mobile del sito presenta i contenuti di un prodotto iniziando dalle informazioni generali (costo, tipo, osservatorio) unitamente al facile accesso a pulsanti d’azione come salva nei preferiti e aggiungi all’agenda.

Flusso di onboarding e attivazione della prova gratuita

La prova gratuita dei prodotti per un periodo circoscritto di tempo è stata la formula sposata per avvicinare nuova utenza con l’obiettivo di permettere di apprezzare la qualità dei contenuti e delle newsletter per 30 giorni. L’obiettivo è la conversione dell’utente in profilo premium. Il flusso di onboarding, risultato di un AB test, è stato progettato per consentire in pochi click di accedere ai contenuti.

Tone of voice. Parlare attraverso le immagini.

Una decisione concordata durante lo sviluppo del progetto e non inclusa nell’idea iniziale, ha previsto la direzione artistica del servizio fotografico a supporto della comunicazione digital (web, newsletter) e social degli Osservatori.

Abbiamo gestito l’intero processo. Scelta del fotografo (Veronica Mariani Photo), modelli, stilist, location e mood degli scatti e post produzione.
La proposta fatta di realizzare scatti di tipo astratto e con soggetto ha portato a pianificare due servizi fotografici, svolti entrambi nel mese di marzo 2020.
L’obiettivo era ricreare tramite scatti astratti (con soggetto non protagonista) la quotidianità propria dei contesti di fruizione di un contenuto multimediale.
Gli scatti con soggetto femminile hanno dato un primo volto alla comunicazione degli osservatori sviluppando sia momenti di interazione con i tipici touchpoint desktop e mobile sia come scatto del solo soggetto come presenza caratterizzante di comunicazioni social e newsletter.

Blog Osservatori. Applicazione del design system sulla nuova piattaforma

La seconda parte del progetto, pubblicato il sito Osservatori.net, ci ha coinvolti per il reskin del Blog ufficiale Osservatori.net. La presenza del design system, risultato del progetto e-commerce, ha permesso al tema Rawfish di lavorare velocemente sfruttando gli elementi a disposizione e creandone di nuovi dove necessario. Concordata la User interface dei vari template, è stato sviluppato e fornito il front-end html e css al team di sviluppo di Osservatori per l’implementazione nella piattaforma Hubspot.

BlogRiscrittura del tema htmlsecondo le linee guida prodotto dal sito

I template responsive del Blog sono stati scritti secondo le linee guida della piattaforma Hubspot. Questo ha permesso un’implementazione senza frizioni da parte del team interno di Osservatori.
Abbiamo curato la fase di Quality Assurance, revisionando i template montati e indicando gli interventi di ottimizzazione.

Mailmarketing. Restyle del canale di comunicazione

La nuova immagine costruita con l’ecommerce e applicata al blog ha interessato anche il canale di mailmarketing con i quale gli Osservatori comunicano con gli utente novità, eventi, promozioni.

Abbiamo catalogato i template esistenti e razionalizzato il numero per rispondere alle reali esigenze di utilizzo, coprendo tutti i diversi casi con un template custom dedicato. Le skin applicate derivano dal design system. Per le comunicazioni è stato impiegato uno degli scatti con soggetti realizzati ad hoc per rafforzare l’identità delle comunicazioni istituzionali.

Nuova veste grafica coordinata per i canali social

l’attività di applicazione della nuova immagine ha coinvolto anche la comunicazione sui canali social Linkedin, Facebook ed Instagram.
è stato proposto un lavoro che andasse ad individuare i format ideali per rispettivo canale, i quali si sarebbero vestiti degli elementi grafici comuni.
Singolo post, stories, cover ed event profile mantengono la coerenza visiva adattata al formato.

Nuovo trattamento grafico per gli scatti fotografici d’archivio

L’intervento di restyle ha incluso anche il trattamento in post produzione degli scatti d’archivio disponibili. La scelta ha portato a sostituire il colore originale a favore di un viraggio sui toni blu propri del brand, che restituisce distintività e riconoscibilità all’interno dei feed social.

Comunicazione offline. Materiali divulgativi per eventi in presenza e declinazione online.

L’attività ha richiesto catalogazione e codifica dei materiali esistenti per procedere al restyle dei template di pagina e applicazione dell’immagine coordinata agli elementi grafici nodali (grafici).
I materiali interessati ricoprono l’intera produzione di supporti informativi online (presentazioni powerpoint, Report e programmi convegni, brochure) e materiali offline (cartaceo consegnato durante gli eventi in presenza, badge, banner, allestimenti stand, grande formato).

Lo stop forzato dovuto all’emergenza Covid, ha richiesto la rielaborazione di alcuni supporti cartacei in supporto digitale, riadattando i format standard destinati alla stampa in file interattivi fruibili da pc e tablet.