UX/UI-Konzept & Website-Entwicklung für einen Gebäudemanagement-Betrieb · Konzeptprojekt

Reintal GM
Website-Konzept & Umsetzung

Wie kann eine Website für einen modernen Gebäudemanagement-Betrieb gestaltet sein, damit Besucher Leistungen, Notfallinformationen und Kontaktmöglichkeiten schnell finden – besonders auf dem Smartphone?

Reintal GM – Website-Konzept & Umsetzung
UX ResearchInformation ArchitectureConversion OptimizationReactVite
01 · Projektkontext

Orientierung & Ausgangslage

Für dieses Konzeptprojekt wurde ein eigenständiger Webauftritt für einen fiktiven Gebäudemanagement-Betrieb entwickelt. Im Mittelpunkt standen eine klare Informationsstruktur, schnelle Orientierung und eine besonders einfache Nutzung auf mobilen Geräten.

Branche
Gebäudemanagement · B2C
Aufgabe
Website-Konzept & UX-Strategie
Rolle
UX Strategie · Design · Dev
Stack
React · Vite · Figma
02 · Die Idee

Die Idee

Menschen besuchen die Website eines Gebäudemanagement-Betriebs selten in einer entspannten Situation. Häufig steht ein konkreter Schaden im Raum, es besteht Zeitdruck, und der nächste Schritt muss sofort klar sein.

Deshalb wurde die Website nicht als klassische Unternehmenspräsentation konzipiert, sondern als geführte Informations- und Kontaktstruktur: Leistungen müssen schnell erfassbar sein, relevante Informationen ohne Umwege erreichbar bleiben und der nächste Schritt jederzeit eindeutig sein.

Aus dieser Grundannahme leitet sich jede weitere Entscheidung im Konzept ab.

Notfallkontakt versteckt
Die wichtigste Nummer sitzt bei vielen Gebäudemanagement-Websites im Footer oder erst nach mehreren Klicks — genau dort, wo in einer Notlage keine Zeit bleibt.
Nur ein Kontaktweg
Häufig gibt es ausschließlich ein Formular, ohne Alternative für Menschen, die lieber sofort anrufen oder eine Nachricht per WhatsApp schicken.
Versicherungsfrage bleibt offen
Die Kostenübernahme wird selten früh angesprochen — die Unsicherheit über die Rechnung bleibt bis zum ersten Anruf bestehen.
Ablauf nach dem Kontakt unklar
Nach dem ersten Klick fehlt oft jede Orientierung, was als Nächstes passiert und wie lange es dauert.
03 · Prinzipien im Konzept

Prinzipien im Konzept

Aus dieser Ausgangsidee ergeben sich vier Prinzipien, die die Struktur der gesamten Website bestimmen. Jedes davon ist im fertigen Auftritt umgesetzt und hier direkt am Interface belegt.

// 01
Notdienst-Kontakt ohne Umweg
Prinzip
Der wichtigste Kontaktweg gehört an die sichtbarste Stelle — nicht in ein Untermenü.
Warum
Wer einen Wasserschaden hat, sucht keine Unternehmensgeschichte, sondern eine Nummer. Die Notdienst-Nummer liegt deshalb dauerhaft in der Kopfzeile, zusätzlich als eigener Button mit Direktwahl. Die Navigation bleibt flach.
Notdienst-Nummer und Direktwahl dauerhaft im Header
// Notdienst-Nummer und Direktwahl dauerhaft im Header
// 02
Mehrere gleichwertige Kontaktwege
Prinzip
Unterschiedliche Menschen handeln unterschiedlich — Anruf, WhatsApp und Formular stehen gleichberechtigt nebeneinander.
Warum
Nicht jeder möchte in einer Stresssituation telefonieren. Der WhatsApp-Button öffnet eine vorformulierte Nachricht, sodass sich der Schaden direkt per Foto schildern lässt. Zu jedem Kanal steht, wann er erreichbar ist.
Drei Kontaktwege mit klarer Erreichbarkeitsangabe
// Drei Kontaktwege mit klarer Erreichbarkeitsangabe
// 03
Vertrauen im Versicherungsfall
Prinzip
Die Kostenfrage wird beantwortet, bevor sie gestellt wird.
Warum
Die größte Unsicherheit bei einem Schaden ist nicht die Reparatur, sondern die Rechnung. Die direkte Abrechnung mit der Versicherung wird bereits im ersten Screen zugesagt und in einem eigenen Abschnitt ausführlich erklärt.
Eigener Abschnitt zur Versicherungsabwicklung
// Eigener Abschnitt zur Versicherungsabwicklung
// 04
Orientierung über den Ablauf
Prinzip
Nutzer sollen wissen, was nach dem Anruf passiert.
Warum
Unsicherheit über den weiteren Ablauf ist eine der größten Hürden vor dem Erstkontakt. Vier klar benannte Schritte — von der Kontaktaufnahme bis zur Versicherungsabwicklung — nehmen diese Unsicherheit vorweg.
„Ihr Weg zur Lösung“ — vier nachvollziehbare Schritte
// „Ihr Weg zur Lösung“ — vier nachvollziehbare Schritte
04 · Designprozess

Der Prozess

01
Discovery & Audit
Analyse der Anforderungen, Zielgruppen-Research und Themenpriorisierung. Identifikation der zentralen UX-Themen.
02
Information Architecture
Sitemap und User Flows definiert — welche Inhalte auf welcher Ebene, und in welcher Reihenfolge sie präsentiert werden.
Information Architecture
03
Wireframing & Prototyping
Low-Fidelity Wireframes in Figma — strukturelle Entscheidungen getestet, bevor das visuelle Design begann.
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 & Entwicklung
05 · UX Lösung

Das Ergebnis

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

Hero Section
Servicestruktur
Kontaktbereich
Kontakt & Footer
06 · Mobile Erfahrung

Mobile Experience

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

Ansatz
Mobile-First Design
Kontakt
1 Tap entfernt
Performance
Optimierte Ladezeit
07 · Impact

Gelieferter Wert

Das Konzept verbindet klare Informationsarchitektur, direkte Kontaktwege und eine mobile-first Nutzerführung zu einem digitalen Auftritt, der auf die konkreten Anforderungen eines Gebäudemanagement-Betriebs zugeschnitten ist.

Klare Leistungsstruktur
Alle Leistungen sind in nachvollziehbare Kategorien gegliedert — vom Notfall bis zur kompletten Renovierung.
Direkte Kontaktführung
Anruf, WhatsApp und Rückruf-Formular stehen gleichberechtigt zur Verfügung und sind von jeder Position aus erreichbar.
Vertrauensorientierte Kommunikation
Versicherungsabwicklung, Ablauf und Team sind als eigene Inhaltsebenen umgesetzt statt als Randnotiz.
Mobile-First Nutzerführung
Die mobile Ansicht ist als primärer Einstieg gestaltet, nicht als verkleinerte Desktop-Variante.
Konsistente visuelle Sprache
Durchgängiges System aus Farbe, Typografie und Komponenten über alle Seiten und Breakpoints hinweg.

Ihre Leistungen sind komplex. Ihre Website sollte es nicht sein.

Klare Strukturen, mobile Nutzerführung und direkte Kontaktwege — konzipiert für den Alltag Ihrer Kunden.

Projekt besprechen