1. 01 · Übersicht
  2. 02 · Kontext
  3. 03 · Ablauf
  4. 04 · Design
  5. 05 · Karriere
  6. 06 · Weitere
Case Study Website · Redesign 2025 / 2026

Industrie sehen, statt sie zu behaupten.

Redesign der KSI-Website für einen Spezialisten im Industrie-Kälteanlagenbau. Ein Auftritt, der so präzise wirkt wie die Anlagen dahinter — mit klarer Navigation, konsistenter Bildsprache und einer neuen Karriereseite, über die sich Fachkräfte direkt online bewerben.

Kunde KSI Kältetechnik
Leistung Website + Karriereportal
Zielgruppe B2B · Industrie
Umfang 4 Monate
🔒ksi-kaelte.de
KSI-Startseite Bereich 1 KSI-Startseite Bereich 2 KSI-Startseite Bereich 3
Auf dem großen Schirm. Desktop · 1440 × 900 · ksi-kaelte.de ↗
/ 01
Kontext

Die Ausgangslage.

Wer

Ein inhabergeführter Spezialist für Industrie- und Gewerbekälte mit natürlichen Kältemitteln. Sitz in Heinsdorfergrund, Projekte bundesweit — von Rechenzentren über Hotels bis zu Lebensmittel-Logistik.

Was

Die bestehende Website war über Jahre gewachsen. Bildsprache uneinheitlich, Referenzen wirkten zusammengewürfelt, Karriere existierte als reiner Textblock. Für ein Unternehmen, das Fachkräfte sucht, zu wenig.

Ziel

Ein Auftritt, der die technische Substanz von KSI spürbar macht — und gleichzeitig den Recruiting-Kanal öffnet: klare Architektur, Industrielook, Bewerbungsformular direkt auf der Karriereseite.

/ 02
Bildsprache

Aus Stockfotos
wurden Anlagen.

Vorher — bis 2024
Altes KSI-Logo: blaues KSi auf schwarz mit grünem Akzent und KÄLTETECHNIK auf grünem Balken

Blau, Grün und Schwarz — laute CI mit drei Tönen, die um Aufmerksamkeit konkurrieren.

Nachher — ab 2025
Neues KSI-Logo: türkis-blaues KSI mit KÄLTE TECHNIK in Grau

Eine Akzentfarbe, klare Geometrie, ruhige Wortmarke. Aus Konkurrenz wird Hierarchie.

Das Vorher gibt es nicht mehr — die alte Seite war grünlich getönt, mit gemischten Stockfotos und unruhig wirkenden Referenzen. Wir haben das gesamte Bildmaterial neu kuratiert und farblich angeglichen: Alte Anlagen-Fotos wurden im selben Industrie-Look bearbeitet wie die neuen Aufnahmen. So sieht die Referenz-Übersicht aus wie aus einem Guss — auch wenn die Bilder aus zehn Jahren stammen.

Vorher — 2024
Unruhig · Stockfoto · kein Industrie-Gefühl
× Gemischte Fotostile mit deutlichem Grünstich — Stockfotos in kühl-grünen Tönen, kein industrielles Gefühl.
× Referenzlogos in unterschiedlichen Größen, Farben, Rändern.
× Karriere-Bereich: eine Seite mit Fließtext und einer E-Mail-Adresse.
Nachher — 2026
KSI Anlagenraum mit Verdichtern, Rohrleitungen und Armaturen
T °C
−24,8
COP
3,42
Anlagen · echt · nicht inszeniert
Eigene Anlagen-Fotografie — Verdichter, Rohrleitungen, Armaturen direkt aus den Maschinenräumen.
Alte und neue Referenz-Fotos durch konsistente Farbkorrektur in einen einheitlichen Industrie-Look gebracht.
Karriere als eigener Bereich mit 9 offenen Stellen und Online-Bewerbung.
/ 03
Strategie

Vier Entscheidungen
vor der ersten Zeile Code.

01 · Haltung

Industrielook statt Agentur-Optik

KSI baut Anlagen in 800-kW-Größe — das darf die Website zeigen. Dunkles Stahl-Blau, Beton-Grau, Mess-Türkis. Keine Hochglanz-Keyframes, keine künstlichen Business-Menschen.

