Una piattaforma in evoluzione: il Design System
Value+ sviluppa e commercializza software avanzati per il settore assicurativo e bancario. La sua piattaforma, usata dagli agenti per lavorare su prodotti, clienti, portafogli, pianificazione e performance, è costruita su un Design System strutturato e articolato.
Un sistema di questo tipo richiede cura continua: va aggiornato e mantenuto nel tempo, attraverso gli interventi di miglioramento che il cliente chiedeva.
Racconto quel lavoro attraverso uno di questi interventi, l’implementazione della funzione Switch.
Tipo di progetto
Mantenimento e gestione del Design System
Il mio Ruolo
Sr. UX / UI Designer | Mynd come Design Consultant per il cliente
Cliente
Value+
Attività
UX/UI Design — Information Architecture — Functional Design — Gerarchia delle informazioni — Manutenzione ed evoluzione del Design System — Librerie Figma — Coordinamento del progetto — Collaborazione con il cliente — Verifiche di fattibilità con lo sviluppo — Implementazione UI
Anno di progetto 2025. Ultimo aggiornamento ottobre 2026.
Stai consultando la versione estesa
Vuoi saperne di più? 🙂
Il contesto
La piattaforma di Value+ è uno strumento utilizzato dagli agenti per la gestione dei clienti e delle attività legate alla consulenza finanziaria: dalla costruzione dei prodotti alla gestione dei portafogli dei clienti, fino alla pianificazione delle attività e al monitoraggio delle proprie performance.
La Dashboard rappresenta la Home della piattaforma e uno dei principali punti di accesso alle diverse aree funzionali.
Le esigenze evolutive
Il mio intervento si è inserito all’interno di un prodotto già strutturato e in uso, senza un unico obiettivo progettuale definito a priori. Le attività seguivano le esigenze evolutive di Value+ e i requisiti delle nuove funzionalità, intervenendo, a seconda della richiesta, su uno o più di questi tre livelli:
Aggiornamento della Dashboard — Attraverso modifiche o implementazioni di nuove funzionalità.
Nuovi touchpoint — Necessari per introdurre e rendere accessibili le funzioni da implementare.
Implementazione di funzionalità esistenti — Adattandole al sistema e alle esigenze del prodotto.
Struttura della piattaforma
Ogni intervento doveva quindi inserirsi all’interno di una piattaforma articolata e densa di informazioni, mantenendo coerenza tra strutture, componenti, pattern e comportamenti già consolidati.
La Dashboard, che rappresenta la Home della piattaforma, restituisce una sintesi delle principali aree e informazioni disponibili:
Menu
Dashboard — Catalogo prodotti — Bozze e Preventivi — Portafoglio — Clienti — Planning — Documentale — Profi
Aree principali
Censimento del cliente
Proposta prodotto
Portafoglio
Performance dell’agente
Spalla di destra
Attività dell’agente
Calendario
Dati e componenti
Composizione del portafoglio con le polizze attive
Indicatori di performance
Grafici, KPI, stati e notifiche
La sfida
Lavorare su una piattaforma già strutturata e in continua evoluzione significava mantenere coerente il Design System mentre nuove funzionalità, componenti e pattern modificano progressivamente il prodotto.
Ogni richiesta doveva quindi essere valutata non solo rispetto alla singola funzione, ma anche per le sue implicazioni sulla struttura esistente, sui comportamenti determinati e sul sistema di componenti.
L’obiettivo era far evolvere la piattaforma senza introdurre soluzioni isolate, mantenendo continuità tra esperienza, interfaccia e Design System.
La sfida dello Switch
All’interno di questo contesto, lo Switch rappresenta un esempio concreto di evoluzione di una funzionalità già presente nella piattaforma.
L’intervento ha riguardato i primi tre step del flusso, mantenendo invariata la struttura complessiva composta da quattro step e intervenendo sui contenuti e sulle modalità di rappresentazione delle informazioni.
Tra le modifiche introdotte, il cliente ha richiesto di mettere in evidenza, nello step 03 — Riepilogo, il confronto tra la composizione del portafoglio prima e dopo lo Switch.
La difficoltà progettuale era quindi permettere di confrontare le due configurazioni del portafoglio senza duplicare le informazioni e rendendo immediatamente leggibili le variazioni intervenute sui singoli fondi.
Tre obiettivi
Nel caso specifico del confronto tra le due configurazioni, ho tradotto questa esigenza in tre obiettivi progettuali:
1. Confronto tra configurazioni
Rendere leggibile la composizione del portafoglio prima e dopo lo Switch.
2. Stato del fondo
Evidenziare in modo immediato se un fondo è stato aggiunto, modificato o rimosso.
3. Confronto puntuale
Permettere di confrontare il valore di ciascun fondo prima e dopo l’operazione
Struttura
Ogni richiesta partiva dalla comprensione dell’esigenza e dall’analisi dei contenuti e dei dati coinvolti.
Da qui definivo la struttura della soluzione, lavorando su gerarchie, architettura dell’informazione, flussi e comportamento delle funzionalità.
Dalla richiesta alla struttura
Ogni richiesta partiva dalla comprensione dell’esigenza e dall’analisi dei contenuti e dei dati coinvolti. Da qui definivo la struttura della soluzione, lavorando su gerarchie, architettura dell’informazione, flussi e comportamento delle funzionalità.
Con un Design System già definito non era sempre necessario sviluppare wireframe dettagliati: in base alla complessità dell’intervento poteva essere sufficiente definire una struttura semplificata, come nel caso dello Switch, per verificare l’organizzazione delle informazioni e il funzionamento della soluzione. Una volta definita questa struttura, potevo passare direttamente alla UI, utilizzando componenti e pattern esistenti del Design System. Questo permetteva anche al cliente di confrontarsi fin da subito con una rappresentazione concreta dell’intervento.
Attraverso i wireframe strutturati, o una loro versione semplificata, definivo le logiche di funzionamento, il modo in cui le informazioni dovevano essere organizzate e presentate e le relazioni tra i diversi elementi della soluzione, verificandone progressivamente la coerenza con il prodotto esistente.
La struttura dello Switch
Lo Switch era già organizzato in un flusso composto da quattro step:
01 →
Disinvestimento
02 →
Investimento
03 →
Riepilogo
04
Conclusione
L’intervento ha riguardato i primi tre step, aggiornandone e implementandone i contenuti senza modificare la struttura del flusso.
Il focus di questo case study è sul Riepilogo, dove una delle modifiche introdotte riguarda la rappresentazione del confronto della composizione del portafoglio del cliente prima e dopo lo Switch.
Il Riepilogo prima dell’aggiornamento
Il Riepilogo rappresentava la situazione del portafoglio al termine delle operazioni di disinvestimento e investimento, mostrando la composizione risultante prima della conclusione dello Switch.
La struttura esistente riportava quindi due elenchi: quello dei fondi disinvestiti e investiti e i relativi valori, che insieme davano la composizione del portafoglio.
Step 3 – Prima dell’aggiornamento
Il confronto tra le configurazioni
La richiesta era rendere leggibile, nello stesso momento, la composizione del portafoglio prima e dopo l’operazione, mostrando per ciascun fondo cosa fosse cambiato.
La scelta progettuale finale aveva l’obiettivo di eliminare la duplicazione delle informazioni: una sola lista di fondi e un solo grafico dovevano rappresentare entrambe le configurazioni del portafoglio.
La soluzione quindi richiedeva di organizzare la struttura e le informazioni in modo da mettere in relazione:
→ il valore del fondo prima dello Switch;
→ il valore del fondo dopo lo Switch;
→ lo stato del fondo: aggiunto, modificato e rimosso;
→ la variazione del valore del fondo;
→ la rappresentazione grafica delle variazione del portafoglio.
Questa struttura ha costituito la base per la successiva fase di progettazione.
Progettazione
La progettazione trasformava la struttura definita nella fase precedente in una soluzione concreta, lavorando sull’interfaccia, sui comportamenti e sulle modalità di interazione tra i diversi elementi.
Il processo prevedeva momenti di verifica e confronto che permettevano di affinare progressivamente la soluzione fino al suo consolidamento.
Dalla struttura alla soluzione
Una volta definita la struttura della soluzione, il lavoro proseguiva attraverso un processo iterativo di progettazione e confronto. Ogni intervento veniva sviluppato a partire dalla richiesta iniziale, passando dalla comprensione dei requisiti e dalla strutturazione della soluzione fino alla definizione dell’interfaccia e alla sua evoluzione nel Design System.
Il processo seguiva generalmente questi passaggi:
01
Richiesta del cliente
04
Verifica con lo sviluppo
07
Iterazione
02
Comprensione
05
Proposta
08
Consolidamento
03
Strutturazione
06
Confronto
09
Implementazione
La progettazione non si concludeva quindi con la prima proposta, ma proseguiva attraverso il confronto con il cliente e le successive iterazioni, fino al consolidamento della soluzione.
L’evoluzione dello Switch
Nel caso dello Switch il lavoro si è concentrato sullo step 03 — Riepilogo.
La progettazione ha tradotto la struttura definita nella fase precedente in una soluzione capace di rendere leggibile il confronto tra la composizione del portafoglio prima e dopo l’operazione.
Step 3 – La nuova soluzione
Intervento sulla tabella
Nel Riepilogo, la lista dei fondi è stata arricchita introducendo tre colonne dedicate alla lettura della variazione:
→ Valore dopo lo Switch
Nuova colonna con il valore del fondo dopo l’operazione.
→ Stato
Nuova colonna con una chip che indica se il fondo è stato aggiunto, modificato o rimosso.
→ Delta
Nuova colonna che indica l’andamento del valore del fondo: salito, sceso o invariato.
Intervento sul grafico
Alla struttura rivista della tabella è stata affiancata la rappresentazione grafica del portafoglio fondi, per dare una lettura immediata della sua composizione, prima e dopo lo Switch.
→ Porzione del fondo
La porzione di ogni fondo è rappresentata prima e dopo, per un riconoscimento visivo immediato.
L’interazione finale
La relazione tra tabella e grafico è stata progettata anche attraverso l’interazione: passando con il mouse su una riga, il fondo corrispondente viene evidenziato nel grafico insieme al relativo valore precedente, permettendo di collegare immediatamente il dato tabellare alla sua rappresentazione nel grafico.
La soluzione finale mette quindi in relazione stato, delta e valori con la rappresentazione grafica, permettendo di leggere le (eventuali) variazioni avvenute sui singoli fondi all’interno del riepilogo.
Design System
Il Design System di Value+ era già strutturato e rappresentava la base di lavoro per la progettazione e l’evoluzione della piattaforma.
Il mio intervento comprendeva la manutenzione del sistema esistente e l’introduzione di nuovi componenti, varianti e regole necessari a supportare le nuove esigenze progettuali.
Il Design System esistente
Il sistema comprendeva diversi livelli e tipologie di elementi:
foundations — colori — tipografia — componenti — form — tabelle — chip — grafici — navigazione — pattern — stati — varianti
Lavorare sulle nuove funzionalità significava quindi progettarle considerando anche di una struttura già definita, verificando la coerenza con componenti, pattern e regole esistenti.
L’attività non si limitava alla sola introduzione di nuovi elementi. Durante la progettazione potevano emergere componenti, stati o comportamenti già presenti che richiedevano correzioni, riallineamenti o una revisione della loro struttura. Anche questi interventi rientravano nell’evoluzione del sistema.
L’evoluzione attraverso lo Switch
L’intervento sullo Switch, in particolare, ha richiesto l’introduzione di quattro nuovi elementi e l’aggiornamento di un componente esistente:
Chip di stato — Componente per distinguere fondi aggiunti, modificati e rimossi.
Colonna Delta — Elemento per rappresentare la variazione del valore del fondo.
Colonna Valore dopo lo Switch — Colonna per affiancare il valore successivo a quello precedente.
Hover sulla riga — Comportamento per collegare la riga selezionata alla relativa rappresentazione nel grafico.
Grafico — Componente per rappresentare la composizione del portafoglio prima e dopo lo Switch.
Nuovo
Nuovo
Nuovo
Nuovo
Aggiornato
L’intervento sul grafico ha inoltre portato alla revisione del componente, aggiornandone la struttura per supportare la nuova rappresentazione e mantenendone la coerenza con il resto del sistema.
Regole e relazioni
Oltre ai singoli componenti, il lavoro ha riguardato anche le regole che ne definivano l’utilizzo e le relazioni tra gli elementi.
Nel caso dello Switch è stata formalizzata, in particolare, la relazione tra la riga della tabella, il relativo stato di hover e la rappresentazione grafica del fondo, definendone il comportamento all’interno del sistema. Questa ha reso immediatamente leggibile il collegamento tra dato e rappresentazione visiva.
Stai consultando la versione estesa
Vuoi saperne di più? 🙂