Zurück zum Portfolio
UX Redesign & Webentwicklung

Langner GM Website
Redesign

Conversion-orientiertes Redesign einer Dienstleister-Website mit verbesserter Informationsarchitektur, klarer Kontaktführung und strukturiertem UX-Funnel.

Langner GM Website Redesign
UX ResearchInformation ArchitectureConversion OptimizationReactVite
01 · Projektkontext

Orientierung & Ausgangslage

Langner GM ist ein lokales Dienstleistungsunternehmen, das sich auf Wasserschadensanierung und Bautrocknung spezialisiert hat.

Branche
Gebäudemanagement · B2C
Aufgabe
UX Redesign & Entwicklung
Rolle
UX Strategie · Design · Dev
Stack
React · Vite · Figma
02 · Problem

Was war kaputt

Die bisherige Website kommunizierte den Wert der Dienstleistung nicht effektiv und erschwerte es den Nutzern, das Unternehmen in dringenden Situationen schnell zu kontaktieren.

Unübersichtliche Servicestruktur
Leistungen waren nicht klar gruppiert — Nutzer verstanden nicht sofort, welche Probleme das Unternehmen löst.
Schwer auffindbare Kontaktmöglichkeiten
CTA-Elemente fehlten im kritischen Moment — kein sofortiger Notfallkontakt, keine WhatsApp-Option.
Schwache visuelle Hierarchie
Keine klare Priorität der Inhalte. Alles wirkte gleich wichtig — also war nichts wichtig.
Schlechte mobile Erfahrung
Mobile Nutzer — die Hauptzielgruppe im Notfall — hatten keine optimierte Navigation und Kontaktführung.
Alte Website Screenshot
// X-Ray: Alte Website — Screenshot
03 · UX Analyse

Warum es scheiterte

Strukturelle Diagnose der Kernprobleme — nicht als Liste von Fehlern, sondern als Kausalanalyse: Ursache → Auswirkung → Lösung.

Nutzer mussten die Kontaktmöglichkeiten innerhalb von Sekunden erreichen, besonders in Notsituationen wie bei einem Wasserschaden.

// 01
Navigationsstruktur
Vorher (Typische Probleme) —Unübersichtliche Servicestruktur
Nachher —Flache Struktur mit maximal 5 Hauptpunkten. Notfallkontakt permanent sichtbar im Header.
Before: Navigationsstruktur
After: Navigationsstruktur
// 02
Informationshierarchie
Vorher (Typische Probleme) —Schwer auffindbare Kontaktmöglichkeiten
Nachher —Klare H1→H2→CTA Sequenz. Jede Sektion hat ein primäres Ziel und leitet zur nächsten Aktion.
Before: Informationshierarchie
After: Informationshierarchie
// 03
Kontaktfluss
Vorher (Typische Probleme) —Schwache visuelle Hierarchie
Nachher —Multi-Channel Kontakt: Sticky CTA, WhatsApp-Button, direkter Anruf — immer einen Tap entfernt.
Before: Kontaktfluss
After: Kontaktfluss
04 · Strategie

Der Lösungsplan

Ziel: Die Nutzer direkt zur Kontaktaufnahme mit dem Unternehmen führen.

01
vereinfachte Navigation
Seitenstruktur in logische Inhaltsblöcke gliedern — Service → Vertrauen → Kontakt. Nutzer finden sofort, was sie brauchen.
02
klare Service-Kategorien
Alle kritischen Interaktionen für den Notfall-Nutzer optimieren: schnelle Ladezeit, sofortige Kontaktmöglichkeit, Touch-freundliche CTAs.
03
prominente Kontakt-Buttons
Bewertungen, Reaktionszeit, Versicherungspartner und Teamfotos strategisch einsetzen — Vertrauen in Sekunden aufbauen.
04
verbesserte Mobile-First-Struktur
Jede Sektion führt zur nächsten Aktion. Kein toter Punkt auf der Seite — immer ein klarer nächster Schritt für den Nutzer.
05
stärkere visuelle Hierarchie
05 · Designprozess

Der Lösungsplan