Ton · Ruhig · Technisch · Faktisch
02 · Architektur

Fünf Wege, ein Ziel

Leistungen · Branchen · Referenzen · Über uns · Karriere. Jeder Interessent findet in maximal zwei Klicks das, was für ihn relevant ist — ohne in Untermenüs verloren zu gehen.

Nav · Flach · Scannbar · Deterministisch
03 · Beweis

Referenzen, die zusammenpassen

NorthC Rechenzentrum, Maritim Hotel Amsterdam, TÜV SÜD, Uponor — starke Namen brauchen eine starke Rahmung. Einheitliches Grid, gleiche visuelle Gewichtung, pro Kunde eine kuratierte Kurz-Story.

Proof · Konsistent · Kuratiert
04 · Karriere

Vom PDF zum Online-Formular

Fachkräftemangel ist real — und Bewerbung per E-Mail mit PDF-Anhang ist eine Hürde. Neue Karriereseite mit 9 Stellenprofilen und einem adaptiven Bewerbungs-Wizard inklusive Datei-Upload direkt im Browser.

Recruiting · Adaptiv · Direkt
/ 04
Ablauf

Vier Monate,
vier Phasen.

Von der ersten Recherche bis zum Go-Live — strukturiert in vier klare Etappen, damit jederzeit klar war, woran gerade gearbeitet wird und was als Nächstes kommt.

Monat 01 · Konzept

Bestand sichten,
Richtung setzen.

  • Workshop mit Geschäftsleitung & Personalleitung
  • Sitemap, Navigations­logik, URL-Struktur
  • Wording-Audit der bestehenden Seite
  • Briefing für Anlagen­fotografie
Monat 02 · Design

Industrielook
statt Stockfoto.

  • Design-System: Farben, Typo, Komponenten
  • Anlagenbilder vor Ort: Verdichter, Rohr, Maschinenräume
  • Referenzen-Grid kuratiert & farblich angeglichen
  • Karriere-Hero mit Mitarbeiter-Statement
Monat 03 · Aufbau

Seite bauen,
Wizard verdrahten.

  • WordPress-Setup, Theme, Custom-Blöcke
  • Bewerbungs-Wizard mit bedingter Logik
  • Upload-Handling (PDF, DOC, JPG · 10 MB)
  • Mail-Routing zur Personalleitung
Monat 04 · Launch

Feinschliff,
Schulung, Go-Live.

  • Performance-Tuning (Lighthouse 98)
  • SEO-Basis, Schema.org, Sitemap, OG-Tags
  • Redaktions­schulung für Stellen & Referenzen
  • Übergabe, Monitoring, Backup-Setup
/ 05
Design-System

Farbe, Schrift, Blick.

Farb-Palette
#0A0E12
#3B92B0
#6FB9D2
#B7C5CD
#E8E3DC

Stahl-Anthrazit als Basis, Mess-Türkis als Signal, warmer Beton als Hellkontrast für lange Textstrecken. Keine sekundären Akzente — eine Farbe führt, die anderen assistieren.

Typografie
Headline · Inter SemiBold Industrie­kälte Body · Open Sans Regular

Wir planen, bauen und warten Kälteanlagen mit natürlichen Kältemitteln — technisch sauber, ökologisch verantwortlich.

Technisch · Inter Medium NH₃ · CO₂ · PROPAN · +20 / −50 °C
Bildsprache — 6 Prinzipien
01 Eigene Anlagen-Fotografie. Keine Stockbilder mehr, stattdessen On-Site-Reportage in realen Maschinenräumen.
02 Kühle Farbtemperatur. Alle Fotos mit Weißabgleich um 4800–5200 K — nie warm, nie orangestichig.
03 Technik statt Menschen. Mitarbeiter nur kontextuell — im Mittelpunkt steht die Anlage.
04 Detailgrad sichtbar. Nahaufnahmen von Armaturen, Sensoren, Verdichtern — der Beweis für das Können.
05 Konsistente Ränder. 4 px Border-Radius, 1 px Borders, kein Rand­schwund.
06 Mess-Türkis als Signal. Aktivzustand, Live-Daten, Call-to-Actions — immer dieselbe Farbe, sparsam eingesetzt.
/ 06
Karriere · Bewerbungsformular

