Finanzen invest
Vom Figma-Design des Kunden zur live geschalteten WordPress-Website – in rund 2,5 Monaten. Mit eigener Gutenberg-Blockbibliothek, API-gestützter Wertpapiersuche und KI im Entwicklungsprozess.
Finanzen invest
Finanzen invest ist eine Marke der finanzen.net zero GmbH. Für den neuen Markenauftritt haben wir die öffentliche Website technisch neu aufgebaut: von Produkt- und Informationsseiten bis zur integrierten Wertpapiersuche.
Das Figma-Design mit Auto Layout kam vom Kunden. Wir übernahmen die technische Umsetzung und stimmten Module, responsive Zustände und redaktionelle Anforderungen eng mit dem Kundenteam ab.
Unser Ziel
Die Designvorlage pixelgenau in ein natives WordPress-System übersetzen, das der Kunde selbst pflegen und erweitern kann.
Eigene Gutenberg-Blöcke und ein eigenes Block-Theme bilden die Grundlage. Die individuellen Module und Funktionen sind Eigenentwicklungen auf Basis der WordPress-APIs – ohne Page Builder und ohne zugekaufte Modul-Sammlung.
Einblicke in die Umsetzung
Das haben wir gemacht
Auto-Layout-Strukturen, Abstände, Typografie und responsive Varianten aus der Kundenvorlage in Gutenberg übertragen. Zentrale Designwerte liegen im nativen WordPress-Designsystem. Eigene Blöcke nutzen Core-Blöcke, InnerBlocks und die vorgesehenen Editor- und Stilfunktionen.
Wiederverwendbare Inhaltsmodule und eine API-gestützte Wertpapiersuche für Namen, WKN und ISIN. Dazu individuell entwickelte Tabellen, FAQs und weitere Bausteine, die sich direkt im WordPress-Backend verwalten lassen.
Inhalte direkt im Gutenberg-Editor bearbeiten, Module kombinieren und responsive Darstellungen einstellen. Wiederkehrende Daten und gemeinsame Einstellungen werden zentral gepflegt. Der Kunde erhält ein abgestimmtes Redaktionssystem mit eigenen Einstellmöglichkeiten.
AI first. Mit System.
Als AI-first-Agentur setzen wir KI innerhalb klarer technischer Regeln ein. Über MCP angebundene WordPress-Dokumentation und Gutenberg-Werkzeuge liefern API- und Markup-Grundlagen. Die Projektarchitektur und dokumentierte Block-Verträge geben den Rahmen vor.
Code- und Markup-Prüfungen, Gutenberg-Serialisierungstests sowie Browserprüfungen für Editor und Frontend sichern Änderungen ab. Responsive Ansichten, Tastaturbedienung und automatisiert prüfbare Barrierefreiheit gehören zum Prüfablauf. Ergebnisse werden fachlich eingeordnet und kontrolliert.
In freigegebenen Arbeitsumgebungen können über definierte MCP-Schnittstellen auch vollständige Gutenberg-Seiten als Entwürfe entstehen. Rechteprüfungen, registrierte Blöcke und Versionsabgleiche begrenzen die Änderungen. Prüfung und Veröffentlichung bleiben beim verantwortlichen Team.
In ca. 2,5 Monaten live
Kurze Abstimmungswege und wiederverwendbare Module machten die Umsetzung in rund 2,5 Monaten möglich. Designabgleich, Entwicklung und redaktionelle Rückmeldungen liefen eng verzahnt.
Entwickelt wurde lokal, geprüft in einer getrennten Testumgebung und anschließend gezielt auf Live übertragen. Versionierte Änderungen und nachvollziehbare Prüfungen hielten Entwicklung und laufende Redaktion voneinander getrennt.
Qualität als Teil der Umsetzung
Semantisches HTML, sichtbare Tastaturfokusse, responsive Inhalte und automatisierte Prüfungen waren Teil der Entwicklung. Die projektbegleitenden Messungen erreichten Lighthouse-Accessibility-Scores von über 95 Punkten, teilweise 99 von 100 Punkten. Ein dokumentierter Test der öffentlichen Startseite vom 6. November 2026 zeigt 100 von 100 Punkten.
Der Score bewertet automatisiert prüfbare Kriterien. Er ersetzt keine manuelle Prüfung und belegt allein keine BFSG-Konformität. Zur Einordnung automatisierter Tests.
Datenschutz wurde bei der technischen Einbindung externer Dienste sowie bei Einwilligungs- und Widerrufsabläufen berücksichtigt.
Einblicke gefällig?
