Progettazione collaborativa per un nuovo ecosistema digitale strutturato e modulare

Cornèr Banca
CBA_01_a
CBA_01_mobile
Cliente Cornèr Banca
Il nostro metodo Branding, Content, Experience
Anno
2019

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
CBA_03

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_05_mobile
CBA_04_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_09

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

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
CBA_07_mobile

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
CBA_08_mobile

Lo 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.

CBA_11

Per arrivare al cuore del suo target, un brand ha bisogno di una storia da raccontare. Noi disegniamo storie.