Website-Relaunch Hausverwaltung Kuhlendahl

Ausgangslage: ein Familienbetrieb mit veralteter Website

Die Hausverwaltung Kuhlendahl ist ein familiengeführtes Unternehmen, das 1996 in Wuppertal gegründet wurde und sich auf die Verwaltung von Wohnimmobilien spezialisiert hat, von der Betreuung von Miethäusern und Eigentumswohnungen über Reparaturen und Wartungen bis zu Gebäudereinigung und Gartenpflege. Der Auftrag entstand aus einer echten Anfrage des Betriebs, der seine gewachsene Qualität nun auch digital abbilden wollte. Die bestehende Website wurde dem nicht gerecht: Ein niedrig aufgelöstes Hintergrundbild lag über allen Seiten und drückte die Lesbarkeit der Texte, das auf jeder Seite wiederholte Kontaktformular hob sich kaum vom Hintergrund ab, und mangels Footer und klarer Navigation fand man sich nur schwer zurecht. Die Inhalte waren knapp und ohne Keyword- und SEO-Optimierung, sodass das Unternehmen auch über Suchmaschinen schwer zu finden war. Im ersten, persönlich vor Ort geführten Briefing wurden die Ziele abgesteckt: ein moderner, intuitiv navigierbarer und rechtssicherer Auftritt, pflegbar über ein CMS und mit deutlich besseren Kontaktwegen.

1. Analyse

2. Konzept

3. Wireframe

4. Feindesign

5. Umsetzung

Wissenschaftlich statt Bauchgefühl: die ISO-9241-Analyse

Damit der Relaunch nicht auf Geschmack, sondern auf belastbaren Erkenntnissen beruht, wurde der Ist-Zustand systematisch bewertet. Grundlage war die DIN EN ISO 9241, die wichtigste Norm für die Gebrauchstauglichkeit von Websites, deren Teil 110 sieben Interaktionsprinzipien für benutzerfreundliche Anwendungen beschreibt. Gemessen daran zeigten sich die Schwächen der alten Seite klar: Die Aufgabenangemessenheit war nur teilweise erfüllt, die Selbstbeschreibungsfähigkeit nur teilweise bis gar nicht, und Erwartungskonformität wie Benutzerbindung waren gar nicht gegeben. Diese nüchterne Diagnose lieferte die konkrete Aufgabenliste für den gesamten weiteren Prozess und machte den Fortschritt später überhaupt messbar.

2

Zielgruppen

6

Personas

650 km

Remote-Zusammenarbeit

Zwei Zielgruppen, zwei Welten

Der Webauftritt muss zwei sehr unterschiedliche Gruppen gleichzeitig bedienen. Immobilieninhaber (B2B) suchen einen verlässlichen Partner für die Verwaltung ihrer Wohn- und Gewerbeimmobilien und erwarten Zuverlässigkeit, Transparenz und eine saubere Abwicklung von Mietzahlungen, Wartungen und Reparaturen. Mieter (B2C) erwarten dagegen vor allem eine schnelle Reaktion auf Anfragen und Mängel sowie klare, persönliche Ansprechwege. Auf Wunsch des Auftraggebers lag der Schwerpunkt auf den Immobilieninhabern, zugleich sollte aber ein eigenständiges Konzept für die Mieter entstehen, um beide Richtungen vergleichen zu können. Um die Erwartungen greifbar zu machen, wurde jede Zielgruppe durch je drei Personas verkörpert, die typische Merkmale, Verhaltensweisen und Ansprüche als konkrete Menschen darstellen.

Der erste Kontakt darf keine Hürde sein.

Wettbewerb und SWOT: aus fremden Fehlern lernen

