Introduzione
Atomax è un marketplace decentralizzato che mette in contatto holder e miner di Filecoin. Gli holder mantengono la liquidità, i miner accedono a capitale, e entrambi ottengono interessi. Tutto senza intermediari.
Obiettivo
Permettere agli holder di Filecoin di non perdere liquidità convertendo FIL in stFIL. Dare ai miner un accesso sicuro al capitale necessario per il pledge, senza introdurre dipendenze da terze parti. Progettare un flusso di registrazione nodi che ispiri fiducia fin dal primo momento, un passaggio critico per la sopravvivenza del protocollo. Il tutto in tempi stretti, con un'interfaccia minimale che funzioni per due utenze molto diverse, e un'identità professionale capace di costruire credibilità intorno a un prodotto DeFi nuovo.
Sfide
Nessuna documentazione. Il progetto è partito senza lista funzionalità, diagrammi di flusso o requisiti definiti.
Collaborazione asincrona e fusi orari diversi. Tutta la comunicazione era scritta, con 6-7 ore di differenza tra il design in Europa e il team di sviluppo a Shanghai.
Doppia utenza. Il prodotto doveva funzionare per due tipi di utente molto diversi: holder e miner di Filecoin.
Barriera di fiducia nella registrazione nodi. Se i miner non si fossero fidati del processo di registrazione, non avrebbero partecipato, e il valore del prodotto sarebbe crollato.
Rebrand a progetto avviato. Il passaggio da FilBond a Atomax ha richiesto una nuova identità visiva mentre design e sviluppo erano già in corso.
Risultato
Xervum ha preso un concetto grezzo con requisiti sparsi e lo ha trasformato in un prodotto funzionale per due utenze diverse, con un brand capace di comunicare fiducia dal primo click. Fin dai primi scambi su Telegram, la collaborazione con lo stakeholder ha dato forma alla visione di prodotto, trasformando idee sparse in un piano chiaro. Xervum ha contribuito alla prima bozza della documentazione del protocollo, fino a quel momento inesistente, e ha mappato i flussi utente critici in un prototipo mobile.
In parallelo alla UX, Xervum ha creato un nuovo brand, un'interfaccia app che si adatta a i vari dispositivi e un design system con token colore semantici per una gestione semplice dei temi. Quando lo sviluppo si è fermato, il cliente aveva in mano un prodotto pronto per essere costruito: identità chiara, flussi testati e una base solida per il lancio.
Timeline
Giu 2022 — Pitch deck FilBond (per investitori)
Dic 2022 - gen 2023 — Definizione condivisa di perimetro del progetto e terminologia; diagrammi di flusso critici; wireframe e prototipo mobile; prima iterazione UI
Feb 2023 — Rebrand in Atomax; mappate funzionalità aggiuntive; nome confermato (20 feb); direzione logo approvata (24-27 feb); tre proposte UI consegnate il giorno dopo
Mar (settimane 1-2) — UI Atomax rifinita; pagina coming soon
Mar (settimana 3) — Landing page: architettura informativa, testi, varianti layout, icone custom, anteprime UI, consegna agli sviluppatori
Brand Design
Credibilità immediata, esecuzione rapida
Obiettivo
Atomax aveva bisogno di un'identità visiva capace di ispirare fiducia fin dal primo giorno, ma abbastanza snella da essere rilasciata in tempi rapidi. L'obiettivo era trovare un equilibrio tra professionalità e accessibilità, parlando a due utenze distinte: holder e miner di Filecoin.
Risultato
Un sistema visivo compatto (logotipo, palette, tipografia e stile icone) costruito per funzionare senza frizioni sia nell'interfaccia prodotto sia nei materiali comunicativi.
Esplorazioni dell'iconogramma: tre marchi in bianco e nero che fondono la lettera A con un motivo atomico.
Studi a mano per il logotipo "Atomax"
I tre simboli migliori, presentati con tipografia e colore esplorativo per validare la direzione con il cliente.
Dopo aver fissato iconogramma e logotipo, Xervum ha esplorato tre palette e stili di superficie usando componenti reali dell'interfaccia, dato che il brand vive principalmente dentro il prodotto.
Urbanist: una famiglia geometrica, open source, versatile ma sobria. Elegante, moderna e poco inflazionata. Mantiene il brand neutro e leggibile sia nell'interfaccia sia nei materiali comunicativi, senza risultare anonima.
Animazione logo: elementi che si irradiano dal centro, si ingrandiscono e ruotano fino ad allinearsi nel simbolo. Ciclica e versatile: caricamenti, schermate di avvio, micro-interazioni.
Set icone custom: ottimizzate per tema chiaro e scuro. Palette e ombreggiature calibrate per contrasto leggibile in entrambi i temi.
App Design
L'architettura del prodotto: dal glossario all'interfaccia
Processo
Il lavoro sul prodotto è partito dallo sbrogliare requisiti incompleti e trasformarli in flussi chiari. Il primo passo è stato un glossario condiviso per allineare la terminologia tra design e sviluppo, seguito da un wireframe mobile-first per validare le interazioni critiche il prima possibile.
Una volta completato e approvato il prototipo, Xervum ha progettato l'interfaccia completa nello stile visivo di FilDA, dato che il prodotto era ancora posizionato come FilBond by FilDA. Poco dopo è arrivata la decisione di lanciare con un brand nuovo, Atomax, con l'aggiunta di alcune funzionalità aggiuntive.
Dopo una fase rapida di branding, Xervum ha applicato il linguaggio visivo di Atomax all'interfaccia esistente e ha progettato le nuove funzionalità direttamente nel nuovo stile, sfruttando il design system già costruito e senza bisogno di un'ulteriore fase di wireframe.
Risultato
Un'interfaccia rifinita su più viewport, supportata da un design system con token colore semantici per una gestione temi semplice e pronta per la consegna agli sviluppatori.
Glossario → documentazione: partenza da un glossario di termini chiave, espanso in documentazione delle entità e dei flussi principali. Un riferimento condiviso che riduce ambiguità e velocizza il lavoro asincrono.
Mappatura rapida dei flussi utente critici con Mermaid.js
Wireframe mobile-first: costruiti prima del design visivo. Se funziona su mobile, funzionerà ancora meglio su desktop.
Prototipo completo: ogni flusso critico collegato in un unico prototipo. Esplorabile dall'inizio alla fine oppure saltando a un flusso specifico tramite indice.
Palette colori per tema chiaro e scuro, definita con token semantici. Il kit UI è collegato alle variabili di sviluppo: i componenti prendono i colori dai token, non da valori fissi. Gestione dei temi e manutenzione restano pulite.
Workspace Figma ben organizzato. Ogni file ha una miniatura personalizzata con titolo leggibile e anteprima del contenuto.
Grazie alla funzione di scambio librerie di Figma, cambiare tema a un componente nell'interfaccia diventa immediato.
Anteprime della pagina di liquidazione su diversi dispositivi.
File ben strutturato: pagine e flussi raggruppati per logica, con ogni pagina mostrata su tutti i breakpoint per una visione d'insieme completa del design.
Lista dei nodi registrati, con stati diversi per ogni nodo. Avvisi visivi chiari per i nodi con salute bassa o a rischio di liquidazione.
Landing Page Design
Prendere due piccioni con una fa.. landing page
In breve
Xervum ha progettato la landing page per portare gli utenti verso l'app. Per parlare a due utenze distinte, la pagina è stata divisa in sezioni dedicate. Ogni sezione mette in evidenza i benefici concreti, spiega il funzionamento del prodotto, mostra un'anteprima dell'interfaccia più rilevante, offre elementi di rassicurazione e chiude con un invito all'azione chiaro.
Come primo passo, Xervum ha creato una pagina coming soon temporanea che già anticipava i benefici per le due utenze.
Sezione Holders
Titolo che evidenzia il beneficio principale per gli holder.
Anteprima del componente di interfaccia più rilevante, con una breve spiegazione del funzionamento.
Spiegazione semplice del token di liquid staking: come funziona e quali vantaggi porta.
Benefici aggiuntivi e rassicurazioni, con un invito all'azione specifico per gli holder al posto di un generico "apri l'app".
Sezione Miners
Titolo su misura per i miner, con il loro beneficio principale in evidenza.
Anteprima del componente di interfaccia più rilevante, con una sequenza sintetica del funzionamento.
Spiegazione chiara delle funzionalità che contano di più per i miner, con focus su fiducia e rassicurazione.
Benefici aggiuntivi, rassicurazioni e invito all'azione dedicato ai miner.
La landing page è stata progettata e consegnata su tutti i breakpoint principali.
