Fundada en 2020, con un equipo que opera desde Oslo y Londres, Findable es una plataforma de inteligencia documental con tecnología de IA para el sector de la construcción. La empresa ayuda a los propietarios, gestores y consultores inmobiliarios a buscar, extraer y analizar la documentación de los edificios utilizando IA.

La plataforma de Findable permite a los usuarios hacer preguntas sobre miles de documentos de construcción utilizando un lenguaje natural, extraer datos estructurados de archivos no estructurados y generar informes de cumplimiento automáticamente. Estas funciones con tecnología de IA requieren interfaces que combinen potencia y simplicidad.

Así que, cuando la empresa necesitó actualizar la estructura de su aplicación, el equipo de diseño lo vio como una oportunidad para optimizar su flujo de trabajo de desarrollo de productos. Ya habían rediseñado la estructura de la aplicación antes de usar Figma, pero con una cultura que valora la eficiencia y la experimentación, explorar las capacidades de Figma Make era el siguiente paso.

Findable no solo completó la creación de la estructura de la aplicación un 50 % más rápido, utilizando el 90 % del código generado por Figma Make, sino que la empresa también democratizó el proceso de creación de productos, incorporando a equipos ajenos al diseño y al desarrollo.

Desafío: manejar la estructura de la aplicación con cuidado

La estructura de una aplicación proporciona la base para una aplicación web. Es lo primero que se carga y es clave para la experiencia general de usuario. Riccardo Busato, diseñador de productos en Findable, dirigió el proyecto, y su encargo incluía diseñar la navegación, la disposición y la estructura. Estos elementos sientan las bases de las que dependen el resto de productos de Findable.

El desafío es que la estructura de una aplicación puede ser frágil. Los pequeños errores pueden propagarse por todas partes, la flexibilidad futura depende de las decisiones arquitectónicas tomadas desde el principio y requiere pruebas exhaustivas y muchas iteraciones.

Solución: dar vida a los diseños estáticos

La complejidad de un sitio web activo puede ser difícil de simular en una imagen estática, por lo que Findable solía recurrir a una entrega larga y detallada para que los diseñadores y desarrolladores estuvieran bien coordinados. Y, a menudo, se producían malentendidos durante el flujo de trabajo del diseño al código, que solo se detectaban en producción.

Eso fue lo que llevó al equipo a utilizar Figma Make. Empezó como un proyecto para que los desarrolladores tuvieran más información y claridad desde el principio, y se convirtió en muchísimo más.

Crear estructuras y diseños

El primer momento revelador para Riccardo fue cuando se dio cuenta de que Figma Make no solo generaba imágenes, sino que también creaba la estructura de la aplicación.

Aprovechando su experiencia en front-end y sistemas de diseño, fue capaz de recrear el mismo sistema de diseño, componentes, temas y estilos de la aplicación de Findable, todo ello dentro de Figma Make.

Esto significaba que el equipo podía crear una estructura de aplicación de alta fidelidad con una lógica real de navegación y enrutamiento dentro de un esqueleto arquitectónico real.

En otras palabras: un prototipo totalmente funcional y operativo, que permitía a las partes interesadas no solo ver la aplicación, sino sentirla.

El prototipo se convierte en la entrega

El equipo de Findable descubrió que no solo generaban ideas más rápido, sino que Figma Make también les facilitaba la transición del diseño al código.

Antes, el proceso detallado de entrega requería varias reuniones y, a menudo, una herramienta específica para ello. Ahora, el prototipo se convirtió en la entrega, y eso agilizó el flujo de trabajo del diseño al código.

Además, los archivos de Figma Make, como Figma, se pueden seguir compartiendo fácilmente con un simple enlace y siguen permitiendo la colaboración en tiempo real para que el trabajo entre el diseñador y el desarrollador sea más rápido.

Una plantilla reutilizable

En este punto, el prototipo ya era más fácil de diseñar, probar, compartir y entregar que cualquier cosa que el equipo hubiera creado antes.

Entonces Riccardo se dio cuenta de que había creado algo aún más potente. Dado que el sistema de diseño y los patrones arquitectónicos ya estaban implementados en el prototipo, ¿podría servir como plantilla reutilizable para futuros diseños?

Con esto en mente, el equipo fue un paso más allá y añadió patrones de funciones clave y flujos representativos para convertir la estructura de la aplicación en una plantilla. Esto le dio vida más allá del proyecto inicial, ya que la plantilla se convirtió en la base del sistema de diseño, la disposición, la navegación y los fundamentos arquitectónicos de Findable.

Figma Make impone las reglas

El equipo comprendió que, a pesar de contar con unos cimientos sólidos, el sistema iría perdiendo poco a poco su coherencia y estructura si no se establecían unas directrices claras. Las páginas se irían diversificando, los patrones se desviarían, la calidad del código se deterioraría y el mantenimiento se vería afectado.

Para resolver esto, Findable dio un giro radical y utilizó Figma Make para establecer las reglas de la propia aplicación: definió normas de diseño, patrones de disposición, restricciones de arquitectura, directrices de calidad del código e incluso reglas de uso de Tailwind.

Como resultado, el equipo pudo mantener la coherencia de los diseños basándose en una estructura predecible y un código más limpio.

“Al definir las reglas desde el principio con Figma Make, creamos un sistema que se mantiene consistente, predecible y resistente a medida que crece”, afirma Hans Christian Berge, diseñador sénior. “Pero lo realmente revolucionario es que democratiza el diseño: cualquiera en Findable puede ahora contribuir al producto sin dañar lo que ya existe”.

Democratizar el proceso de creación de prototipos

Si bien la combinación de conocimientos de ingeniería front-end y pensamiento arquitectónico ayudaron a crear el prototipo, fue la introducción de las reglas de diseño lo que cambió todo para Findable. Esto permitió que otros diseñadores pudieran usar la plantilla sin causar ningún daño, y también evitó las diferencias entre diseñadores que suelen surgir cuando varias personas trabajan en un mismo proyecto.

Pero el verdadero punto de inflexión fue darse cuenta de que no solo los diseñadores podían usar la plantilla. Si los cimientos de la plantilla son sólidos, si la arquitectura está codificada y si las reglas son explícitas, otros equipos pueden unirse al proceso.

Esto democratizó el proceso de creación de prototipos, lo que dio lugar a casos prácticos totalmente nuevos e inesperados para Findable:

• El equipo de satisfacción del cliente esboza ideas con los clientes
• El equipo de ventas crea prototipos de las solicitudes de funciones en las reuniones
• Los gerentes de producto exploran los flujos de trabajo sin que el diseño sea un obstáculo
• Ciclos de comentarios más rápidos y claros en toda la compañía

“Figma Make me permite crear prototipos de las ideas a medida que se discuten”, dice Hans. “Ya sea durante una reunión con el cliente o justo después, puedo dar forma al concepto dentro del producto y estar seguro de que se basa en cómo funciona realmente Findable”.

RESULTADOS

El tiempo de comercialización se redujo en un 50 % utilizando el 90 % del código de Figma Make

La estructura final de la aplicación se entregó un 50 % más rápido, con más del 90 % del código de Figma Make en el producto final; además, el código se implementó en menos de un día.

Lo que comenzó como una remodelación de la estructura de la aplicación se convirtió en algo mucho más grande. Al final, Findable obtuvo un prototipo que servía también como motor de diseño y desarrollo para toda la empresa: una plantilla, una herramienta de entrega, un multiplicador de fuerzas y un acelerador de innovación.