Ergänzend ordneten eine SWOT- und eine Mitbewerberanalyse die Lage ein. Die SWOT machte Stärken und Chancen sichtbar, etwa die kurzen, direkten Kommunikationswege und der wachsende Bedarf an professioneller Immobilienverwaltung in der Region, aber auch Schwächen wie den bislang schwachen medialen Auftritt und die geringe Bekanntheit. Für die Mitbewerberanalyse wurden mehrere regionale Hausverwaltungen aus dem Umfeld Wuppertals herangezogen. Sie zeigte, dass die Konkurrenz oft über mehr Jahre Erfahrung verfügt, was den Schluss nahelegte, an anderer Stelle zu punkten, nämlich mit Klarheit und einfacher Kontaktaufnahme. Besonders lehrreich waren die Extreme: Ein Anbieter schreckte mit einem Kontaktformular ab, das erst nach rund zehn Abfragen überhaupt eine Kontaktaufnahme erlaubte, während ein anderes Vorbild mit übersichtlicher Navigation, ausgewogenem Verhältnis von Text und Bild und einem konsequent durchgehaltenen Bildmotiv einen sehr hochwertigen Eindruck hinterließ. Aus diesen Beobachtungen wurden direkte Gestaltungsregeln abgeleitet.

Zwei Konzepte im direkten Vergleich

Aus Analyse und Zielgruppen entstanden zwei eigenständige Konzepte mit jeweils eigener Informationsarchitektur. Das erste Konzept für die Immobilieninhaber ist bewusst sachlich gehalten: Es stellt die Leistungen der Hausverwaltung, ein Service-Versprechen, die Vorteile, aktuelle Immobilienangebote und einen klaren Kontaktbereich in den Vordergrund und reduziert die Gestaltung auf das Wesentliche, um den hohen Informationsgehalt gut lesbar zu machen. Das zweite Konzept für die Mieter ist emotionaler angelegt und rückt schnelle Kommunikation, direkte Ansprechpartner mit Kurzvorstellung, häufige Fragen und Downloads in den Mittelpunkt. Überschneidungen gibt es bewusst nur bei den Kontaktmöglichkeiten, den Downloads und dem FAQ-Bereich, ansonsten folgt jedes Konzept konsequent der Erwartungshaltung seiner Zielgruppe.

Informationsarchitektur: Card Sorting und Sitemap

Bevor gestaltet wurde, musste die Struktur stimmen. Grundlage jeder Informationsarchitektur waren vorausgegangene Nutzerbefragungen. Mit der Card-Sorting-Methode wurden Unterseiten und Inhalte den passenden Oberbegriffen zugeordnet, die später die Navigation bilden, wobei ein befreundeter Immobilieninhaber und Vermieter als Proband diente. Die daraus entstandene Makro-Informationsarchitektur wurde in einem Videomeeting mit dem Unternehmen besprochen, als nachvollziehbar und gut strukturiert bestätigt und anschließend zu einer finalen Sitemap ausgearbeitet. So war sichergestellt, dass die Navigation nur Begriffe enthält, die die Zielgruppen tatsächlich verstehen, und dass das breite Dienstleistungsportfolio sinnvoll gegliedert bleibt.

Wireframes nach dem Mobile-First-Prinzip

Auf Basis der Sitemap entstanden in Figma die Wireframes, die in reduzierter Form Aufbau und Funktion einer Seite planen, bevor Farbe und Bild ins Spiel kommen. Gearbeitet wurde nach dem Mobile-First-Ansatz: Zuerst wurde das Layout für kleine Displays auf die wichtigsten Inhalte reduziert und danach für den Desktop adaptiert. Im mobilen Bereich diente ein zweispaltiges Raster, auf dem Desktop ein flexibles Zwölf-Spalten-Raster, das je nach Seite in sechs oder vier Spalten und teils in asymmetrische Bereiche unterteilt wurde. Die Navigation läuft am Desktop über eine Top-Bar mit Dropdowns und farblicher Hervorhebung der aktuellen Seite, mobil über ein platzsparendes Hamburger-Menü. Die Typografie orientiert sich am Material Design von Google mit 16px Fließtext und vier Überschriftengrößen, und die Zeilenlänge wurde gerade für breite Monitore bewusst begrenzt, damit der Lesefluss nicht leidet. Interaktive Elemente und Call-to-Action-Buttons sind stark reduziert, aber sofort als solche erkennbar. Jeder Zwischenstand wurde über anonymisierte Umfragen und Fragebögen evaluiert.

Moodboard, Hausfarben und Hausschriften

