Progettazione collaborativa per un nuovo ecosistema digitale strutturato e modulare

CBA_01_a
CBA_01_mobile

Cliente e obiettivi

Cornèr Banca è una delle più importanti banche svizzere. Attiva a livello nazionale e internazionale, con un forte radicamento sul territorio ticinese, si rivolge in particolare a una clientela Private di alto livello. Dopo avere già collaborato con Ander Group più volte in passato, Cornèr si è rivolta a noi per il Restyling del sito Web, con l'obiettivo di: razionalizzare e ottimizzare l’architettura delle informazioni; identificare il target e ripensare il tono di voce; riorganizzare la modalità di presentazione dei servizi; dare alla banca un’immagine più elegante e ‘pulita’, mantenendo un legame con la strategia di comunicazione in uso.

Concept

Il punto di partenza del Concept grafico del sito è stato la cornice tipica della comunicazione di Cornèr Banca: un elemento che abbiamo semplificato, reso più essenziale ed elegante e utilizzato non solo nelle immagini del sito, ma anche come elemento grafico che racchiudesse box e contenuti. Nel complesso, il Mood del sito rispecchia i valori della banca: solida e tradizionale.

 
CBA_02_mobile
 
CBA_03_mobile

Design System

Le prime fasi del progetto ruotavano attorno alla definizione del Design System di corner.ch. Abbiamo scelto una combinazione di colori che allo stesso tempo non si allontanasse dai colori istituzionali del Brand Cornèr e fosse funzionale alla User Interface e alle interazioni tra gli elementi. La scelta del Font è caduta sul Roboto, un Google Font dalle linee geometriche che accompagna bene il Concept della cornice, ma che contempla anche curve sinuose per una lettura comoda. Il tutto è stato corredato da una libreria di icone disegnate ad hoc per identificare i vari servizi offerti dal gruppo.

CBA_04_a
CBA_04_mobile
CBA_05_mobile

Interaction Design

Attraverso l'Interaction Design, abbiamo introdotto nel sito alcune animazioni e interazioni in grado di impreziosire e rendere più dinamica la grafica del sito. Puntando sempre sulla cornice, che si compone in forme e direzioni diverse.

 
CBA_10_mobile

Atomic Design

L'Atomic Design è una metodologia che consiste nella creazione di un prodotto digitale attraverso il Design di singoli micro-elementi, messi in relazione tra loro. Si parte quindi dal disegno dei singoli elementi (atomi), che vengono messi in relazione tra loro in strutture semplici (molecole) o più complesse (organismi), introdotte all'interno dei Template e infine nelle pagine (Layout). L'interfaccia del sito Cornèr Banca è stata disegnata in modo da poter essere modificata in modo totalmente modulare, mantenendo la macro-struttura coerente durante la navigazione.

CBA_10
 
CBA_09_mobile
CBA_06_mobile

Information Architecture

La complessità della struttura e la macchinosità della User Experience sono stati tra i primi temi emersi nelle riunioni con il cliente: i dipendenti stessi della banca avevano difficoltà a navigare il sito e a reperire le informazioni. Ecco perché ci siamo concentrati su un grande lavoro di razionalizzazione e riorganizzazione dei contenuti, eliminando le voci di menù superflue o ridondanti; inoltre, abbiamo raggruppato i servizi sulla base delle necessità reali e dei modelli mentali dei clienti, allontanandoci dalla precedente alberatura che replicava la struttura aziendale della banca.

 

Il nuovo sito prevede una gerarchia che non va mai oltre il terzo di livello di navigazione. Inoltre, l’utente ha sempre la possibilità di spostarsi in un’altra sezione direttamente a fondo pagina, senza dover utilizzare il menù principale: nelle pagine di prodotto è sempre possibile andare al livello di profondità successivo o risalire nel flusso di navigazione.

CBA_07

Slide to discover

CBA_07_mobile-2

Strategia e Co-Design

Abbiamo impostato il progetto con una logica di Co-Design, o progettazione collaborativa: tutte le decisioni più importanti sono state prese durante i Workshop con i responsabili della banca e con le persone del Team Marketing e Comunicazione. Questo ha permesso che tutti gli stakeholder sentissero ‘proprio’ il progetto, fossero coinvolti e potessero fornire un contributo concreto. Di conseguenza, il processo di approvazione si è snellito molto e i tempi di risposta sono stati rapidi.

 

Anche la scrittura dei contenuti è avvenuta fianco a fianco con il cliente: ogni responsabile di area è stato coinvolto in diversi Workshop di Content Writing, con l’obiettivo di mettere sul tavolo i concetti corretti e contemporaneamente tradurli in una forma coinvolgente e SEO-friendly, che tenesse conto della ricerca sulle Keyword fatta in fase iniziale. Il tono di voce si è staccato leggermente da quanto fatto dalla banca in passato: lo stile è informale ma rassicurante, diretto ma mai scherzoso. 

CBA_08

Slide to discover

CBA_08_mobile-2

Sviluppo del sito

Durante le fasi finali del progetto abbiamo organizzato un Hand Over dei supporti in formato digitale (Sketch e HTML), in modo che il reparto IT del cliente potesse gestire lo sviluppo delle pagine autonomamente.

 

Cosa abbiamo capito

Progettare accanto al cliente è sempre un’esperienza interessante. Perché ci permette di conoscere a fondo la materia sulla quale lavoriamo e soprattutto di prendere decisioni consapevoli e condivise con i nostri interlocutori. Merita una menzione inoltre la struttura modulare del sito, preziosa per avere un'interfaccia flessibile e facilmente componibile da chiunque dovesse metterci mano anche in futuro. La scrittura collaborativa dei contenuti, infine, si è rivelata una piacevole sorpresa: apparentemente onerosa in termini di tempo, ma in realtà molto utile per evitare lunghi processi di approvazione e di correzioni.

Iniziamo un progetto insieme
Contattaci