Fondata nel 2020, con un team operativo a Oslo e Londra, Findable è una piattaforma di document intelligence basata sull'AI dedicata al settore edile. L'azienda aiuta proprietari, gestori e consulenti immobiliari a ricercare, estrarre e analizzare la documentazione degli edifici grazie all'AI.

La piattaforma di Findable consente agli utenti di porre domande su migliaia di documenti edilizi utilizzando il linguaggio naturale, estrarre dati strutturati da file non strutturati e generare automaticamente report di conformità. Queste funzionalità basate sull'AI richiedono interfacce capaci di bilanciare potenza e semplicità.

Così, quando l'azienda ha avuto la necessità di aggiornare l'app shell, il team di design ha colto l'occasione per ottimizzare il proprio flusso di lavoro nello sviluppo del prodotto. In passato avevano già realizzato delle riprogettazioni dell'app shell utilizzando Figma ma, in una cultura aziendale che punta tutto su efficienza e sperimentazione, esplorare le potenzialità di Figma Make è stata un'evoluzione naturale.

Findable non solo ha completato lo sviluppo dell'app shell il 50% più velocemente, utilizzando il 90% del codice generato da Figma Make, ma ha anche reso la creazione del prodotto un processo collettivo, coinvolgendo team esterni al design e allo sviluppo.

La sfida: gestire l'app shell con la massima cura

Un'app shell fornisce la struttura di base per un'applicazione web. È la prima cosa a essere caricata ed è fondamentale per l'esperienza utente complessiva. Riccardo Busato, Designer di prodotto di Findable, ha guidato il progetto e il suo incarico comprendeva la progettazione della navigazione, del layout e della struttura. Questi elementi gettano le basi da cui dipendono tutti gli altri prodotti di Findable.

La sfida è rappresentata dall'app shell, un componente che richiede estrema attenzione. Piccoli errori possono ripercuotersi ovunque a cascata; la flessibilità futura dipende dalle decisioni architettoniche prese a monte e il processo richiede test iterativi approfonditi.

Soluzione: dare vita ai design statici

La complessità di un sito live può essere difficile da simulare in un'immagine statica, per questo in passato Findable si affidava a un processo di passaggio di consegne lungo e dettagliato per mantenere l'allineamento tra designer e sviluppatori. E spesso, durante il flusso di lavoro dal design al codice, si insinuavano lacune interpretative che venivano notate solo una volta in produzione.

È stato proprio questo a spingere il team verso Figma Make. È iniziato come un progetto per offrire agli sviluppatori maggiore profondità e chiarezza fin dall'inizio, per poi evolversi in qualcosa di molto più grande.

Sviluppo di strutture, non solo di design

Il primo momento di vera illuminazione per Riccardo è stato quando si è reso conto che Figma Make non si limitava a generare elementi visivi: stava sviluppando anche l'intera struttura dell'app shell.

Sfruttando la sua esperienza nel front-end e nei sistemi di progettazione, è riuscito a ricreare lo stesso sistema di progettazione, i componenti, i temi e gli stili dell'app di Findable, il tutto all'interno di Figma Make.

Ciò ha permesso al team di sviluppare un'app shell ad alta fedeltà, dotata di una reale logica di navigazione e indirizzamento all'interno di un vero e proprio scheletro architettonico.

In altre parole: un prototipo funzionante e pienamente operativo, che permette agli stakeholder non solo di vedere l'app, ma di percepirne il reale funzionamento.

Il prototipo diventa il passaggio di consegne

Il team di Findable ha scoperto che non solo riusciva a generare idee più velocemente, ma che Figma Make facilitava anche la transizione dal design al codice.

In precedenza, il meticoloso processo di passaggio di consegna richiedeva molteplici riunioni e spesso uno strumento specifico. Ora il prototipo stesso è diventato il passaggio di consegne, snellendo l'intero flusso di lavoro dal design al codice.

Inoltre, i file di Figma Make, proprio come quelli di Figma, possono essere condivisi facilmente tramite un semplice link, continuando a permettere la collaborazione in tempo reale necessaria per il lavoro frenetico tra designer e sviluppatori.