Für den Übergang in die Gestaltung entstand je Zielgruppe ein Moodboard, das sich an das bestehende Corporate Design des Betriebs anlehnt, um einen einheitlichen Auftritt zu wahren. Als Hausschrift kommt die Google-Font „Questrial" zum Einsatz, die nur in einem einzigen Schnitt vorliegt, weshalb Überschriften und Bedienelemente mit sorgfältig geprüften CSS-Styles gegenüber dem Fließtext abgehoben werden mussten, eine bewusst gelöste gestalterische Hürde. Die Farbwelt basiert auf den Hausfarben und ergänzt sie um Abstufungen, damit sich Buttons und Bedienelemente kontrastreich absetzen. Zwischen den beiden Konzepten liegen dabei feine, aber gezielte Unterschiede: Für die Mieter-Variante wurden die zuvor abgerundeten Bedienelemente kantiger, die Hausfarbe minimal angepasst und die Bildwelt stärker auf Familien und Mietergruppen ausgerichtet.

Feindesign: von Gestaltgesetzen zu festen Kontaktwegen

Wireframe und Moodboard flossen anschließend in die High-Fidelity-Feindesigns für Start-, Über-Uns-, Informations- und Kontaktseite zusammen. In der Gestaltung sorgten bewährte Gestaltgesetze für Ordnung: Das Gesetz der Nähe fasst Zusammengehöriges zusammen, das Gesetz der Ähnlichkeit lässt gleich gestaltete Elemente auch gleich funktionieren, und das Gesetz der gemeinsamen Region übersetzt sich in ein klares Kacheldesign für Leistungen und Angebote. Im Konzept für die Immobilieninhaber begleiten den Nutzer minimalistische Kontaktelemente an einer festen Position am rechten Bildschirmrand, die jederzeit Adresse, Telefon und E-Mail bereithalten. Das Mieter-Konzept streut stattdessen bewusst persönliche Ansprechpartner mit Bild über die Seiten, ergänzt um horizontal scrollbare Angebots-Kacheln, einen Downloadbereich und einen FAQ-Bereich, um Nähe statt reiner Sachlichkeit zu vermitteln. Beide Konzepte durchliefen nach dem Wireframe eine zweite, eigene Feedbackrunde, deren Ergebnisse ins finale Feindesign zurückflossen.

Von der Studie zur echten Website

Das Projekt war kein reines Planspiel, sondern lief unter realen Bedingungen. Die Zusammenarbeit fand über rund 650 Kilometer Distanz statt und wurde über regelmäßige Videokonferenzen und ein Trello-Board organisiert, wobei echtes Nutzerfeedback aus den Büroräumen des Betriebs einfloss. Trotz der typischen Reibungen eines echten Auftrags, von verschobenen Terminen bis zu erst noch zu textenden Inhalten, blieb die Abstimmung durchgehend professionell und zielgerichtet. Am Ende stand eine abgeschlossene, fundierte Designphase als Grundlage für die anschließende Programmierung, und der Relaunch wurde für die Hausverwaltung Kuhlendahl später auch tatsächlich umgesetzt. Genau diese Verbindung aus belastbarer UX-Analyse und einem klaren, zielgruppengerechten Design trägt einen Relaunch, statt ihn nur hübsch aussehen zu lassen.

Was macht einen guten Website-Relaunch aus?

Ein tragfähiger Website-Relaunch beginnt nicht beim Layout, sondern bei der Analyse: einer ehrlichen, an Normen wie der ISO 9241 gemessenen Bewertung des Ist-Zustands, einer klaren Definition der Zielgruppen über Personas sowie einem Blick auf Wettbewerb und eigene Stärken. Darauf folgen eine zielgruppengerechte Informationsarchitektur, mit Nutzern abgestimmte Wireframes nach dem Mobile-First-Prinzip, ein an das Corporate Design angelehntes Feindesign und mehrere Runden echtes Nutzerfeedback. So entsteht ein Auftritt, der schneller gefunden wird, Vertrauen schafft und die Kontaktaufnahme spürbar erleichtert, wie das Beispiel der Hausverwaltung Kuhlendahl von der ersten Analyse bis zum realen Relaunch zeigt.