W3 background

Eine UX/UI- & Entwicklungs-Transformation für W3 AG

Kontaktieren Sie uns

W3 website on a laptop

Kunde

•W3 AG

Zeitrahmen

•15 Tage

Lieferung

•UX-Forschung & UI-Design (Figma)

•Komplette Website-Entwicklung

•AWS-Bereitstellung

Website besuchen

AUSGANGSLAGE

Die bestehende Website von W3 AG spiegelte die Qualität und Professionalität ihrer Ingenieurarbeit nicht wider. Das Design wirkte veraltet, die Service-Struktur war unklar und Besucher hatten keinen intuitiven Weg, um die angebotenen Leistungen zu verstehen oder Kontakt aufzunehmen. Das gesamte Erlebnis hinterliess potenzielle Kunden ohne Vertrauen.

LÖSUNG

Wir gingen dies als vollständige digitale Transformation an, beginnend mit der Markenidentität über UX-Strategie, UI-Design bis hin zur Entwicklung. Die neue Website bietet W3 AG einen modernen, klaren Auftritt, der die Dienstleistungen deutlich kommuniziert, Vertrauen bei potenziellen Kunden aufbaut und Nutzer natürlich zur Beratung führt.

ÜBERBLICK

W3 AG ist ein Schweizer Ingenieurbüro, spezialisiert auf nachhaltige Gebäudetechniksysteme wie Heizung, Kühlung, Lüftung und Sanitärlösungen für Wohn- und Gewerbeimmobilien. Trotz starker technischer Expertise und solider Projektreferenzen entsprach die digitale Präsenz nicht dem Standard ihrer Arbeit. Wir wurden beauftragt, die Website von Grund auf neu zu gestalten, bestehende Markenassets zu nutzen und eine moderne, strukturierte und vollständig entwickelte Webpräsenz zu schaffen, von UX-Design bis zur Cloud-Bereitstellung.

Technologien

WordPress (CMS)
CSS (Frontend)
MySQL (Datenbank)
JavaScript (Frontend)
PHP (Backend)

Design-Software

Figma
Adobe Photoshop
Adobe Illustrator

Deployment & Serververwaltung

Amazon Web Services
EC2-Instanz
S3-Buckets

LEISTUNGEN

UNSERE ENTSCHEIDUNG

15 Tage. Das klingt kurz für ein komplettes Website-Projekt. Möglich war es, weil wir eine Entscheidung früh getroffen haben: Die Markenidentität von W3 AG ist gut. Sie muss nicht neu erfunden, sondern besser präsentiert werden. Kein Rebranding-Prozess, keine Scope-Erweiterung, keine verlorene Zeit. Stattdessen direkt in UX-Strategie und Entwicklung. Die zentrale Architekturentscheidung war die zweistufige Navigation, die Branchen und Leistungen trennt. Sie löst das Grundproblem technischer Dienstleistungen: Für Nicht-Ingenieure sind sie schwer greifbar. Die Trennung schafft Zugang, ohne die fachliche Tiefe zu opfern.

Grafikdesign

01TYPOGRAFIE

TYPOGRAFIE

1. Schriftauswahl2. Lesbarkeit

1. Schriftauswahl2. Lesbarkeit

PrimärBEBAS NEUE

SekundärLexend

font preview

Extra LightW3 AG

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

RegularW3 AG

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

MediumW3 AG

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

Semi BoldW3 AG

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

BoldW3 AG

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

UX/UI Design

Jeder Bildschirm der W3 AG-Website wurde in Figma nach einem strukturierten UX-Prozess gestaltet, von User Flows und Wireframing bis zum High-Fidelity UI.

UI-Komponenten

Desktop-Ansicht

Das Desktop-Layout wirkt strukturiert und selbstbewusst, mit starkem Hero-Bereich, logischem Service-Flow und klaren Call-to-Actions. Saubere Typografie und hochwertige Projektbilder vermitteln einen professionellen Ton passend zu den Ingenieurstandards von W3 AG.

W3 landing page on laptop

Hauptseiten

Branchen

Die Seite „Branchen“ hilft Besuchern schnell zu erkennen, ob W3 AG ihre Branche bedient, von Wohngebäuden bis Hotels und Gesundheitseinrichtungen, um relevante Informationen schnell zu finden.

Branchen

Leistungen

Jede Serviceseite ist klar strukturiert, mit Scope, Planung und erwarteten Ergebnissen – technisch fundiert für Glaubwürdigkeit, aber auch für Nicht-Ingenieure verständlich.

Leistungen

Projekte

Der Abschnitt „Projekte“ präsentiert abgeschlossene Arbeiten mit messbaren Ergebnissen, sodass das Portfolio ein echtes Vertrauensinstrument wird.

Projekte

Blog

Der Blog unterstützt die langfristige Sichtbarkeit von W3 AG, behandelt Themen wie Energieeffizienz und Bauvorschriften und positioniert das Unternehmen als Expertenstimme.

