preloader image

UX/UI-Design

SCHAKO KG

Rolle

Senior UX/UI-Designer

Zeitraum

2023 – ongoing

Branche

Technische Gebäudeausrüstung (TGA) · Lüftungs- & Klimatechnik · B2B-SaaS

SCHAKO stellt seit 1928 lufttechnische Komponenten her und gilt als Erfinder des Drallauslasses — heute ein europäisches Kompetenzzentrum für Belüftung und Klimatisierung. Mit SCHAKOnext überführt das Unternehmen seinen Produktkatalog in eine digitale Planungsplattform. Meine Aufgabe war, daraus ein Werkzeug zu machen, das Lüftungs- und TGA-Fachplaner früher im Projekt abholt — vor Konfiguration und Ausschreibung — und dabei die technische Präzision liefert, die diese Zielgruppe erwartet.

End-to-End

Verantwortungstiefe

Strategie → IA → Interaction → UX-Writing → Prototyp

6

Kernmodule konzipiert

WCAG 2.2
AA

Accessibility-Standard

Multi-Persona

Zielgruppe

Fokus TGA-Fachplaner

Ausgangslage

SCHAKO verfügte über einen leistungsfähigen Produktkonfigurator und ein etabliertes Online-Auslegungsprogramm — beide setzten jedoch spät im Arbeitsprozess der Planer an, nämlich bei der Frage „Welches Produkt?". In der TGA-Planung entscheidet sich die Komponentenwahl aber deutlich früher: Wer den Fachplaner erst beim Konfigurieren erreicht, konkurriert bereits gegen Entscheidungen, die längst gefallen sind. Der strategische Hebel lag also nicht in einem besseren Konfigurator, sondern im früheren Einstieg in den Planungs-Workflow — dort, wo etablierte Plattformen des Wettbewerbs bislang den Takt vorgeben.

Hinzu kam die Komplexität der Domäne. Fachplaner denken nicht in Einzelprodukten, sondern in Strukturen: Projekt → Gebäude → Geschoss → Raum → Anforderung → Komponente. Jeder Raum trägt eigene lufttechnische Parameter — Volumenstrom, Druckverlust, Schallpegel, Brandschutzanforderung. Ein Werkzeug, das an der Produktebene beginnt, bildet diese Denkweise nicht ab und bremst den Experten aus. Erschwerend wirkten strukturelle Datenlücken: Produktdaten lagen über Ländergrenzen hinweg in getrennten Silos. Die Kernspannung des Projekts: maximale technische Tiefe für Experten, ohne Erstnutzer zu überfordern — bei mehreren Personas, die jede zusätzliche Klickstrecke als Zeitverlust werten. Beispielhaft hier eine Exploration mit Nutzern zur Thematik „Schnelle Raumbestückung", welche die Anlage immer wieder vorkommender Standard-Räume erleichtert.

Vorgehen & Entscheidungen

Die grundlegende Entscheidung war ein Reframing: weg vom Konfigurator, hin zur Planungsplattform. Die gesamte Informationsarchitektur wurde am realen mentalen Modell der Planer ausgerichtet — Räume als zentrale Arbeitseinheit, Komponenten als deren Inhalt. In der Projektansicht führt ein raumbasiertes Register durch Geschosse und Räume; jede Zeile trägt Position, Bezeichnung, den monospaced gesetzten Produktschlüssel und die Menge, während ein kontextsensitives Side-Panel Raumdaten, Luftmengen und Anmerkungen bündelt. So bleibt die Übersicht flach, und die Tiefe wird erst auf Abruf sichtbar.

Dieses Prinzip der schrittweisen Offenlegung (Progressive Disclosure) trägt sich durch alle Module. Drei Entscheidungen prägten das Ergebnis besonders. Erstens: ein durchdachtes System für kritische Aktionen, das Nutzern auf einen Blick zeigt, wie folgenreich ein Schritt ist, statt jede Löschung gleich zu behandeln. Zweitens: technische Machbarkeit als Design-Input — Umsetzungsgrenzen wurden nicht als Hindernis behandelt, sondern flossen von Anfang an in die Gestaltung ein. Drittens: Barrierefreiheit als Grundlinie statt Nacharbeit, mit WCAG 2.2 AA als verbindlichem Standard von Beginn an, validiert über eigenständige, klickbare Prototypen.

„Ein Konfigurator fragt: Welches Produkt? Ein Planer denkt in Projekten, Räumen und Anforderungen. SCHAKOnext wurde entlang der Denkweise der Planer gebaut — nicht entlang des Produktkatalogs."

Wirkung

Das Reframing verschaffte SCHAKO einen strategischen Einstiegspunkt weiter vorn im Planungs-Workflow — genau dort, wo die Komponentenwahl tatsächlich fällt. Statt einen Konfigurator gegen etablierte Plattformen zu stellen, positioniert SCHAKOnext sich als Planungsumgebung, in der der Katalog nur ein Baustein von mehreren ist.

