Making-of FRAMEN: Eine Enterprise-Website, neu gebaut.

Das Problem: zwei Zielgruppen, eine Stimme

Bevor die erste Design-Entscheidung fiel, haben wir verstanden, womit wir es zu tun haben. Das Projekt startete mit einem Kickoff mit der gesamten FRAMEN-Führungsebene und einer Phase, in der wir die Plattform selbst benutzt haben: eigene Accounts im Ads Manager und Screen Manager, Auswertung der Analytics der alten Seite, Wettbewerbsanalyse für beide Zielgruppen.

Das Ergebnis war eine klare Diagnose. Ein Gym-Betreiber und ein Mediaplaner haben unterschiedliche Fragen, unterschiedliche Sprache, unterschiedliche Kaufwege. Eine Seite, die beide gleichzeitig anspricht, spricht am Ende an beiden vorbei. Die Lösung musste also strukturell sein: separate Funnels pro Zielgruppe, eigene Seitenstränge für die wichtigsten Branchen.

Die Hero-Section: von Software-Look zu Apple

Für die Hero haben wir mehrere Richtungen vollständig ausgearbeitet und der C-Level-Ebene präsentiert - jeweils mit klarer Empfehlung. Aus dem Feedback entstand eine bewusste Schärfung: weniger Software-Look, mehr Apple.

Also eine weitere Iterationsrunde. Die neue Hero setzt auf ein Fullscreen-Visual, das die Screens dort zeigt, wo sie wirken: in echten Locations. Für diese Visuals haben wir eigene Video-AI-Rendering-Konzepte entwickelt und produziert, statt auf Stock auszuweichen. Das Ergebnis ist ein minimalistischer Apple-Look mit dezenten, präzise gesetzten Animationen.

Eine Erkenntnis aus dieser Phase wurde zum Designprinzip: Gym-Betreiber und Hoteliers sitzen nicht am Laptop, sie haben das Handy in der Hand. Ab diesem Punkt wurde jede Entscheidung Mobile-First getroffen.

Vom Konzept zum kompletten System

Aus der freigegebenen Landing Page wurde das ganze System: über 15 Seiten, darunter die getrennten Funnel-Welten für Locations und Advertiser, Pricing, Success Stories, Press, About und Blog. Dazu CMS-Strukturen für Partner-Logos, Cases und News, damit das FRAMEN-Team Inhalte selbst skalieren kann.

In dieser Phase ging es um die Details, die über Conversion entscheiden: Wo steht welcher Call-to-Action? Wie führt der Flow einen Gym-Betreiber vom ersten Scroll zur Anfrage - und einen Mediaplaner zum richtigen Produkt? Struktur, Inhalte und Flows wurden mehrfach optimiert, bis beides saß: die Wirkung der Marke und der Weg zur Anfrage.

Development: Style-System statt Abhängigkeit

Gebaut wurde die Seite in Webflow, auf einem ausführlichen Style-System: definierte Komponenten, konsistente Klassen, dokumentierte Strukturen. Das ist mehr Arbeit am Anfang - und genau deshalb der richtige Weg. FRAMEN kann die Website dadurch selbst anpassen und erweitern, ohne von uns abhängig zu sein.

Dazu kommt ein mehrsprachiges Setup mit sauberer Verzeichnis-Struktur. Das behebt eine konkrete SEO-Schwäche der alten Seite: Übersetzungen, die Suchmaschinen vorher nie gesehen haben, sind jetzt indexierbar - ein direkter Sichtbarkeitsgewinn in mehreren Märkten.

Motion & Performance: grüner PageSpeed trotz Video

Beim Motion Design haben wir umgesetzt, was das Konzept versprochen hat: interaktive, vektorbasierte 3D-Animationen, die das Produkt erklären statt nur zu dekorieren, dezente Übergänge und eine optimierte Video-Pipeline für die filmischen Hero-Inhalte.

Die eigentliche technische Leistung steckt in der Kombination: Trotz der Größe der Seite, trotz Videos und Animationen, bleibt der PageSpeed-Index komplett grün. Performance auf diesem Niveau bei video-lastigen Websites ist kein Zufall. Sie ist das Ergebnis von konsequenter Asset-Kompression, einer durchdachten Lazy-Loading-Strategie und sauberem Code.

Häufige Fragen

Eine Website, die dein Produkt erklärt

Komplexes Produkt, mehrere Zielgruppen, hoher Anspruch ans Design? Genau das ist unser Terrain. Lass uns über dein Projekt sprechen - schreib uns über unser Kontaktformular.