Blog

Mobile Ansicht

W3 Mobile View

Jeder Abschnitt wurde so gebaut, dass er sich natürlich an kleinere Bildschirme anpasst. Navigation, Inhaltslayout und CTAs reagieren sauber auf Mobilgeräte, wodurch die gleiche Qualität wie auf Desktop gewährleistet ist.

Startseite

Dienstleistungen

Kontakt

Branchen

Projekte

Navigation

Footer

ENTWICKLUNG

Wir haben die Website mit einer individuellen WordPress-Theme-Entwicklung erstellt, mit handgeschriebenem PHP, HTML und CSS, um die Figma-Designs präzise umzusetzen. JavaScript wurde gezielt eingesetzt, um die Website schnell und fokussiert zu halten.

Leistungsmetriken (KPIs)

Die Website wurde von Anfang an mit Performance als Kernanforderung entwickelt, und nicht als etwas, das nach dem Launch angegangen wurde.

Seitenladeleistung

LCP von 3,8s auf 1,2s reduziert – 62% schnellere Ladezeit.

LadezeitVorher

3,8s

LadezeitNachher

1,2s

Responsives Design

14 Layout-Verschiebungen behoben, um 96% Usability auf allen Geräten zu erreichen.

UsabilityVorher

40%

UsabilityNachher

96%

SEO-Optimierung

SEO-Score von 46 auf 99 gesteigert und indexierbare Seiten um 121% erweitert.

SEO-ScoreVorher

46%

SEO-ScoreNachher

99%

Systemzuverlässigkeit

Latenz um 76% reduziert bei 99,98% Uptime während Traffic-Spitzen.

ZuverlässigkeitVorher

40%

ZuverlässigkeitNachher

99%

Hauptentwicklungs-Herausforderungen & Lösung

01Herausforderung: Komplexe Service-Struktur in klare Navigation

02Herausforderung: Zweisprachiges Content-Management

03Herausforderung: CMS, das der Kunde eigenständig verwalten kann

Problem: Technisch detaillierte Services in eine einfache, intuitive Website zu bringen.

Lösung: Wir haben eine zweistufige Navigation erstellt, die Branchen und Services trennt.

01

Problem: Die Website sollte deutsch- und englischsprachigen Besuchern konsistent dienen.

Lösung: Wir haben ein sauberes Sprachumschaltungssystem in WordPress implementiert.

02

Problem: Die alte Website war schwer zu aktualisieren.

Lösung: Klare Editierblöcke im Backend geben W3 AG volle Kontrolle ohne technische Abhängigkeit.

03

development

Problem: Technisch detaillierte Services in eine einfache, intuitive Website zu bringen.

Lösung: Wir haben eine zweistufige Navigation erstellt, die Branchen und Services trennt.

01

Problem: Die Website sollte deutsch- und englischsprachigen Besuchern konsistent dienen.

Lösung: Wir haben ein sauberes Sprachumschaltungssystem in WordPress implementiert.

02

Problem: Die alte Website war schwer zu aktualisieren.

Lösung: Klare Editierblöcke im Backend geben W3 AG volle Kontrolle ohne technische Abhängigkeit.

03

Technische Architektur & Tech Stack

Auf einem sauberen, wartbaren Stack aufgebaut, gewählt für Performance und langfristige Nutzung.

WordPress

Vollständige redaktionelle Kontrolle ohne technische Abhängigkeit.

PHP

Unterstützt benutzerdefinierte Templates und dynamische Seitenfunktionen.

MySQL

Relationale Datenbank zur zuverlässigen Verwaltung aller Nutzerdaten.

JavaScript

Interaktive Elemente und flüssige Übergänge ohne unnötige Last.

tech frame

Fazit

Viele Schweizer KMU sitzen auf dem gleichen Problem wie W3 AG: Sie haben eine starke Leistung, eine solide Kundenbasis und eine Website, die das nicht zeigt. Das Design veraltet, die Struktur wächst organisch und irgendwann kommuniziert die digitale Präsenz nicht mehr das, was das Unternehmen wirklich ist.

Die Lösung war keine kosmetische Überarbeitung, sondern eine strukturelle Neuausrichtung: klare Nutzerführung, zweisprachige Infrastruktur, ein CMS, das W3 AG eigenständig verwaltet. Geliefert in 15 Tagen. W3 AG zeigt, dass digitale Transformation keine monatelangen Projekte und keine endlosen Rebrandings braucht. Manchmal braucht sie nur eine klare Entscheidung. Und jemanden, der sie umsetzt.

W3 AG zeigt, dass digitale Transformation nicht monatelange Projekte oder endlose Rebrandings braucht. Manchmal braucht sie nur den Mut, eine klare Entscheidung zu treffen — und jemanden, der sie schnell und präzise umsetzt.

Bereit loszulegen?