Fondée en 2020, avec une équipe opérant depuis Oslo et Londres, Findable est une plateforme d'intelligence documentaire alimentée par l'IA pour l'environnement construit. L'entreprise aide les propriétaires, gestionnaires et consultants immobiliers à rechercher, extraire et analyser la documentation de construction à l'aide de l'IA.

La plateforme de Findable permet aux utilisateurs de poser des questions sur des milliers de documents de construction en utilisant le langage naturel, d'extraire des données structurées à partir de fichiers non structurés et de générer automatiquement des rapports de conformité. Ces fonctionnalités basées sur l'IA nécessitent des interfaces qui équilibrent puissance et simplicité.

Ainsi, lorsque l'entreprise a eu besoin de mettre à jour son application shell, l'équipe design y a vu une opportunité d'optimiser son workflow de développement de produit. Elle avait déjà livré des refontes de l'application shell en utilisant Figma, mais, avec une culture mettant l'accent sur l'efficacité et l'expérimentation, explorer les fonctionnalités de Figma Make était l'étape suivante.

Findable a non seulement construit l'application 50 % plus rapidement, utilisant 90 % du code généré par Figma Make, mais a aussi démocratisé le processus de conception de produit, en intégrant des équipes extérieures au design et au développement.

Défi : manipuler le shell de l'application avec soin

Un shell d'application fournit à une application web sa structure de base. Cette dernière constitue le premier composant à charger et est déterminante pour l'expérience utilisateur globale. Riccardo Busato, designer produit chez Findable, a dirigé le projet, avec pour responsabilité la conception de la navigation, de la mise en page et de la structure, entre autres. Ces éléments posent les bases sur lesquelles reposent les autres produits de Findable.

Le défi est qu'un shell d'application peut être fragile. Des erreurs mineures peuvent avoir des répercussions partout, la flexibilité future dépend des décisions architecturales prises au départ, et cela nécessite une quantité de tests et d'itérations.

Solution : donner vie aux designs statiques

La complexité d'un site en direct pouvant être difficile à simuler dans une image statique, Findable se reposait auparavant sur un processus de transfert long et détaillé pour maintenir les designers et les développeurs alignés. Et souvent, des écarts d'interprétation se produisaient pendant le workflow design-code, et n'étaient repérés qu'en production.

C'est dans ce contexte que l'équipe s'est tournée vers Figma Make. Le projet de départ a d'abord été de donner aux développeurs une profondeur et une clarté plus grandes dès le début, puis a évolué vers un projet bien plus vaste.

Construire des structures aussi bien que des designs

Riccardo Busato fut surpris la toute première fois qu’il réalisa que Figma Make ne générait pas seulement des visuels, mais concevait également la structure du shell de l'application.

S'appuyant sur son expérience dans le front-end et les design systems, il a pu recréer les mêmes design systems, composants, thèmes et styles que ceux de l'application Findable – le tout dans Figma Make.

Cela signifiait que l'équipe pouvait concevoir un shell d'application haute fidélité avec une navigation réelle et une logique de routage à l'intérieur d'un véritable squelette architectural.

En d'autres termes : un prototype entièrement fonctionnel, permettant aux parties prenantes non seulement de voir l'application, mais aussi de la ressentir.

Le prototype devient le transfert

L'équipe de Findable a constaté que non seulement elle générait des idées plus rapidement, mais aussi que Figma Make aidait à passer du design au code.

Auparavant, le processus de transfert détaillé nécessitait de multiples réunions et souvent un outil de transfert spécifique. Désormais, le prototype constitue le transfert, ce qui simplifie le workflow design-code.

De plus, les fichiers Figma Make (comme Figma) peuvent toujours être facilement partagés via un simple lien, et cela permet encore de collaborer en direct dans le cadre d'un travail rapide entre designers et développeurs.

Un modèle réutilisable

À ce stade, le prototype était déjà plus facile à concevoir, à tester, à partager et à transmettre que tout ce que l'équipe avait conçu auparavant.

Puis Riccardo Busato a réalisé qu'il avait créé quelque chose d'encore plus puissant. Étant donné que le design system et les modèles architecturaux étaient déjà codés dans le prototype, pouvait-il s'agir d'un modèle réutilisable pour les futurs designs ?

Dans cette optique, l'équipe est allée plus loin, ajoutant des modèles de fonctionnalités clés et des flux représentatifs alimentés pour transformer le shell de l'application en un modèle. Cela lui a donné vie au-delà du projet initial car le modèle est devenu la base du design system, de la mise en page, de la navigation et des fondations architecturales de Findable.

Figma Make applique les règles

L'équipe a compris que malgré des bases solides, la cohérence et la structure du système seraient progressivement perdues si des garde-fous n'étaient pas définis. Les pages divergeraient, les modèles dériveraient, la qualité du code se dégraderait et la maintenabilité en souffrirait.

Pour résoudre ce problème, Findable a fondamentalement changé de stratégie, utilisant Figma Make pour déterminer les règles de l'application elle-même, définissant ainsi les règles de conception, les modèles de mise en page, les contraintes d'architecture, les directives de qualité du code et même les règles d'utilisation de Tailwind.

En conséquence, l'équipe a pu maintenir des designs cohérents basés sur une structure prévisible et un code plus clair.

« En définissant les règles dès le départ avec Figma Make, nous avons créé un système qui reste uniforme, prévisible et résilient à mesure qu'il évolue », déclare Hans Christian Berge, designer senior. « Mais le véritable déclencheur, c'est que cela démocratise le design – quiconque chez Findable peut désormais contribuer au produit sans endommager ce qui existe déjà. »

Démocratiser le processus de prototypage

Bien que combiner des connaissances en ingénierie front-end à la réflexion architecturale ait aidé à concevoir le prototype, c'est l'introduction des règles de conception qui a tout changé pour Findable. Grâce à cette introduction, d'autres designers pouvaient utiliser le modèle, sans rien endommager, tout en évitant les variations issues de designers spécifiques qui surviennent souvent lorsque des projets concernent plusieurs personnes.

Mais c'est lorsqu'on a réalisé que ce n'était pas seulement les designers qui pouvaient utiliser le modèle que la transformation fut effective. Si les fondations du modèle sont solides, si l'architecture est codifiée, si les règles sont explicites, d'autres équipes pourraient participer au processus.

Cela a démocratisé le processus de prototypage, donnant lieu à des cas d'utilisation entièrement nouveaux et, pour Findable, inattendus :

• L'équipe réussite client esquissant des idées en direct avec les clients
• L'équipe des ventes prototypant des demandes de fonctionnalités lors des réunions
• Les PM explorant des flux sans s'arrêter au design
• Des boucles de feedback plus rapides et plus claires dans toute l'entreprise

« Figma Make me permet de prototyper des idées dès qu'elles sont discutées », déclare Hans Christian Berge. « Que ce soit lors d'une réunion avec un client ou immédiatement après, je peux donner forme au concept dans le produit et être sûr qu'il est ancré dans le fonctionnement réel de Findable. »

RÉSULTATS

Commercialisation 50 % plus rapide grâce au 90 % de code Figma Make

Le shell d'application final a été livré 50 % plus rapidement, avec plus de 90 % du code de Figma Make utilisé dans le produit final, et le code a été mis en œuvre en moins d'une journée.

Ce qui a commencé comme une refonte du shell de l'application a pris une ampleur bien plus vaste. En fin de course, Findable disposait d'un prototype faisant également office de moteur de conception-développement pour toute l'entreprise – un modèle, un outil de transfert, un multiplicateur de force et un accélérateur d'innovation.