Introduzione
Magma è un protocollo DeFi che permette di coniare una stablecoin completamente collateralizzata, garantita da token di liquid staking e asset reali.
Obiettivo
Primo: far percepire la piattaforma come professionale e affidabile, senza sommergere l'utente nella complessità tecnica. Secondo: costruire un brand e un'esperienza capaci di attrarre capitale, parlare agli utenti nativi della DeFi e posizionare ioUSD come la stablecoin di riferimento su IoTeX.
Sfide
Il team stava lanciando un protocollo DeFi nuovo di zecca, senza notorietà, senza interfaccia e senza documentazione. Solo uno smart contract e una visione.
Costruito su IoTeX, una chain di nicchia dedicata alla DePin (Decentralized Physical Infrastructure Network), Magma doveva emergere con risorse limitate e zero credibilità ereditata.
Il modello economico riprendeva le basi di Liquity, ma il sistema multi-collaterale ha richiesto di ripensare da zero parti fondamentali dell'interfaccia utente.
Brand Design
Un'identità visiva che costruisce fiducia nel modo DeFi. Forgiata nel magma.
Sviluppo dell'identità visiva
Xervum ha proposto tre concept per il logo, esplorando direzioni diverse per l'aspetto e la personalità del brand. Avendo già collaborato con il team, le preferenze erano chiare fin da subito e il processo è filato veloce.
Tutte le proposte combinavano la lettera M con un riferimento al magma, usando richiami visivi legati all'energia vulcanica e alla finanza.
The final look
Il team ha scelto il Concept C senza esitazioni e senza revisioni significative. Xervum ha poi raffinato il logotipo integrando un motivo di rialzo: una freccia verso l'alto fusa nella M, che richiama movimento, crescita e slancio finanziario.
Una volta approvati il logo principale di Magma e l'identità del token, era il momento di disegnare il marchio per il prodotto chiave del protocollo: lo stablecoin. Il nome originale era ioUSD, un richiamo alla chain IoTeX. Il logo si ispirava al simbolo del dollaro, con le lettere i e o integrate nel disegno.
Poco prima del lancio il nome è cambiato in WEN, un riferimento alle antiche monete cinesi, sia nel nome che nella forma. Il logo finale riprende la loro caratteristica sagoma con il foro quadrato, evocando un senso di retaggio e di valore radicato nella storia monetaria.
Stablecoin Logo Design
App Design
Pattern semplici e impatto reale: il design della Dapp Magma
Introduzione
The main goal was to create an interface that felt professional and trustworthy, without overwhelming users with technical complexity. Working within a tight budget and limited resources, we focused on delivering a clean, consistent experience—polished enough to inspire confidence, without relying on fancy animations or custom patterns.
Instead, we built on familiar UI conventions and used every design decision to push clarity further. From reused icons to color-coded risk indicators, we introduced subtle details—like green arrows when risk drops, red ones when it rises, or a warning banner when liquidation gets close—that collectively improve usability.
The result is an app that looks sharp, behaves predictably, and respects both the user’s attention and the developer’s time.
L'obiettivo principale era creare un'interfaccia che trasmettesse professionalità e affidabilità, senza sopraffare l'utente con la complessità tecnica. Con un budget contenuto e risorse limitate, Xervum ha puntato su un'esperienza pulita e coerente, curata abbastanza da ispirare fiducia, senza ricorrere ad animazioni elaborate o pattern personalizzati.
Invece di inventare nuove convenzioni, Xervum ha costruito su pattern UI familiari, usando ogni scelta di design per spingere la chiarezza un passo più avanti. Dalle icone riutilizzate agli indicatori di rischio con codice colore, ogni dettaglio ha un ruolo preciso: frecce verdi quando il rischio cala, rosse quando sale, un banner di avviso quando la liquidazione si avvicina. Piccoli accorgimenti che, messi insieme, migliorano sensibilmente l'usabilità.
Il risultato è un'app dall'aspetto preciso, dal comportamento prevedibile, che rispetta sia l'attenzione dell'utente sia il tempo dello sviluppatore.
Processo
Invece di progettare wireframe statici per poi ricominciare da zero con la UI, Xervum lavora in modo incrementale: gli stessi blocchi usati per la struttura grezza vengono raffinati nel tempo fino a diventare componenti finiti.
Questo approccio rende il processo più veloce e adattivo: il feedback arriva prima, la collaborazione asincrona diventa più semplice e l'interfaccia finale emerge in modo organico da parti reali e funzionanti.
Sistema cromatico
Il sistema colore è strutturato attorno a una convenzione di nomi condivisa. I token base, come neutral-100 o brand-200, mantengono lo stesso nome nei temi chiaro e scuro, con valori adattati per garantire contrasto e leggibilità. I token semantici (ad esempio button-primary-fill o text-muted) sono mappati come alias di questi colori base, rendendo più semplice per gli sviluppatori gestire temi e implementazione.
La palette rispetta gli standard di accessibilità WCAG 2.1 ed è già allineata alle bozze del futuro WCAG 3. Nel tema chiaro, l'arancione del brand ha richiesto un aggiustamento tonale sottile: mantenere la stessa tonalità avrebbe compromesso la leggibilità o prodotto un marrone spento. La versione finale bilancia chiarezza visiva, coerenza estetica e accessibilità.
Token colore semantici applicati in modo coerente tra tema chiaro e scuro, per una gestione scalabile dei temi e una manutenzione più semplice dell'intera UI.
Dai frame vuoti alla UI finale: un processo di design progressivo in cui i componenti evolvono passo dopo passo. Prima il contenuto, poi la parte visiva.
Le illustrazioni spot sono state adattate da risorse open-source e personalizzate sulla palette Magma, sia in tema chiaro che scuro.
Ogni elemento dell'interfaccia è stato progettato in tutti i suoi stati e varianti, per coprire qualsiasi scenario l'utente possa incontrare.
Il file di design è strutturato in macro-sezioni chiare, ognuna con tutte le schermate correlate. I flussi utente sono disposti in sequenza, rendendo il file facile da navigare sia per gli sviluppatori che per gli stakeholder.
Tutte le schermate sono state progettate partendo dal mobile, con un sistema di layout a card che scala naturalmente al desktop. Questo approccio garantisce la responsività e semplifica lo sviluppo, dato che la stessa logica di griglia si applica su tutti i breakpoint.
Xervum ha creato una serie di diagrammi di flusso per spiegare visivamente le meccaniche del protocollo. Questi diagrammi sono stati poi integrati nella documentazione ufficiale, a supporto dell'onboarding e della comprensione tecnica.
I componenti sono stati documentati con logica d'uso e indicazioni visive, per ridurre le ambiguità ed evitare incoerenze tra design e sviluppo.
Landing Page
Con il team concentrato sullo sviluppo, Xervum ha optato per una landing page semplice ed efficiente: essenziale nella struttura, ma efficace nello scopo.
L'obiettivo era aiutare utenti DeFi e potenziali investitori a capire rapidamente cos'è Magma, perché esiste e come accedere all'app.
La pagina è stata pensata per essere veloce da costruire, con quattro sezioni essenziali: introduzione, casi d'uso, vantaggi e roadmap.
Pitch Deck
Con tutto il materiale visivo già pronto, Xervum ha assemblato in tempi rapidi un pitch deck da 12 pagine per gli investitori.
In quella occasione è stata creata anche una serie di diagrammi di flusso per spiegare le meccaniche chiave del protocollo, poi riutilizzati nella documentazione ufficiale del progetto.
