Findable ist eine KI-gestützte Dokumentenintelligenz-Plattform für die Entwicklung der Umwelt. Im Jahr 2020 gegründet, hat das Unternehmen ein Team in Oslo und London. Das Unternehmen hilft Immobilieneigentümern, -verwaltern und -beratern dabei, Gebäudedokumentationen mithilfe von KI zu durchsuchen, Daten zu extrahieren und zu analysieren.

Die Plattform von Findable ermöglicht es den Nutzer*innen, Fragen in Tausenden von Baudokumenten in natürlicher Sprache zu stellen, strukturierte Daten aus unstrukturierten Dateien zu extrahieren und automatisch Compliance-Berichte zu erstellen. Diese KI-gesteuerten Funktionen erfordern Schnittstellen, die Leistung mit Einfachheit in Balance halten.

Als das Unternehmen seine App-Shell aktualisieren musste, sah das Designteam dies als Gelegenheit, den Produktentwicklungsworkflow zu optimieren. Sie hatten zuvor App-Shell-Redesigns mit Figma geliefert, aber in einer Kultur, die Effizienz und Experimentieren betont, war die Erkundung der Fähigkeiten von Figma Make der nächste Schritt.

Findable hat nicht nur den App-Shell-Aufbau 50 % schneller abgeschlossen und dabei 90 % des von Figma Make generierten Codes verwendet, sondern auch den Produktentwicklungsprozess demokratisiert und Teams außerhalb von Design und Entwicklung einbezogen.

Die Herausforderung: Die App-Shell muss sorgfältig gepflegt werden

Eine App-Shell bietet die grundlegende Struktur für eine Webanwendung. Sie ist das Erste, was geladen wird und entscheidend für die gesamte Benutzererfahrung. Riccardo Busato, Produktdesigner bei Findable, leitete das Projekt, und sein Auftrag beinhaltete die Gestaltung der Navigation, des Layouts und der Struktur. Diese Elemente bilden das Fundament, auf dem die übrigen Produkte von Findable basieren.

Die Herausforderung besteht darin, dass eine App-Shell zerbrechlich sein kann. Kleine Fehler können überall Auswirkungen haben, die zukünftige Flexibilität hängt von den zu Beginn getroffenen architektonischen Entscheidungen ab und es sind umfangreiche Tests und Iterationen erforderlich.

Die Lösung: Statische Designs werden zum Leben erweckt

Die Komplexität einer Live-Website lässt sich in einem statischen Bild nur schwer simulieren, daher hat Findable zuvor auf einen langen und detaillierten Übergabeprozess gesetzt, um Designer*innen und Entwickler*innen aufeinander abzustimmen. Und oft schlichen sich Interpretationslücken im Design-to-Code-Workflow ein, die erst in der Produktion entdeckt wurden.

Das ist es, was das Team zu Figma Make geführt hat. Es begann als ein Projekt, um Entwickler*innen von Anfang an mehr Tiefe und Klarheit zu geben, und entwickelte sich dann zu etwas viel Größerem.

Sowohl Strukturen als auch Designs entwickeln

Der erste „Aha“-Moment für Riccardo war, als er erkannte, dass Figma Make nicht nur visuelle Darstellungen erzeugte, sondern auch die Struktur der App-Shell entwickelte.

In Anlehnung an seine Erfahrung im Frontend- und Designsystembereich war er in der Lage, das gleiche Designsystem, die Komponenten, Themen und Stile der Findable-App innerhalb von Figma Make zu reproduzieren.

Dies bedeutete, dass das Team eine hochrealistische App-Shell mit echter Navigation und Routing-Logik innerhalb eines realen architektonischen Skeletts erstellen konnte.

Mit anderen Worten: ein voll funktionsfähiger, arbeitender Prototyp, der es Stakeholdern ermöglicht, die App nicht nur zu sehen, sondern sie auch zu fühlen.

Der Prototyp wird selbst zum Handoff

Das Team von Findable stellte fest, dass sie nicht nur schneller Ideen entwickelten, sondern dass Figma Make auch beim Übergang vom Design zum Code half.

Früher erforderte der detaillierte Übergabeprozess mehrere Meetings und oft ein spezielles Handoff-Tool. Jetzt wurde der Prototyp selbst zur Übergabe, was den Design-to-Code-Workflow rationalisierte.

Darüber hinaus können Figma Make-Dateien – wie Figma – weiterhin problemlos mit einem einfachen Link geteilt werden und ermöglichen weiterhin eine Live-Zusammenarbeit für schnelllebige Arbeiten zwischen Designer*innen und Entwickler*innen.