Bewerbung
ohne PDF-Krampf.

KSI Monteur im Einsatz — Industrieanlage in Betrieb

Werde Teil eines Teams,
das Zukunft kühlt.

Karriere · ksi-kaelte.de 9 offene Stellen

„Bei uns ist nur die Technik kalt — das Team nicht.” — Claim der neuen Karriereseite

Neun offene Stellen, dazu Ausbildungs­plätze, Praktika und Initiativbewerbungen. Das Formular passt sich dem Bewerbungstyp an, sammelt nur die wirklich relevanten Daten — und nimmt Lebenslauf, Zeugnisse und Anschreiben als Upload direkt entgegen. Keine E-Mail, kein PDF-Export, kein Medienbruch.

01 Adaptiver Wizard. Felder wechseln je nach Position — Meister, Ingenieur, Azubi, WIG-Schweißer bekommen exakt ihre Fragen.
02 Upload bis 10 MB pro Datei. PDF, DOC, JPG, PNG — direkt im Browser, mit Fortschritts­anzeige und Validierung.
03 Benefits sichtbar. Firmenfahrzeug, Bike-Leasing, Fahrsicherheits­training, geregelte Arbeitszeiten — keine Floskeln, sondern konkrete Angebote.
04 DSGVO-konform. Explizite Einwilligung vor Absendung, Server-Standort Deutschland, verschlüsselte Übertragung.
05 Sofort beim Team. Neue Bewerbung landet direkt bei der Personalleitung — kein Inbox-Abfluss, kein „noch nachreichen”.
🔒ksi-kaelte.de / karriere / bewerben
Online-Bewerbung
Mechatroniker Kältetechnik
01 Position
02 Daten & Upload
03 Absenden
Tobias
Weber
t.weber@mail.de
+49 151 23 …
Klasse B
01.07.2026
Unterlagen hochladen
Lebenslauf, Zeugnisse, Anschreiben · bis 10 MB je Datei
Lebenslauf_Weber.pdf 1,8 MB
Zeugnisse_2024.pdf 3,2 MB
← Zurück Bewerbung absenden →
/ 07
Leistungs­umfang

Was mkul geliefert hat.

01
Informations­architektur

Sitemap, Navigations­logik, URL-Struktur & Wording für fünf Hauptbereiche.

02
Design-System

Farben, Typografie, Komponenten, Spacing-Skala & Icon-Set. Abgestimmt auf Print-Dokumentationen.

03
Bildsprache & Art-Direction

Briefing für Anlagenfotografie, Bildbearbeitung, einheitliches Referenzen-Grid.

04
Copy & Content

Texte für Startseite, Leistungen, Branchen, Über uns, Karriere. SEO-geprüft.

05
Entwicklung & CMS

WordPress-Setup, Custom-Blöcke, Redakteurs-Oberfläche ohne überflüssige Optionen.

06
Bewerbungs-Wizard

Mehrstufiges Formular mit bedingter Logik, Upload-Handling & Mail-Routing.

07
Performance & SEO

Lighthouse-Optimierung, Structured Data, Sitemap, Open-Graph, Keyword-Fokus.

08
Hosting & Wartung

Managed-Hosting mit Backups, Monitoring, monatliche Security-Updates, DSGVO-Setup.

09
Schulung

Redaktionstraining für Stellenausschreibungen, Referenz-Pflege & Blog-Einträge.

/ 08
Technik

Schlank gebaut,
sauber wartbar.

CMS WordPress Design Figma Frontend Tailwind + Twig Formular Custom Wizard (PHP + JS) Upload Dropzone · 10 MB / Datei Mail SMTP · TLS-verschlüsselt Hosting Deutschland · DSGVO SEO Rank Math + Schema.org Performance WP Rocket + WebP Monitor Uptime-Robot + Backups
→ Weitere Projekte

Mehr aus dem Studio.

Alle Projekte