Die erarbeiteten Konzepte bildeten die Grundlage für die Priorisierung der nächsten Ausbaustufe — mit KI-gestützter Vorauslegung, einem Template-Marktplatz und einer integrierten Wissensebene. Für die KI-Funktionen wurden dabei belastbare Designprinzipien gesetzt: Transparenz statt „Magie", durchgängige Reversibilität jeder Vorschlagsaktion sowie Confidence-Scoring und Provenance-Tracking — nicht als Feature, sondern als Voraussetzung dafür, dass Planer den Vorschlägen vertrauen und die fachliche Verantwortung klar zuordenbar bleibt. Der Produktkonfigurator wurde in diesem Zusammenhang ebenfalls redesigned und mit in den Projekt-Workflow eingebettet (siehe nachfolgende Grafik).

Rolle & Zusammenarbeit

Ich verantwortete die UX/UI über die gesamte Tiefe — von der strategischen Positionierung über Informationsarchitektur und Interaction Design bis zu UX-Writing und Frontend-Prototyping.

Die Zusammenarbeit lief eng mit Product Ownership und Entwicklung sowie mit fachlichen und standortübergreifenden Stakeholdern; Implementierungsrealität und Datenlage flossen dabei kontinuierlich als Gestaltungsparameter zurück ins Design. Meine Prototypen dienten weniger der Illustration als der Validierung: eigenständige, technisch anschlussfähige Artefakte, an denen Konzepte vor der Umsetzung überprüfbar wurden.

Prozess dahinter

Der Kernprozess.

Der Weg eines TGA-Fachplaners von der Projektauswahl über die raumbasierte Erfassung bis zum Ausschreibungs-Export. Elemente sind interaktiv — beim Hover erscheinen Detailinformationen.

Start Ende Aufgabe Entscheidung (Gateway) Wiederholschleife
… separater Prozess Ja Nein Nein Ja Nein Ja PDF GAEB Ja — weitere Räume/Geschosse Start: Der Fachplaner öffnet SCHAKOnext und beginnt die Projektarbeit. Start Projekt über die globale Suche oder die Projektliste finden und öffnen. Projekt suchen oder auswählen Verzweigung: Existiert das Projekt bereits, oder muss es neu angelegt werden? × Projekt vorhanden? Neues Projekt mit Projektname und Projektphase (Ausschreibung/Angebot, Planung, Ausführung, Abgeschlossen) anlegen. Neues Projekt anlegen Projektname, Phase Der Projekt-Arbeitsbereich mit Geschoss-, Raum- und Produktübersicht öffnet sich. Projekt-Arbeitsbereich öffnen Geschoss über das „+“-Menü in der Geschossnavigation hinzufügen. Geschoss anlegen Raum anlegen und Raumdaten erfassen: Nutzungsart, Personenzahl, Fläche, Raumhöhe, zulässiger Schalldruckpegel. Raum anlegen + Raumdaten erfassen Nutzung, Fläche, Höhe, Schall Produkt bzw. Komponente per Menü oder Drag & Drop dem Raum zuordnen. Produkt/Komponente zuordnen Menü oder Drag & Drop Verzweigung: Benötigt das zugeordnete Produkt eine individuelle Konfiguration? × Konfiguration nötig? Produkt im integrierten Produktkonfigurator einstellen (z. B. Baugröße, Ausführung, Zubehör) und Auswahl zurück in den Raum übernehmen. Im Produktkonfigurator konfigurieren Zuluft, Abluft und Luftwechselrate werden aus Raumdaten und zugeordneten Produkten automatisch berechnet. Luftmengen automatisch prüfen Zuluft/Abluft, Luftwechselrate Verzweigung: Werden noch weitere Räume oder Geschosse benötigt? × Weitere Räume/ Geschosse? Verzweigung: Gibt es offene Fragen oder fehlende Angaben zu diesem Raum? × Klärungsbedarf? Offene Punkte werden im Projekt als Klärungsbedarf markiert, ohne den weiteren Ablauf zu blockieren. Klärungsbedarf markieren Optional: Weitere Personen zum Projekt einladen oder einzelne Räume gezielt teilen. Beteiligte einladen / Raum teilen Vor dem Export: Ergebnis filtern, sortieren und auf Vollständigkeit prüfen. Ergebnis filtern, sortieren, prüfen (QS) Verzweigung: Export als PDF für die Dokumentation oder als GAEB für die Ausschreibung. × Exportformat wählen PDF-Export für Dokumentation und Weitergabe an Projektbeteiligte. PDF-Export Dokumentation GAEB-Export für die Ausschreibung und Vergabe im TGA-Planungsprozess. GAEB-Export Ausschreibung Ende: Projektdaten sind für Ausschreibung oder nächste Planungsphase bereit. Ende
→ Zum Erkunden horizontal scrollen · Elemente zeigen beim Hover Details

Interaktiv ausprobieren

Konzept & Design live erleben

Das Konzept lässt sich direkt im Browser bedienen — als eigenständiger, klickbarer Prototyp ohne Login. Dieser Prototyp zeigt beispielhaft die Bearbeitung von Massendaten mit Veränderungsmöglichkeiten der Interface-Architektur: Seitenpanel und Navigation sind per Klick ausblendbar, die Density der Listeneinträge ist steuerbar, und umfangreiche Spalten-Optionen lassen sich explorieren.