01
Discovery & Audit
Analyse der alten Website, Zielgruppen-Research und Wettbewerbsanalyse. Identifikation der kritischen UX-Bruchstellen.
02
Information Architecture
Sitemap und User Flows definieren. Welche Inhalte auf welcher Ebene — und in welcher Reihenfolge werden sie präsentiert?
Information Architecture
03
Wireframing & Prototyping
Low-Fidelity Wireframes in Figma. Strukturelle Entscheidungen testen, bevor visuelles Design beginnt.
Wireframing & Prototyping
04
High-Fidelity Design & Entwicklung
Finales Design in Figma, dann saubere Umsetzung in React + Vite mit Mobile-First Ansatz und Performance-Optimierung.
High-Fidelity Design
06 · Zentrale UX-Entscheidungen

Zentrale UX-Entscheidungen

Jede Entscheidung folgt einer klaren Logik: Problem → Lösung → messbarer Effekt.

// Entscheidung 01
Sticky SOS Header
Problem
Der Notdienst-Kontakt bleibt beim Scrollen immer sichtbar, um die Reaktionszeit in Stresssituationen zu minimieren.
// Entscheidung 02
WhatsApp Direkt-Kontakt
Problem
Ermöglicht das sofortige Senden von Schadensfotos für eine schnellere erste Einschätzung durch die Experten.
// Entscheidung 03
Fokus auf Versicherungsabwicklung
Problem
Gezielte Platzierung von Vertrauenssignalen zur direkten Abrechnung nimmt finanzielle Sorgen beim ersten Kontakt.
// Entscheidung 04
Mobile-First Interaktion
Problem
Optimierung aller Klick-Elemente für die einhändige Bedienung am Unfallort via Smartphone.
07 · UX Lösung

Das Ergebnis

Visueller Beweis — das finale Design in voller Qualität.

Hero Section
Servicestruktur
Kontaktbereich
Kontakt & Footer
08 · Mobile Erfahrung

Mobile Experience

Die Website wurde mit einem Mobile-First UX-Ansatz neu gestaltet, um einen schnellen Zugriff auf Services und Kontaktmöglichkeiten zu gewährleisten.

Hero SectionHero Section
ServicestrukturServicestruktur
KontaktbereichKontaktbereich
Ansatz
Mobile-First Design
Kontakt
1 Tap entfernt
Performance
Optimierte Ladezeit
09 · Produktkommunikation

Produktkommunikation

Um die gesamte Kommunikation des Unternehmens zu unterstützen, wurde ein kurzes Promo-Video erstellt. Das Ziel war es, potenziellen Kunden ein klares und sofortiges Verständnis für das Unternehmen, seine Leistungen und die Prozessabläufe zu vermitteln – insbesondere in dringenden Situationen wie bei einem Wasserschaden.

Langner GM Website Redesign
// Promo Video — Langner GM
10 · Impact

Gelieferter Wert

Dieses Redesign konzentriert sich auf die Verbesserung von Klarheit, Vertrauen und Conversion durch eine bessere Struktur und Positionierung.

Verbesserte Conversion-Klarheit
Eine klare Leistungsstruktur und fokussierte Call-to-Actions erleichtern es den Nutzern, ohne Verwirrung den nächsten Schritt zu verstehen.
Reduzierte Kontaktbarrieren
Vereinfachte Navigation und prominente Kontaktoptionen helfen den Nutzern, schneller Kontakt aufzunehmen, besonders in dringenden Situationen.
Stärkere Informationshierarchie
Inhalte sind in logische Abschnitte gegliedert, sodass Nutzer relevante Leistungen und wichtige Informationen schnell finden.
Mobile-First Architektur
Das Interface ist für die mobile Nutzung optimiert, was den schnellen Zugriff auf Leistungen und Kontaktmöglichkeiten на pequenos Bildschirmen garantiert.
Nächstes ProjektFitHub Digital Ecosystem

Projekt besprechen

Lassen Sie uns gemeinsam herausfinden, wie UX und klare Informationsarchitektur Ihr Produkt verbessern können.

Strategiegespräch starten