Eine wiederverwendbare Vorlage

Zu diesem Zeitpunkt war der Prototyp bereits leichter zu entwerfen, leichter zu testen, zu teilen und leichter zu übergeben als alles, was das Team zuvor entwickelt hatte.

Dann erkannte Riccardo, dass er etwas noch Mächtigeres gebaut hatte. Angesichts der Tatsache, dass das Designsystem und die architektonischen Muster bereits in den Prototypen codiert waren, könnte es sogar eine wiederverwendbare Vorlage für zukünftige Designs sein.

Mit diesem Gedanken im Hinterkopf hat das Team es weiter vorangetrieben, wichtige Funktionsmuster hinzugefügt und repräsentative Flows eingefügt, um die App-Shell in eine Vorlage zu verwandeln. Dies gab ihm über das anfängliche Projekt hinaus Leben, da die Vorlage die Grundlage für Findables Designsystem, Layout, Navigation und Architektur wurde.

Figma Make setzt die Regeln durch

Das Team verstand, dass das System trotz der soliden Grundlagen allmählich an Konsistenz und Struktur verlieren würde, wenn keine Leitplanken definiert würden. Die Seiten würden auseinanderdriften, die Muster würden verwischen, die Codequalität würde abnehmen und die Pflege würde leiden.

Um das zu lösen, hat Findable grundlegend die Richtung gewechselt, indem es Figma Make genutzt hat, um die Regeln der App selbst festzulegen und um Designregeln, Layoutmuster, Architekturbeschränkungen, Richtlinien zur Codequalität und sogar Tailwind-Nutzungsregeln selbst zu definieren.

Infolgedessen konnte das Team Konsistenz bei den Designs sicherstellen, basierend auf einer vorhersehbaren Struktur und sauberem Code.

„Indem wir die Regeln im Voraus mit Figma Make festlegten, schufen wir ein System, das konsistent, vorhersehbar und belastbar bleibt, während es wächst“, sagt Hans Christian Berge, Senior Designer. „Aber das eigentliche Schlüsselelement ist, dass es das Design für alle zugänglich macht–jeder bei Findable kann nun zum Produkt beitragen, ohne das Vorhandene zu gefährden.

Demokratisierung des Prototyping-Prozesses

Während die Kombination aus Front-End-Engineering-Wissen und architektonischem Denken dabei half, den Prototypen zu entwickeln, war es die Einführung der Designregeln, die für Findable alles veränderte. Das bedeutete, dass andere Designer*innen die Vorlage nutzen konnten, ohne etwas zu beschädigen, und gleichzeitig individuelle Designer-Variationen vermieden werden konnten, die oft entstehen, wenn Projekte von mehreren Personen bearbeitet werden.

Aber der eigentliche alles verändernde Moment war die Erkenntnis, dass nicht nur Designer*innen die Vorlage nutzen konnten. Wenn die Grundlagen der Vorlage solide sind, die Architektur kodiert ist, die Regeln explizit sind, können andere Teams in den Prozess einsteigen.

Dies hat den Prototyping-Prozess demokratisiert und völlig neue und für Findable unerwartete Anwendungsfälle eröffnet:

• Der Kundenerfolg entsteht aus den live mit der Kundschaft entwickelten Ideen.
• Im Vertrieb werden Prototypen für Funktionsanfragen in Meetings erstellt.
• PMs erkunden Flows, ohne beim Design blockiert zu werden.
• Es gibt schnellere, klarere Feedbackrunden im gesamten Unternehmen.

„Figma Make ermöglicht es mir, Ideen in Prototypen umzusetzen, während sie besprochen werden“, sagt Hans. „Ob während eines Kundengesprächs oder direkt danach, ich kann das Konzept innerhalb des Produkts formen und darauf vertrauen, dass es auf der Funktionsweise von Findable basiert.“

Ergebnisse

50 % schneller am Markt basierend auf 90 % Figma Make-Code

Die endgültige App-Shell wurde 50 % schneller geliefert und über 90 % des Codes von Figma Make wurden im Endprodukt genutzt. Der Code wurde zudem in weniger als einem Tag implementiert.

Was als App-Shell-Redesign begann, wurde zu etwas viel Größerem. Am Ende hatte Findable einen Prototypen, der als Design-Entwicklungs-Engine für das gesamte Unternehmen diente – eine Vorlage, ein Übergabetool, ein Kraftmultiplikator und ein Innovationsbeschleuniger.