Un modello riutilizzabile

A questo punto, il prototipo era già più semplice da progettare, più facile da testare e condividere, e decisamente più immediato da consegnare rispetto a qualsiasi altra cosa il team avesse realizzato in precedenza.

Poi, Riccardo si è reso conto di aver realizzato qualcosa di ancora più potente. Dato che il sistema di progettazione e i pattern architettonici erano già stati codificati nel prototipo, questo poteva diventare un modello riutilizzabile per i design futuri?

Con questo obiettivo in mente, il team si è spinto oltre, aggiungendo i pattern delle funzionalità chiave e popolando i flussi rappresentativi per trasformare l'app shell in un vero e proprio modello. In questo modo, il prototipo è sopravvissuto al progetto originale, poiché il modello è diventato la base per il sistema di progettazione di Findable, per il layout, la navigazione e le basi architettoniche.

Figma Make garantisce il rispetto delle regole

Il team era consapevole che, malgrado la robustezza dell'architettura, il sistema avrebbe sofferto di una perdita di coerenza strutturale in assenza di guardrail predefiniti. Le pagine avrebbero iniziato a divergere, i pattern a scostarsi dagli standard, la qualità del codice a degradare e la manutenibilità ne avrebbe risentito.

Per risolvere il problema, Findable ha impresso una svolta decisiva, utilizzando Figma Make per stabilire le regole stesse dell'app: definendo regole di design, pattern di layout, vincoli architettonici, linee guida sulla qualità del codice e persino le regole per l'utilizzo di Tailwind.

Di conseguenza, il team è stato in grado di mantenere i design coerenti, basandosi su una struttura prevedibile e su un codice più pulito.

Definendo le regole fin dall'inizio con Figma Make, abbiamo creato un sistema che rimane coerente, prevedibile e resiliente man mano che cresce", ha affermato Hans Christian Berge, Designer senior. Ma il vero valore aggiunto è che il design è diventato alla portata di tutti: - ora in Findable chiunque può dare il suo contributo al prodotto senza rischiare di compromettere quanto già realizzato.

Rendere la prototipazione accessibile a tutti

Se da un lato la combinazione di competenze di ingegneria front-end e visione architettonica ha aiutato a creare il prototipo, è stata l'introduzione delle regole di design a cambiare davvero tutto per Findable. In questo modo, altri designer potevano utilizzare il modello senza rischi, evitando al contempo quelle discrepanze individuali che spesso emergono quando più persone mettono mano allo stesso progetto.

La vera trasformazione è avvenuta quando abbiamo capito che il modello non era una prerogativa esclusiva dei designer. Con basi del modello solide, un'architettura integrata e regole ben definite, il processo diventa finalmente accessibile anche agli altri team.

Questo ha reso la prototipazione alla portata di tutti, aprendo la strada a casi d'uso inediti e sorprendenti per la stessa Findable:

• Il team di Customer Success che traduce le idee in prototipi in tempo reale durante i meeting con i clienti
• Il team di commerciale che crea prototipi delle funzionalità richieste direttamente durante i meeting
• I PM che testano i flussi in autonomia, senza gravare sul team di design
• Cicli di feedback più veloci e chiari in tutta l'azienda

"Con Figma Make posso tradurre le idee in prototipi in tempo reale durante il confronto", ha detto Hans. "Durante o subito dopo una riunione con un cliente, trasformo l'idea in un elemento del prodotto, con la certezza che sia basato sul reale funzionamento di Findable."

RISULTATI

Time-to-market ridotto del 50% grazie al fatto che il 90% del codice è generato da Figma Make

L'app shell finale è stata consegnata il 50% più velocemente, con oltre il 90% del codice di Figma Make utilizzato nel prodotto finale, e l'implementazione del codice è avvenuta in meno di una giornata.

Quello che era iniziato come una semplice riprogettazione di un'app shell si è trasformato in qualcosa di molto più grande. Alla fine, Findable ha ottenuto molto più di un prototipo: un ecosistema integrato di design e sviluppo che funge da modello, strumento di passaggio delle consegne e catalizzatore per l'innovazione aziendale.